Intro To MiddleWare

 

 

🌱 MIDDLEWARE

 

express에서 middleware란 무엇을 뜻할까?

 

express의 app에 무언가 request가 들어오면 express는 그 req의 정보를 가지고 일련의 과정을 수행한 후 res로 결과를 담아 내보내게 된다. Express에서는 이것을 request / response lifecycle이라고 부른다. 처음 req가 들어오고 res가 나갈 때까지 중간에서 일어나는 과정들동안 실행되는 일련의 function들, 그것을 middleware라고 부른다. Middleware는 단순한 function들의 집합이고, middleware가 수행되는 동안 middleware의 function들은 req와 res object data에 접근하고 수정할 수 있게 된다.

 

Req를 받아 Res를 내보내는 일련의 Middleware의 수행 과정에서, Middleware은 당연하게도 res에 정보를 담아 res.render() 혹은 res.send()하여 HTTP req를 끝낼 수도 있고 middleware 안에서 next()를 호출하여 다른 middleware을 수행하게 할 수도 있다.

 

 

 

 

 

 

 

🌱 MORGAN

morgan

 

모듈을 하나 가져와서 MIDDLEWARE에 대한 이해를 해보도록 하자. morgan은 HTTP request logger이다. 사용자가 HTTP req를 보낸 것에 대한 정보를 가져와서 로그로 찍어주는 역할을 한다. npm i express morgan을 한 뒤 index.js에 아래 코드를 작성한다.

 

const express = require("express");
const app = express();
const morgan = require("morgan");

app.use(morgan("tiny"));

app.get("/", (req, res) => {
  console.log(`REQUEST DATE: ${req.requestTime}`);
  res.send("HOME PAGE!");
});

app.listen(3000, () => {
  console.log("App is running on localhost:3000");
});

 

가장 먼저 'app.use' 줄의 코드를 보자. app.use는 사용자로부터 들어온 every single req에 대하여 call back 함수를 실행하겠다는 의미이다. docs를 참고하여 우리는 'tiny' 옵션으로 morgan middleware을 사용할 것이다.

 

localhost:3000 주소로 들어가보면 콘솔에 우리가 보낸 "/" get req에 관한 간단한 정보가 쓰여있음을 알 수 있다. 유저의 req가 들어가고 미들웨어가 시작되는 과정을 쭉 나열해보겠다.

 

1. "/"라는 request가 들어간다.

2. app.use(morgan("tiny"))가 호출되고

3. app.get("/")가 호출되고

4. res.send()로 정보가 나가는 것이다.

 

req가 들어오고 유저가 "HOME PAGE!"라는 res.send의 결과물을 만날 때까지 app.use, app.get이라는 두 개의 미들웨어를 거쳤다.

 

 

 

 

 

 

 

 

🌱 next()

 

미들웨어 설정에 필수적으로 있어야 할 next function이다. 다음 코드를 보자.

app.use((req, res, next) => {
  console.log("THIS IS MY FIRST MIDDLEWARE!!!");
  next();
});
app.use((req, res, next) => {
  console.log("THIS IS MY SECOND MIDDLEWARE!!!");
  next();
});
app.use((req, res, next) => {
  console.log("THIS IS MY THIRD MIDDLEWARE!!!");
  next();
});

app.use는 앞서 설명했듯 유저의 모든 request에 관해 콜백함수를 실행시키는 method이다. app.use()의 콜백에 3번째 arg인 "next"가 추가됐다.

 

middleware은 req가 들어오고 res가 나가는 lifecycle동안 실행되는 함수의 집합이라고 설명했다. 위의 코드에는 3개의 함수가 있다. 각각 first, second, third middleware라고 콘솔에 찍어주는 함수들이다. 위 코드가 담긴 javascript를 실행한 뒤 아무 Req나 보내면 우리의 콘솔에 console.log() 안에 있는 각각의 string이 찍히게 된다. "THIS IS MY THIRD MIDDLEWARE!!" 후에 next()가 불리면 최종적으로 res가 도착하게 되는 것이다.

 

 

 

 

 

 

 

 

🌱 Accessing for req by MIDDLEWARE

 

다음의 자바스크립트 코드를 보자.

app.use((req,res,next)=>{
	// 이 안에서 req, res에 대한 자유로운 설정 및 접근 가능
    req.name = "buchu";
    req.method = "POST";
    next();
 }

app.js에 위와 같은 코들르 추가했다고 가정하자. req에서 어떤 요청을 보냈든(get, post, put, delete) 위 미들웨어 코드에서 req.method="POST"로 바꿔버렸으므로 req method는 모두 post로 고정된다.

 

미들웨어 function 안에서는 req, res에 대한 자유로운 접근이 가능하기 때문에 위험하다.. 그래서 조심히 잘 사용해야한다.