Express.js] 라우터 만들기

https://expressjs.com/

Express - Node.js web application framework

 

익스프레스 공식홈페이지에서 api 설명서를 보자

현재 버전은 4.18.2

 

app.use() 항목을 보면

callback 함수 하나는 필수, path와 추가적인 콜백함수들을 선택적으로 더 입력할 수있다.

 

여기서 path를 지정해주는 것이 바로 라우터 지정이다.

브라우저에서 어떤 url로 요청을 하느냐에 따라 

다른 미들웨어를 추가할 수 있다.

 

const express = require("express");

const app = express();

app.use("/", (req, res, next) => {
  console.log("In another middleware!");
  res.send("<h1>Hello from Express!</h1>");
});

app.listen(3000);

 

모든 경로의 요청에 대해

콘솔에 메세지를 출력하고, html 응답을 보내는 미들웨어다.

 

const express = require("express");

const app = express();

//add-product 추가
app.use("/add-product", (req, res, next) => {
  console.log("In add-product middleware!");
  res.send('<h1>The "Add Product" Page</h1>');
});

app.use("/", (req, res, next) => {
  console.log("In another middleware!");
  res.send("<h1>Hello from Express!</h1>");
});

app.listen(3000);

 

/add-product로 접근할 경우의 라우터를 추가했다.

/ 미들웨어보다 위쪽에 /add-product 미들웨어를 추가하는 이유는

요청은 위에서부터 아래로 내려가고

next를 호출하지 않으면 다음 미들웨어로 넘어가지 않기 때문이다.

여기서는 next를 호출하지 않는다.

왜냐면 하나 이상의 응답을 보내려 하면 오류가 발생하기 때문이다.

 

근데 이상한 점

콘솔에 'In another middleware!'도 출력된다는 점이다.

그렇다면 / 미들웨어에도 진입을 했다는 말인데....

 

모든 요청에 응답하는 라우터를 만들고 싶다면

/ 미들웨어를 위에 두고

next()를 사용한다. (응답은 하지 않는다)

const express = require("express");

const app = express();

//추가된 부분
app.use("/",  (req, res, next) => {
  console.log("This always runs!");
  next();
});

app.use("/add-product", (req, res, next) => {
  console.log("In add-product middleware!");
  res.send('<h1>The "Add Product" Page</h1>');
});

app.use("/", (req, res, next) => {
  console.log("In another middleware!");
  res.send("<h1>Hello from Express!</h1>");
});

app.listen(3000);