[Typescript/Express] Typescript 를 익힐 겸 백엔드 프로젝트를 해보자! (2)

벌써 10월의 둘째주라니.. 하루하루가 너무 빠르다.

 

저번 포스팅에 이어 프로젝트 구성에 대해 더 보고 넘어가려 한다.

asyncHandler 라는 것을 통해 async(req, res, next) 를 매번 작성하지 않을 수 있도록 했었다.

 

이번은 decorator 를 활용해 POST, GET, PUT, DELETE 를 구현하여 router 에 등록시켜주는 함수를 살펴보자.

사실 nest JS 프레임워크를 사용하면 되지만 괜히 해보고 싶고 궁금해서 순수 TS로 하니 귀찮아서 하게 된.. 작업..

 

Get Http 메서드를 데코레이터 패턴으로 구현하여 컨트롤러에 @Get(name) 형태로 사용 시 route 에 자동으로 등록이 되는 형태로 구현하려고 한다. 

 

먼저 route 에 등록하는 모습을 보자

import { Request, Response } from 'express';
const route = express.Route();

route.get('url', (req: Request, res: Response, next) => { return res.json({ result: 'rrrrr' }) });

express + typescript 를 기본적인 방법으로 사용했을 때 대략 이런 형식으로 라우트에 등록을 하는 모습인데, route를 하나씩 쪼개보면

route 라는 Object 에 { method: 'get', path: 'url', methodName: () = > {} } 이 형식으로 볼 수 있다.

이 모습을 잠시 기억하자!

 

reflect-metadata 라는 패키지와 MethodDecorator 패턴을 이용해 구현한다.

export const Get = (path: string) MethodDecorator => {
  return (
  	target: Object,
    propertyKey: string | symbol,
  ) => {
  // 최초의 경로등록일 경우 라우트 메타데이터에 정의되지 않을 수 있는 가능성으로 인한 처리.
    if(!Reflect.hasMetadata('routes', target.constructor()) {
      Reflect.defineMetadata('routes', [], target.constructor);
	}
    
    const routes = Reflect.getMetadata('routes', target.constructor) as Array<IRoute>
    // 지금까지 선언하여 저장한 라우트 정보를 가져와 새롭게 등록될 라우트를 추가하여 재설정한다.
    routes.push({
      requestMethod: 'get',
      path,
      methodName,
    )
  }
}

export IRoute {
  methodName: string | symbol,
  path: string,
  requestMethod: 'get' | 'post' | 'delete' | 'put' | 'patch'
}

 

export default class GoodsController {
  @Get('/')
  public async getList(req: Request, res: Response) {
    const { pageNo = 1, pageSize = 10, name } = req.query;
    return res.json();
  }
}

 

이렇게 데코레이터 패턴을 이용해 route.get() 으로 하던 내용을 controller 클래스에서 자동으로 등록하여 데코레이터 사용을 통해 route 등록을 할 수 있게했다.

 

https://github.com/sys970717/study_node_backend/blob/feature/test/jest/src/server/config/decorators/Get.ts

GitHub - sys970717/study_node_backend: study_node_backend

작성한 내용은 모두 개인 깃헙 플젝에서 사용하고 있고, 추가적인 Controller 도 데코레이터 패턴으로 구현해뒀으니 참고가 될 수 있기를 바란다.

 

그나저나 언제 이거 다 하지..  요즘 게임하는 게 너무 재밌는걸...