express - 미들웨어 작성 기초

express 공식 문서 - 미들웨어 작성

https://expressjs.com/ko/guide/writing-middleware.html

Express 앱에서 사용하기 위한 미들웨어 작성

 

라우터의 앞에 존재하여 라우터보다 앞서 지정된 역할을 수행하거나,

모든 라우터의 맨 뒤에 존재하여 어떠한 라우터에도 해당되지 않은 요청에 대응할 수도 있다.(에러처리)

 

- app.ts

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

const app: express.Express = express();

// 미들웨어
app.use((req, res, next) => {
  console.log(req.rawHeaders[1]);
  console.log("this is logging middleware");
  next();
});

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

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

app.get("/cats/som", (req, res, next) => {
  // 매개변수에 next가 있어야 미들웨어가 되며
  console.log(req.rawHeaders[1]);
  console.log("this is som middleware");
  next(); // 콜백함수에 next()가 없다면 미들웨어 다음으로 넘어가지 못한다.
});

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

// localhost/abcdefg... 와 같은 잘못된 URL을 입력하였을때를 처리하기 위한 미들웨어
app.use((req, res, next) => {
  console.log("this is error middleware");
  res.send({ error: "404 not found error" });
});

app.listen(8000, () => {
  console.log("server is on...");
});

 

- app.model.ts

데이터 모킹을 위한 파일

export type CatType = {
  id: string;
  name: string;
  age: number;
  species: string;
  isCute: boolean;
  friends: string[];
};

export const Cat: CatType[] = [
  {
    id: "fsduifh",
    name: "blue",
    age: 8,
    species: "Russian Blue",
    isCute: true,
    friends: ["asdfhj29009", "WE09tju2j"],
  },
  {
    id: "iohf2309q4hr",
    name: "som",
    age: 4,
    species: "Sphynx cat",
    isCute: true,
    friends: ["weju0fj20qj", "asdfhj29009", "weju0fj20qj"],
  },
  {
    id: "WE09tju2j",
    name: "lean",
    age: 6,
    species: "Munchkin",
    isCute: false,
    friends: [],
  },
  {
    id: "asdfhj29009",
    name: "star",
    age: 10,
    species: "Scottish Fold",
    isCute: true,
    friends: ["weju0fj20qj"],
  },
  {
    id: "weju0fj20qj",
    name: "red",
    age: 2,
    species: "Sharm",
    isCute: false,
    friends: [],
  },
];

 

1. localhost:8000

전체 미들웨어의 로그 - 접근한 플랫폼의 내용과 

미들웨어의 로그 내용

 

2. localhost:8000/cats/blue (전용 미들웨어가 없는 경우)

전체 미들웨어의 로그 - 접근한 플랫폼의 내용과 

미들웨어의 로그 내용

 

3. localhost:8000/cats/som (전용 미들웨어가 있는 경우)

전체 미들웨어의 로그 - 접근한 플랫폼의 내용과 미들웨어의 로그 내용,

'this is som middleware'라는 전용 로그 기록 확인

 

 

4. localhost:8000/asdfasdf... 와 같은 잘못된 URL을 입력하였을때를 처리하기 위한 미들웨어

 

해당 미들웨어가 없다면?

전체 미들웨어의 로그 기록은 남으나 브라우저(api 플랫폼)에서는 

Cannot Get... 이라는 HTML 문서로 응답함