Middleware

미들웨어는 req와 최종 res 사이에 존재하는 중간 단계로 로그 기록, 보안 절차 등의 역할을 수행한다. 

express와 관련된 middleware를 다뤄서 여기에 작성했지만 사실 일반 명사이다.

 

mongoose에도 미들웨어가 있고 django에도 미들웨어가 있고 어디에서나 미들웨어를 찾아볼 수 있다.

 

 

간단하게 미들웨어를 만들어보자

import express from "express";
const app = express();

const PORT = 4000;

const handleListening = () =>
  console.log(`Listening on: http://localhost:${PORT}`);

const handleHome = (req, res) => res.send("home");
const handleProfile = (req, res) => res.send("profile");
const between = (req, res, next) => {
  console.log("between");
  next();
};

app.get("/", between, handleHome);
app.get("/profile", between, handleProfile);
app.listen(PORT, handleListening);

between 함수는 middleware 역할을 하는 함수로, next 인자가 하나 더 있어서 다음 함수에게 역할을 전달하는 것 빼고는 일반 함수와 다를 바가 없다.

 

특정 경로에서만 미들웨어를 사용하고 싶다면 위와 같은 방법을 사용하지만 모든 경로에서 미들웨어를 적용하고 싶다면 use 메소드를 사용하여 다음과 같이 활용한다.

app.use(between);
app.get("/", handleHome);
app.get("/profile", handleProfile);
app.listen(PORT, handleListening);

주의할 점은 app.use의 위치인데 만약 app.get 이후에 app.use가 존재하면 app.use 앞의 routes를 거친 후에야 미들웨어가 실행될 것이다. 코드는 작성된 순서대로 실행된다는 것을 알아두자

 

* 미들웨어는 routes 이전에 줄 것!

=> 코드가 작성된 순서대로 실행되기 때문!

 

또한, 미들웨어도 작성된 순서대로 실행되기 때문에 순서가 중요하다. 대표적으로 passport의 세션을 사용하기 위해서는 express-session을 거쳐야 한다.

 

---

 

실제 기능을 하는 미들웨어를 설치해보자

 

1. morgan

http 상태 코드, 접속 하는데 걸린 시간, 명령어 등 log 자료들을 표시해줌

 

https://www.npmjs.com/package/morgan

morgan

npm i morgan // 설치후 package.json의 dependencies에서 확인
import morgan from morgan
app.use(morgan("dev"))

morgan의 인자로 combined, tiny, dev 등이 존재한다.

원하는 것을 사용하자.

 

2. helmet

https://www.npmjs.com/package/helmet

helmet

npm i helmet
import helmet from "helmet"
app.use(helmet())

 

3. cookie-parser

https://www.npmjs.com/package/cookie-parser

cookie-parser

npm i cookie-parser
import cookiePaser from "cookie-parser"
app.use(cookiePaser())

4. body-parser

express 4.16.0부터 body-paser가 내장되었으므로 사용할 필요없다.

 

https://www.npmjs.com/package/body-parser

body-parser

npm i body-parser
import bodyParser from "body-parser"
app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json()) //json을 bodyparser가 이해했으면 함

// 아래로 대체
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

5. express-session

메모리 세션을 활성화합니다.

npm i express-session
import session from "express-session";
app.use(session());

// 일반적으로 아래 옵션을 사용함

app.use(
  session({
    resave: false, //세션 객체에 수정 사항이 없어도 저장합니까?
    saveUninitialized: false, //처음 빈 세션 객체를 저장합니까?
    secret: "secret code", // 보통 cookieParser의 인자와 같은 값을 줌
    cookie: {
      httpOnly: true,
      secure: false
    }
  })
);

express-session을 통해 세션 사용하기

 

 

6. connect-flash

일회성 메세지를 표시해주는 미들웨어입니다.

npm i connect-flash
import flash from "connect-flash";
app.use(flash());

 

7. static

express-generator를 사용하면 app.js에 기본으로 세팅되어 있다. static은 express에 내장된 미들웨어다. 아래 블로그가 잘 설명해두었다.

 

Node - Express 미들웨어 static

app.use(express.static(path.join(__dirname, "public")));