새로운 것을 배우다 보니 여유가 없었던 것일까... 아니면 시간이 빠듯해서 그랬던 것일까...
동영상을 보면서 공부할 때, 하나하나 다 캡처해서 나중에 바로 사용할 수 있도록 정리하는 편인데
노드 JS 첫 주 차에는 전부 놓쳤다
덕분에 이번에 RestAPI 배포하면서 무진장 애를 먹었음 ^. ^
각설하고, 이번 주차에 새로운 실습하면서 처음부터 차근차근 시작하는 것 같으니
ㅠㅠㅠㅠㅠ 늦기 전에 정리하기
📌 Node.JS와 Express
이제 막 개발을 시작한 코린이 프론트앤드 개발자는
Node.JS가 서버를 구축하는 라이브러리인 줄 알았다.
JS/TS 공부한다면서 쥐구멍에라도 들어가고 싶은 기분..
Node.JS는 JS를 브라우저 없이 단독으로 실행할 수 있게해주는 하나의 플랫폼
그럼 서버는 무엇으로 구축할 건데?
서버는 처음이기도 했고, 구글링하기에는 점유율이 높은 것이 최고지 싶어서
Express 라이브러리를 사용할 거다.
📌 실습 시작
노드서버는 CRA같은 이로운 물건이 없나보다, 대뜸 폴더부터 만들어야함
1. VS 코드로 todo 라는 귀여운 친구를 만들어주자
2. Express를 사용해야하니까 프로젝트에 모듈(라이브러리)을 설치해주자
npm i express -S
폴더와 json 파일이 잘 만들어졌다면 굿
설치 됐는지 안됐는지 불안하고 의심된다면 package.json 파일에 설치 되었는지 확인해보면 됨
까꿍ㅇ_ㅇ⭐
3. 루트 경로에 app.js 파일을 생성한다.
app.js가 메인이 될 서버 파일 친구라고 보면된다.
이제 이 안에다가 express 모듈을 적용하고 서버 코드를 작성할 것이다.
4. app.js 코드 작성
const express = require('express');
const app = express();
const port = 8080;
const router = express.Router();
app.get('/', (req, res) => {
res.send("E_ppo서버에 어서오세오");
});
router.get('/', (req, res) => {
res.send("API 루트에오 ");
});
app.use('/api', express.json(), router);
app.listen(port, () => {
console.log(port, "서버로 연결되었어요!");
});
코드 내용은 별거 없다.
app에서 express를 사용할 수 있도록 라이브러리 객체를 생성해서 app에 할당
리액트 때문에 3000번 포트는 쓸 수 없어서
서버를 열 때 8080번 포트를 사용할 수 있도록 지정해 줬다.
루트(8080/)로 설정된 엔드 포인트로 접속하면 브라우저가 get 요청을 받아 'E_ppo 서버에 어서 오세요'라는 메시지를 띄울 거다
그 다음은 라우터라는 미들웨어 친구를 사용해서 앞으로 만들 api의 주소(경로)를 정리해 줘야지.
/api 경로로 요청이 들어오면 express.json 미들웨어로 json을 읽어오자
문제없이 잘 연결되면 api의 루트로 설정된 엔드 포인트에 get요청을 받아 'API 루트에오 '라고 뜨게찌이
헤헿 잘된다.