[node.js] Typescript 기반 라우터 적용하는 법

서론

이전 포스팅 글에서는 index.ts 파일에서 User 테이블에 CRUD를 하는 미들웨어를 모두 구현했었다.

그러나 실제 프로젝트를 진행하는 경우 테이블의 개수가 더욱 많아지고 프로젝트 구조는 더욱 복잡해진다. 따라서 우리는 프로젝트를 진행할 때 테이블(혹은 기능)별로 파일을 분리하는 습관을 가져야 한다.

그래서 이번 포스팅 글에서는 자바스크립트와 달리 타입스크립트 환경에서는 어떻게 라우팅을 하는지 간단하게 알아보고자 한다.

시리즈 1,2 내용에서 다룬 내용을 기반으로 진행하는 내용이므로 개발환경 설정이 되지 않은 분들은 시리즈1, 시리즈2를 참고하면 좋을 것 같다.

또한 타입스크립트 기반이 아닌 Javascript + Express 기반 라우팅 사용법을 알아보고자 하는 분들은 여기를 참고하면 좋을 것 같다.

파일 구조 수정하기

기능 별로 파일을 분리하기 위해 src 디렉토리 안에 routes 디렉토리를 생성했다.

typeorm-example
├── src
│   ├── entity
│   │   └── User.ts
│   ├── migration
│   ├── routes (새로 추가된 디렉토리)
│   └── index.ts
├── node_modules
├── ormconfig.js
├── package-lock.json
├── package.json
├── README.md
├── .gitignore
└── tsconfig.json

다음으로는 이전에 구현한 User 테이블을 CRUD하는 4개의 미들웨어를 분리하기 위해 routes 디렉토리 안에 uesr.ts 라는 파일을 생성했다.

다시 src 디렉토리 구조를 살펴보면 다음과 같다.

src
 ├── entity
 │   └── User.ts
 ├── migration
 ├── routes (새로 추가된 디렉토리)
 │   └── user.ts (새로 추가된 파일)
 └── index.ts

user.ts 파일 정의하기

파일을 정의하기 전에 먼저 자바스크립트 기반에서 라우팅을 정의했을 때에는 다음과 같이 코드를 정의할 수 있었다.

const express = require('express');
const router = express.Router();

router.get('', (req, res, next) => {
    res.send("Hello world");
});

module.exports = router;

이런 식으로 익스프레스의 Routing() 메서드를 가져와서 module.exports = ... 형태로 정의했다.

타입스크립트의 경우에는 다음과 같이 라우팅을 정의한다.

import express, { Request, Response, NextFunction } from 'express';


const router = express.Router();

router.get('', async (req: Request, res: Response, next: NextFunction) => {
  res.send("Hello world");
});

export = router;

자바스크립트 코드와 거의 유사하지만 모듈을 가져오는 방법과 export하는 부분에서 약간의 차이가 있는 것을 확인할 수 있다.

이제 User Entity 파일을 가져와서 index.ts 파일에서 정의했던 CRUD 미들웨어를 해당 파일에서 다시 정의해보았다. user.ts 전체 코드는 다음과 같다.

import express, { Request, Response, NextFunction } from 'express';
import { User } from "../entity/User";

const router = express.Router();

router.get('/', async (req: Request, res: Response, next: NextFunction) => {
    const users = await User.find();
    res.send(users);
});

router.post('/', async (req: Request, res: Response, next: NextFunction) => {
   const user = new User();

   const {
        firstName,
        lastName,
        age
   } = req.body;
   
   user.firstName = firstName;
   user.lastName = lastName;
   user.age = age;

   await user.save().then((user) => {
       res.status(201).send(user);
   })
   .catch((err) => {
        res.status(400).send(err);
   });
});

router.patch('/', async (req: Request, res: Response, next: NextFunction) => {
    await User.update({
        id: 1,
    }, {
        age: 30,
    }).then((result) => {
        res.status(200).send(result);
    }).catch((err) => {
        res.status(400).send(err);
    });
});

router.delete('/', async (req: Request, res: Response, next: NextFunction) => {
    await User.delete({firstName: 'minsu'})
    .then((result) => {
        res.status(204).send(result);
    })
    .catch((err) => {
        res.send(err);
    })
});

export = router;

index.ts 파일 수정하기

index.ts 파일에서는 4개의 User 테이블에 대한 4개의 미들웨어를 정의할 필요가 없어졌으므로 다음과 같이 코드를 수정한다.

import "reflect-metadata";
import {createConnection} from "typeorm";
import userRouter from "./routes/user"; // 해당 부분 추가

import express, { Request, Response, NextFunction } from 'express';

import bodyParser from 'body-parser'; 

const app = express();

app.use(bodyParser.urlencoded({extended:true})); 
app.use(bodyParser.json());

app.use('/user', userRouter); // 해당 부분 추가


app.listen(3000, () => {
    console.log('Starting Server with 3000 port');

    createConnection().then(async connection => {
        console.log("디비 연결 성공");
    
    }).catch(error => console.log(error));

});

routes/user.ts를 가져오는데 이 때 이름을 userRouter로 지정해주었다.
나중에 프로젝트 규모가 커지게 되면 여러 라우팅 파일이 존재할 것이므로 네이밍을 적절하게 하는 것도 중요한 요소일 것 같다.

그리고 app.use('/user', userRouter); 코드를 통해 미들웨어를 추가했다.
위와 같이 미들웨어를 정의하면 localhost:3000/user 경로로 REST 요청을 보내면 된다.

이렇게 코드를 수정하면 index.ts 파일 사이즈를 줄일 수 있으며 파일을 기능별로 분할했기 때문에 유지보수 및 효율성 또한 좋아진다.

결과 확인하기

User 테이블에 1개의 데이터가 있도록 초기화를 먼저 해두었다. 그 상태에서 해당 경로로 GET요청을 보냈을 때 결과가 다음과 같이 적절하게 나온 것을 확인할 수 있다.

(delete, update, create 기능에 대한 결과는 생략하기로 했다 😅)