Express + Typescript 라우팅

이번에는 Express에서 경로에 따른 처리를 어떻게 하는지 작성하려 한다.

1. app.use([path,] callback [, callback...]) 사용

app.use 함수는 지정된 경로에 Express 애플리케이션에 미들웨어를 바인딩하는 함수이다. 미들웨어는 들어오는 요청과 응답을 처리하는 함수 또는 메서드. 즉, 요청이 최종 라우트에 도달하기 전에 미들웨어를 통과하게 된다.

매개변수로는 미들웨어가 호출되는 경로를 전달받고 미들웨어로써 작동하는 여러 콜백 함수를 제공할수 있다고 나와있다.
Express 문서

2. express.Router() 사용

실제 server.ts에 작성한 코드이고 app.use()를 사용하여 /api 경로와 /users 경로를 나눠놨다. 그리고 router라는 폴더를 생성하여 각 라우터 처리에 따른 로직을 작성하기 위해 apiRouter.ts 파일과 userRouter.ts 파일을 생성하여 코드를 작성하였다.

import express from "express";
import apiRouter from "./router/apiRouter";
import userRouter from "./router/userRouter";

const app: express.Application = express();

const hostname: string = "127.0.0.1";
const port: number = 5000;

// app.get("/", (request: express.Request, response: express.Response) => {
//   response.status(200).send('<h3 style="color: blue">some html</h3>');
// });

// router configuration
app.use("/api", apiRouter);
app.use("/users", userRouter);

app.listen(port, hostname, () => {
  console.log(`Express Server is started at http://${hostname}:${port}`);
});

apiRouter.ts 코드

import express from "express";

const apiRouter: express.Router = express.Router();

// login

apiRouter.get("/", (request: express.Request, response: express.Response) => {
  response
    .status(200)
    .send('<h3 style="color: blue">Welcome to Api Router</h3>');
});

apiRouter.get(
  "/test",
  (request: express.Request, response: express.Response) => {
    response
      .status(200)
      .send('<h3 style="color: blue">Welcome to Api Router TEST Path</h3>');
  }
);
export default apiRouter;

코드 설명
라이브러리 불러오기 및 라우터 생성

import express from "express";

const apiRouter: express.Router = express.Router();

express.Router() 함수를 사용하여 apiRouter라는 새 라우터 객체를 생성

API 경로

apiRouter 내에 두 개의 경로를 정의

apiRouter.get("/", (request: express.Request, response: express.Response) => {
  response
    .status(200)
    .send('<h3 style="color: blue">Welcome to Api Router</h3>');
});

apiRouter.get(
  "/test",
  (request: express.Request, response: express.Response) => {
    response
      .status(200)
      .send('<h3 style="color: blue">Welcome to Api Router TEST Path</h3>');
  }
);

작동 방식

• http://localhost:port/api/에 대한 요청은 apiRouter의 첫 번째 경로에 의해 처리되어 "Welcome to Api Router" 메시지를 전송
• http://localhost:port/api/test에 대한 요청은 두 번째 경로에 의해 처리되어 "Welcome to Api Router TEST Path" 메시지를 전송

이렇게라우터를 사용하면 경로를 모듈식으로 구성하여 API 경로를 다른 경로와 쉽게 분리할 수 있고 API 기능에 필요에 따라서 라우터 내에 원하는 만큼 경로를 정의할 수 있다.