유튜브 클로닝 #2-2 Server: 미들웨어 middleware

이현정·2022년 4월 5일

Preview

지난 시간에 배운 컨트롤러는 서버에서 클라이언트에서 받은 요청에 응답할 때 발동하는 함수를 의미했다. res, req 를 인자로 가진다.

이번 시간에 배울 미들웨어(middleware)는 클라이언트에서 요청을 받았으나 응답하기 이전에 발동하는, 즉 app.get() 과 컨트롤러 함수의 그 사이 어딘가의 기능을 하는 함수를 의미한다. req, res 외에 next 라는 인자를 가진다. 미들웨어의 역할의 관점으로 보았을 때 컨트롤러는 파이널웨어(finalware)쯤 되겠다. (가장 마지막에 응답하니까. 하지만 공식적으로 쓰이는 말인지는 모르겠다.)

미들웨어에 대해 알아보자.

강의 내용

1) 미들웨어 생성

const one = (req,res,next) => {
next();
}
const two = (req,res,next) => {
next();
}
const three = (req,res) => {
console.log("Now three is handling")
}

미들웨어들 생성.

이중 마지막으로 브라우저에게 응답하는 one, two, three 모두 미들웨어이고, 마지막에 응답하는 three 는 미들웨어 중 가장 마지막에 응답하는 파이널웨어, 즉 컨트롤러이다.

2) 미들웨어 사용: app.get() 으로 특정 url 이동시 발동하도록 하기

const one = (req,res,next) => {
next();
}
const two = (req,res,next) => {
next();
}
const three = (req,res) => {
console.log("Now three is handling")
}

app.get("/login", one, two, three );

하단의 app.get() 으로 /login 페이지로 이동시 one, two, three 가 순차적으로 발동하도록 만들어보았다.

3) 미들웨어 사용 2 : app.use() 으로 앱 내의 모든 url 에서 발동하도록 하기

const one = (req,res,next) => {
next();
}
const two = (req,res,next) => {
next();
}
const three = (req,res) => {
console.log("Now three is handling")
}

app.use(one)
app.use(two)
app.get("/login", three)

app.use() 로 쓰인 미들웨어 one, two 는 app 내의 어떤 페이지로 이동해도 발동된다.
반면 app.get() 으로 쓰인 three 는 /login 페이지로 갔을 때만 발동된다.

주의!! app.use() 는 항상 app.get() 보다 상단에 위치해야 한다. 🌟

4) 더 정교한 미들웨어 생성 도움자: Morgan 패키지

morgan

:자동으로 middleware 를 생성해주는 패키지

약 500줄에 달하는 더 정교하게 움직이는 middleware 를 morgan 패키지 설치하나로 코드 3줄이면 생성할 수 있다.
https://www.npmjs.com/package/morgan

더 자세한 사용법은 여기 참조
https://www.npmjs.com/package/morgan#examples

morgan 설치

npm i morgan

morgan 사용

import morgan from "morgan" // morgan 패키지 불러오기

const logger = morgan("dev") // morgan 으로 middleware 생성 완료

추가 공부 ？

핸들러 vs. 컨트롤러 vs. 미들웨어:

핸들러 handler: 특정 url 로 이동시 발동되는 모든 함수들.
그냥 원하는 기능을 담은 함수를 핸들러라고 지칭하는 것 같다. 다들 정확히 개념을 설명하기보다는 실무에서 쓰이며 느낌으로 아는 것 같다.
컨트롤러 controller: handler 중 res(응답)을 컨트롤 하는 함수. 즉, 브라우저에 직접 응답하는 함수.
미들 웨어 middleware: finalware 가 아닌 모든 핸들러들. 조건에 따라 res 를 발동시킬 수도 있다. next() 를 반드시 포함하여 다음 핸들러로 넘어갈 수 있게끔 한다.
파이널 웨어 finalware: 컨트롤러를 미들웨어의 관점에서 보는 용어. 모든 컨트롤러는 (가장 나중에 발동되는) 미들웨어이다. 그래서 파이널웨어라 부르는 듯. 공식적인 용어인지는 모르겠다.

요약

미들웨어는 컨트롤러 전에 오는 모든 함수들. next 를 세번째 인자로 포함.
모든 미들웨어는 핸들러이고, 모든 컨트롤러는 미들웨어이다.
app.get("url", middleware1, middleware2,....,controller ) : 특정 url 에서만 발동하는 미들웨어 만들기
app.use( middleware ): 앱 내에 어떤 url 에서도 발동하는 미들웨어 만들기.
이때 app.use() 는 반드시 app.get() 보다 앞서 적혀야한다.🌟
더 정교한 미들웨어(500줄)를 보다 손쉽게 자동으로 생성하는 패키지: morgan