2023_11_01 TIL

Node 주특기 입문 [2일차]

 

오늘은 어제 이해가 되지 않았던 부분에 대해 다시 공부해보는 시간을 가졌다.

 

 

 

 

Express.js를 이용한 웹 서버 띄우기

 

Express.js를 통해 실제로 웹 서버를 띄우고 API를 호출했을 때 정상적으로 API가 도달하고,
반환값이 정상적으로 돌아오는지 확인해봤다.

 

 

순서를 정리해보면 다음과 같다.

① npm init -y

② npm install express

③ 서버 켜주기

④ thunder client 실행

⑤ router 생성

⑥ router 보내기 / 가져오기

⑦ router 를 Express.js에 적용시키기

 

 

 

① npm init -y 

 

서버를 띄우기에 앞서 기본적인 설정들을 몇 가지 해주어야 하는데 그 중 하나가 ' npm init -y ' 이다.

터미널에 npm inin -y라고 작성해주면 된다.

npm 패키지 매니저를 통해 initialize를 해주는데 아래의 부가적인 설정들은 모두 'yes'를 해주겠다는 의미이다.

npm init 을 해주게 되면 package.json 이라는 파일이 생성되게 된다.

 

 

 

② npm install express

 

다음 순서로는 express를 설치하는 작업이 필요하다. 

터미널에 npm install express 라고 입력하면 되는데 install 대신에 i라고 입력해도 된다.

여기서 Express.js를 설치하는 이유에 대해서 알려면 Express.js가 무엇인지부터 알아야 한다.

 

Express.js는 Node.js로 서버를 빠르고 간편하게 만들 수 있게 도와주는 웹 프레임워크이다.

따라서 우리는 서버를 만들기 위해서 Express.js를 설치하고 있는 것이다.

 

Express.js를 설치하게 되면 두 가지가 생성되게 되는데 하나는 node_modules라는 폴더가 생성되고 나머지 하나는 package - lock.json 파일이 생성된다. 이 때, express가 제대로 설치되었는지 확인하려면 package.json파일의 dependencies 부분에 express라고 적혀있는지 확인하면 된다.

 

 

 

③ 서버 켜주기

 

app.js 파일에 다음과 같이 코드를 작성한 뒤 app.js를 실행시켜주게 되면 서버가 켜지면서 " 3000 포트로 서버가 열렸어요"라는 문구가 콘솔창에 뜨게 된다.

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(port, '포트로 서버가 열렸어요!');
});

 

위의 코드에 대해 간략하게 설명하자면 express 프레임워크를 require라는 메서드를 이용해 가져와 express라는 변수에 담아준다 그 후 express를 실행시킨 값을 app 이라는 변수에 담는다.

 

그 후 GET이라는 html 메서드를 이용해 작성해주게 되는데 첫 번쨰 인자로는 경로, 두 번째 인자로는 request, response를 인자로 받아 "Hello World!"를 보내주게 된다. 여기서는 res (response)를 사용했기 때문에 호출에 대한 응답으로 "Hello World!"를 보내주겠다는 의미이다.

 

마지막 코드는 port가 열리게 되면 console.log 값을 띄워주는 코드(?) 인 것 같다.

(참고로 서버를 꺼줄 때에는 터미널에 커서를 찍고 "Ctrl + C" 하면 된다.

 

 

 

④ Thunder client 실행

 

① ~ ③ 까지의 과정을 통해 (브라우저로)  실제 API가 동작하는 지에 대한 테스트까지 완료했기 때문에 브라우저가 아닌 API Client를 통해 원하는 주소에 원하는 데이터를 넣고 원하는 결과가 돌아오는지에 대한 확인을 할 것이다.

우선 실행에 앞서 API Client에 대해 간략하게 알아보자.

 

 

API Client란? 

 

개발 단계에서 우리가 작성한 API의 요청을 확인하거나 테스팅 할 때 도움을 주는 툴. API Client를 사용함으로써 개발 속도를 높이거나 치명적인 에러를 예방하는데 도움을 받을 수 있다.

 

 

API Client를 사용하는 이유?

 

기존에 했던 방식은 브라우저에 접속해 GET 메서드를 통해 하나의 API를 호출했다. 하지만 나중에는 POST, PATCH, PUT , DELETE, HEAD 등의 여러 HTTP 메서드를 통해 테스트를 해야하고 Body 정보나 cookie 정보들을 원하는 대로 설정해주어야 하는데 이를 브라우저 상에서만 하기에는 힘들기 때문이다.

 

 

Thunder Client 사용하기

 

 

Thunder Client 설치 후 New Request를 누른 후 오른 쪽 빨간 박스에 내가 지정한 서버의 주소를 적는다. 우리는 현재 GET메서드로 만든 코드만 존재하기 때문에 GET을 선택한 후 "Send" 클릭.

 

당연하게도 서버를 켜 준 상태에서 실행해야 한다. 서버를 켜주지 않은 상태에서 이와 같이 실행할 경우 "Connection was refused by the server" 라는 오류 메세지가 뜬다.

 

성공했을 때의 화면은 다음과 같다.

 

 

• Status : 현재 서버가 반환을 했을 때 상태 코드가 몇 번인지 알려줌.
• Size : 현재 전달받은 데이터의 크기.
• Time : 반환 받은 시간.
• 아래 Hello World! 부분 : 어떤 값을 반환받았는지를 나타내 줌.

 

 

⑤ router 생성

 

routing / router ?

 

Routing : 클라이언트의 요청 조건 ( 메서드, 주소 ) 등에 대해 응답하는 방식.

Router : 클라이언트의 요청을 쉽게 처리할 수 있게 도와주는 Express.js의 기본 기능 중 하나.

 

기존 HTTP 메서드를 이용해서 만들어 본 것(app.get)을 router를 통해 만들어보자.

 

일반적인 router의 구조는 아래와 같다.

router.METHOD(PATH, HANDLER);

 

routes 라는 폴더를 생성한 후 그 안에 goods.js 파일을 만든다. goods.js 파일의 코드는 다음과 같다.

const express = require("express")
const router = express.Router();

// localhost:3000/api/ GET
router.get('/', (req,res)=>{
    res.send("default URL for goods.js GET Method");
})

// localhost:3000/api/about GET
router.get('/about',(req,res)=>{
    res.send("goods.js about PATH")
});

module.exports = router;

express 프레임워크를 express라는 변수에 담아 express의 메서드인 express.Router()로 라우터를 생성한다.

 

그 후 도메인의 경로에 따라 send로 보낼 값을 보내준 형태가 된다.

('/' : 기본경로
 './' : 상대경로, 현재의 위치를 가리킴)

 

 

 

⑥ router 보내기 / 가져오기

 

기본적인 router는 다 만들어졌고, 이 router를 app.js 파일에 옮겨줘야 한다.

 

app.js 파일에서는 express 객체 안에 있는 get 메서드를 썼기 때문에 router를 설정할 필요가 없었지만 goods.js에 있는 router는 app.js에 가져다 주어야 한다.

 

const goodsRouter = require('./routes/goods.js')

 

app.js 에서 require을 통해 앞서 보낸 router를 받아올 수 있다.

 

 

 

⑦ router 를 Express.js에 적용시키기

 

기존에 설정한 app을 이용해 app.use()를 만들어서 API를 등록할 수 있다.

 

const app = express();
const goodsRouter = require('./routes/goods.js');

app.use('./api', goodsRouter);

 

"도메인 경로 뒷부분이 /api일 경우 goodsRouter로 가라" 라는 의미이다.

app.use('./api', goodsRouter); 라는 코드로 인해 우리가 다른 파일(goods.js)에서 만든 router를 app.js를 연결해줄 수 있다.

 

goodsRouter로 가면 아래와 같이 두 개의 코드와 만나게 되고, 경로의 값이 기본값이면  1번 코드가 출력되고 경로의 값이 /about 이면 2번 코드가 출력된다.

// localhost:3000/api/ GET
router.get('/', (req,res)=>{
    res.send("default URL for goods.js GET Method");
})

// localhost:3000/api/about GET
router.get('/about',(req,res)=>{
    res.send("goods.js about PATH")
});