1. express, nodemon, babel, middleware

Babel에 관해서는 이전에 포스팅 한 글이 있다. 

여기서 사용하는 babel-node와 nodemon에 대한 설명이 적혀있다.

2021.09.02 - [이것 저것] - BABEL

BABEL

서버를 만들기 위해 가장 먼저 할일은 express설치이다

콘솔에 npm i express 을 입력하여 설치를 해주자

 

server.js라는 파일을만들고

import express from "express";
const PORT = 4000;
const server = express();
const handleListening = () => {
  console.log(`✔ server is listening on ${PORT} port 🚀`);
};
server.listen(PORT, handleListening);

이렇게 입력만 해주면 서버는 완성이 되었다. 너무나도 간단하지 않은가??

 

localhost:(포트번호) 를 URL에 입력해주면 접속이 가능하다

들어가면 Cannot GET / 이라는 문구가 나올텐데 

http method인 GET request를 "/" 로보냈는데 그에 대응하는 응답을 받지 못했기 때문이다.

 

내가 웹사이트에 어딘가로 갈때
브라우저는 나를 대신해서 웹사이트를 request하고 페이지를 가져다 주는 것이다. (내가 이동하는 것이 아님!!)

유저가 브라우저를 통해서 뭔가를 한다??(댓글을 쓰거나, 영상을 보거나 글을쓰거나 모두가) => request!!
localhost:3000/ -> / 를 requeset!! 한것이다.

 

그럼 그 request에 대응하는 response를 해줘야 한다.

server.get("/", (req, res) => res.send("home"));

 

이 문장을 추가해주자

누군가가 /으로 get request를 보낸다면 그에 반응하는 callback을 함수를 호출해 줄 것이다.

eventhandler를 만들면 자동적으로 event가 생기는 것 처럼 callback함수에는 순서대로 request, response, next이 세가지 매개변수가 express에 의해 자동적으로 생성된다.

각각 오브젝트로 request는 요청을 보낸 정보 response는 요청을 보내는 정보 next는 미들웨어를 사용할 때 다음 callback으로 넘기는 함수이다. 

 

줄여서 req,res 이렇게 주로 사용한다. 여기서는 메시지를 보내는 send함수를 이용해 home을 출력해보자

다시 localhost:3000에 접속을 하면 이제는 home이라고 제대로 출력된 것을 확인할 수 있다.

우리는 브라우저로부터 요청을 받아서 서버로부터 응답을 한 것을 배운 것이다.

 

앞서 말한 미들웨어란 무엇일까?? middleware는 requeset와 response사이에 있다.
말그대로 중간에 개입해서 특정 함수를 호출하거나 아니면 다음 넘기는 역할을 한다. 
여기서 중요한 점이 꼭 next()를 해주어야지 다음 response를 보낼 수 있다. next()를 안해주면 무한 로딩이 되어버린다.
모든 controler가 middleware가 될 수 있고 그 반대도 성립한다. 

import express from "express";
const PORT = 4000;
const server = express();
const protectMW = (req, res, next) => {
  const URL = req.url;
  if (URL == "/protect") {
    return res.send("forbidden");
  } else {
    console.log(URL);
    next();
  }
};
const handleListening = () => {
  console.log(`✔ server is listening on ${PORT} port 🚀`);
};

server.use(protectMW);
server.get("/", (req, res) => res.send("home"));
server.get("/protect", (req, res) => res.send("welcome protect"));
server.listen(PORT, handleListening);

/protect에 접근하면 forbidden 이라고 메시지를 보내고 연결을 끊으며 그 외에는 콘솔에 url을 출력하고 next()를 호출해 다음순서로 넘기는 미들웨어를 만들어 보았다.

 

여기서 app.get이 아닌 app.use를 적어 준 이유는 app.get을 사용하게 되면 특정 URL에 get method로 들어 온 것만 반응하게 되는데 내가 원한건 모든 URL에 응답하는 것을 원했기 때문이다. 

만약 특정 URL혹은 메서드에서 발동되는 미들웨를 쓰고싶다면 핸들러 앞에 적어주면 된다!

 

여기서 app.use는 모든 request가 다 거쳐가는 통로라고 생각하면 편하다. (app.get은 get method일때만 거쳐감)
/protect에 접근해보자 welcome protect가 나오지 않고 

forbbiden이 출력 되는 것을 확인할 수 있다. 다른 URL을 적으면 Cannot GET 이라고는 뜨지만 콘솔에 url은 잘 출력되는 것을 확인할 수 있을것이다.

 

여기서 중요한 점이 있다!!

순서가 바뀌면 미들웨어가 실행이 안된다. 

server.get("/protect", (req, res) => res.send("welcome protect"));
server.use(protectMW);

순서대로 읽어 내려오기때문에 여기서는 먼저 미들웨어가 실행이 되지않고 끝내버릴 것이다.

 

우리는 여기서 morgan이라는 middleware를 사용할 것이다.

npm i morgan

import express from "express";
import morgan from "morgan";
const PORT = 4000;
const server = express();
const logger = morgan("dev");

server.use(logger);
server.get("/", (req, res) => res.send("home"));
server.get("/protect", (req, res) => res.send("welcome protect"));
const handleListening = () => {
  console.log(`✔ server is listening on ${PORT} port 🚀`);
};
server.listen(PORT, handleListening);

이렇게 해준다면 브라우저가 request를 보내올 때 마다  

morgan은 http method , path, status code 등의 정보를 보여준다.

GET / 304 3.460 ms - -

morgan('dev')이외에도 여러 옵션이 있고 다른 옵션을 선택하면 더 많은 정보를 보여준다

많은 임무를 수행하고 미들웨어이므로 마지막에 next()를 호출 해 줄 것이다!!