[유튜브 클론코딩] 2.6 Express Core: Middlewares

2.6 Express Core: Middlewares

코드를 수정하고 저장하면 서버가 두 번 재시작하는 오류를 고쳐야함

우리가 코드를 수정하고 저장하면 서버가 재시작되는데, 이때 restarting 문구를 보면 restarting이 2번이나 나오고 있다.

즉, 저장하면 두 번 재시작한다. nodemon이 이러는 이유는, 내가 저장하면 일단 재시작하고 그 다음 Babel이 코드의 변화를 감지하고 서버를 다시 한 번 재시작하기 때문이다.

 

 "scripts": {

    "start": "nodemon --exec babel-node index.js --delay 2"

  },

package.json 파일에서 다음과 같은 부분을 수정한다. 서버에 delay를 추가하는 건데 저장할 때마다 2초를 기다렸다가 서버를 시작하는데, 이렇게 하면 babel이 변환을 완료할 때까지 기다려 줄 수 있는 것이다.

 

저렇게 수정하고 npm start를 다시 해보면 아까처럼 restarting이 2번 나오지 않고 한번만 restart되는 것을 볼 수 있다.

 

---

연결의 흐름

Middleware를 알아보기 전에, 우선 연결의 흐름은 이렇다.

시작되면 index파일을 실행할테고 우리의 application이 route가 존재하는지 살펴볼 것이다.

그럼 app.get("/", handleHome); → '오케이, home을 요청하는 구나.' 하고 home을 찾은 다음에 handleHome이라는 함수를 실행한다.

consthandleHome=(req,res)=> res.send('Hello from home!'); → 그럼 handleHome은 "Hello from home!"라는 응답을 전송한다.

 

MiddleWare

• 유저와 마지막 응답 사이 그 중간에 존재하는 것
• express에서 middleware란 처리가 끝날 때까지 연결되어 있는 것
• express에서 모든 함수는 middleware가 될 수 있음
• 원하는 만큼 middleware를 만들 수 있음
• middleware로 할 수 있는 예: 로그인 여부를 처리할 수도 있고 파일을 전송할 때 가로챌 수도 있음
• middleware 만드는 코드 예시

const betweenHome = () => console.log("I'm between");
app.get("/", betweenHome, handleHome);

다음과 같이 유저가 home(/)을 요청하고 "Hello from home!"로 응답하는 사이에 함수를 두는 코드를 작성해보았다.

완료하기 전까지 실행할 함수, 그리고 마지막으로 실행할 함수. 이렇게 두 개의 함수를 갖게 된 것이다.

이것을 실행하고 새로고침 하게 되면 vs code의 콘솔에서는 I'm between 이 뜨게 되는데 브라우저는 계속 로딩중이다.

 

왜 무한 로딩 상태일까?

• 권한을 주지 않았기 때문! 구글 크롬으로부터 온 요청을 계속 처리할 지에 대해 그래서 그 요청이 handleHome으로 처리될지를, 그 요청을 계속 처리할 수 있는 권한을 줘야하는 것이다.
• 그래서 next라는 key를 이용할 것이다.
• express의 모든 route와 그런 connection을 다루는 건 request, response, next를 갖고 있다. 그런데 handleHome, handleProfile 함수의 경우 그것들이 마지막 함수이기 때문에 next를 안써준 것 뿐이다. 그런데 betweenHome의 경우엔 middleware이니까 next를 사용한다.

const betweenHome = (req, res, next) => {

    console.log("Between");

    next();

}

이게 무엇을 한 것이냐면 호출을 한 것이다. 다음 middleware를 호출할 건데 그게 handleHome이 될 것이다.

그런데 이 betweenHome이라는 middleware는 "/"에만 사용했고 "/profile"에는 사용하지 않았다.

그래서 localhost:4000/profile에 접속하면 middleware는 당연히 작동하지 않는다.

 

전역 미들웨어

app.use(betweenHome);

위의 코드는 전역적으로 모든 위치에 대해서 middleware로서 동작한다.

"/"같은 route에서도 작동하고 /profile에서도 작동한다.

 

전역 미들웨어는 코드 작성 순서에 유의

app.use(betweenHome);

app.get("/", handleHome);

app.get("/profile",handleProfile);

app.listen(PORT, handleListening);

middleware 코드는 이렇게 그 밑에 있는 코드들보다 순서를 위에다가 작성하는 것이 중요하다.

코드가 실행될 때 위에서 아래 순서로 실행이 되기 때문에,

app.get("/", handleHome); 만약 이 코드가 미들웨어 코드보다 앞서 있다면 미들웨어가 실행이 안되고 이미 마지막 함수가 실행되는 거니까. 순서에 유의해야 한다.