express middleware

Middleware는 익스프레스 장점중 하나이다.

 

이름처럼 미들웨어는 요청에 대한 응답 과정 중간에 껴서 어떠한 동작을 해주는 장치이다.

 

익스프레스는 요청에 따른 응답을 프론트엔드에 보내주는데, 응답을 보내기 전(혹은 후)에 미들웨어가 지정한 동작을 수행한다.

 

다음 코드를 보자.

use

import * as express from "express";
import { Cat, CatType } from "./app.model";

const app: express.Express = express();
const port = 8000;

//순서가 중요하다.만약 res.send보다 뒤에있다면 미들웨어는 실행되지 않을 것
//use는 전체관리용으로 사용하기 위함
app.use((req, res, next) => {
  console.log(req.rawHeaders[1]);
  console.log("this is middleware");
  next(); //next()를 실행시켜야 다음 라우터가 실행된다.
});

app.get("/", (req: express.Request, res: express.Response) => {
  res.send({ data: Cat });
});

app.get("/cats/blue", (req, res) => {
  res.send({ data: Cat, blue: Cat[0] });
});

app.get("/cats/som", (req, res) => {
  res.send({ data: Cat, som: Cat[1] });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

localhost:8000에 접속하면 콘솔창에 다음과 같은 메시지가 뜬다.

app.get('/',(req,res)=>{}) 가 실행되기 전에 app.use((req,res,next)=>{}) 가 먼저 실행된 것이다.

 

여기서 중요한 것은 미들웨어에서 다음 코드로 넘어가려면 next()를 통해 꼭 next를 실행시켜야 한다.

 

그렇지 않으면 미들웨어가 끝나지 않은채로 코드의 진행이 멈춰버린다.

 

이와 같은 방식으로 다음과 같이 cors 동작을 미들웨어로 실행시키기도 한다.

 

라우터에 진입하기 전에 cors부터 검사하게 된다.

const cors = require("cors");
const cookieParser = require("cookie-parser");
const express = require("express");

app.use(cookieParser());
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use(
  cors({
    origin: ["https://localhost:3000", "http://localhost:3000", "https://aneun-dongne.com", "http://aneun-dongne.com"],
    methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS", "PATCH"],
    credentials: true,
  })
);

app.get("/", (req, res) => {
  res.send("Hello World!");
});

router

동일한 라우터에서 미들웨어를 사용할수도 있다.

 

예를들면 다음 코드는 /cats/som 에 접속하면 실행되는 미들웨어를 작성한 코드이다.

 

위의 use를 사용한 방식과 크게 다르지 않으므로 설명은 생략

 

import * as express from "express";
import { Cat, CatType } from "./app.model";

const app: express.Express = express();
const port = 8000;

app.get("/cats/som", (req, res, next) => {
  console.log(req.rawHeaders[1]);
  console.log("this is som middleware");
  next(); //next()를 실행시켜야 다음 라우터가 실행된다.
});

app.get("/", (req: express.Request, res: express.Response) => {
  res.send({ data: Cat });
});

app.get("/cats/som", (req, res) => {
  res.send({ data: Cat, som: Cat[1] });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

error 미들웨어

/cats/alksdjf처럼 잘못된 라우팅에 접근했을때 404 에러를 반환하는 미들웨어이다.

import * as express from "express";
import { Cat, CatType } from "./app.model";

const app: express.Express = express();
const port = 8000;

app.get("/", (req: express.Request, res: express.Response) => {
  res.send({ data: Cat });
});

app.get("/cats/blue", (req, res) => {
  res.send({ data: Cat, blue: Cat[0] });
});

app.get("/cats/som", (req, res) => {
  res.send({ data: Cat, som: Cat[1] });
});

//에러처리 미들웨어
app.use((req, res) => {
  console.log("this is error middleware");
  res.send({ error: "404 not found error" });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});