[NestJS] 커스텀 데코레이터

nagosu·2024년 4월 9일

서론

우선 시작하기 전에 NestJS를 사용해본 많은 개발자들이 컨트롤러 내에서 데코레이터를 활용한 경험이 있거나 본 적이 있을 것이다.

예를 들어, @Post()와 같은 방식으로 데코레이터를 사용해 특정 작업을 수행하는 방식이 있다.

@Post()

이외에도 @Body(), @Query(), @Param() 과 같이 매개 변수에 특정 데코레이터를 적용하는 방법도 있다.

@Body()
@Query()
@Param()

여기에는 @Req()와 @Res() 같은 데코레이터도 포함이 되어 있는데 가능하면 이 둘의 사용을 지양하는 것이 좋다고 권장된다.

예시로, 다음과 같이 @Req()를 사용한 코드가 있다.

@ApiOperation({ summary: '내 정보 조회' })
@Get()
getUsers(@Req() req) {
	return req.user;
}

이 방식은 특정 플랫폼(Express)에 종속되어 있고 추후 변경하기도 어렵고 테스트하기도 까다롭다는 단점이 있다.

NestJS에서는 특히 JWT 토큰을 res.locals.jwt에 저장하는 경우가 많은데 이는 Express에서 미들웨어 간 변수를 공유하는 데 사용된다.

이러한 문제를 해결할 수 있는 방법이 커스텀 데코레이터이다.

커스텀 데코레이터를 통해 req.user나 res.locals.jwt와 같은 부분을 @Req(), @Res()를 사용하지 않고도 처리할 수 있으며 이를 통해 req.user의 타입이 추론이 되지 않는 문제도 해결할 수 있다.

커스텀 데코레이터 만들기

몇 가지 예제들을 통해서 커스텀 데코레이터를 만드는 방법을 보자.

import { createParamDecorator, ExecutionContext } from '@nestjs/common';

export const User = createParamDecorator(
	(data: unknown, ctx: ExecutionContext) => {
		const request = ctx.switchToHttp().getRequest();
		return request.user;
	}
)

여기서 createParamDecorator를 사용하여 커스텀 데코레이터를 사용한다.

이 함수는 익명 함수를 매개 변수로 받으며 data와 ExecutaionContext 타입의 ctx를 매개 변수로 한다.

참고로, 여기서의 ExecutionContext(실행 컨텍스트)는 Javascript에서의 실행 컨텍스트와는 개념이 다르다.

이를 통해 HTTP 요청을 가져오고, request.user를 반환하는 형태로 데코레이터가 작성되어 있다.

위와 같이 작성하면 우리는 User라는 데코레이터를 직접 만들어준 셈이다.

이렇게 정의된 User 데코레이터는 다음과 같이 사용할 수 있다.

기존의 @Req() 부분을 @User()로 변경해 사용한다.

@ApiOperation({ summary: '내 정보 조회' })
@Get()
getUsers(@Req() req) {
	return req.user;
}

---------------------------------------------------------------

@ApiOperation({ summary: '내 정보 조회' })
@Get()
getUsers(@User() user) {
	return user;
}

이 변경을 통해서 user 변수가 req.user의 값을 직접 참조할 수 있게 된다.

이렇게 커스텀 데코레이터를 활용하면 코드의 의존성을 줄이고 더욱 유연하고 테스트를 하기 쉬운 구조로 만들 수 있다.

토큰을 다루는 또 다른 예시로, 이번에는 JWT 토큰이 응답 객체에 저장되어 있다고 가정해보자.

이 상황에선 createParamDecorator를 사용해 커스텀 데코레이터를 만들어 응답 객체에서 직접 토큰을 추출할 수 있다.

import { createParamDecorator, ExecutionContext } from '@nestjs/common';

export const Token = createParamDecorator(
	(data: unknown, ctx: ExecutionContext) => {
		const response = ctx.switchToHttp().getResponse();
		return response.locals.jwt;
	}
)

위 코드를 통해 @Token() 데코레이터를 생성하게 되면, 컨트롤러 내에서 @Token() token과 같이 사용해 JWT 토큰을 손쉽게 가져올 수 있다.

이 방법은 req.user나 res.locals.jwt와 같은 방법을 사용하지 않음으로써 발생할 수 있는 문제점들을 피할 수 있는 중요한 접근 방식이다.

특히 만약에, req.user나 res.locals.jwt를 컨트롤러에서 많이 사용한다면 나중에 테스트가 필요하거나, Express에서 Fastify나 Koa와 같은 다른 플랫폼으로 전환할 때 많은 수정이 필요할 수 있다.

각각의 req.user나 res.locals.jwt가 사용된 부분을 일일이 찾아 수정해야 하는 번거로움이 발생한다.

하지만 커스텀 데코레이터를 사용함으로써 필요한 수정 사항을 훨씬 쉽게 관리할 수 있게 되며, 코드 중복도 줄일 수가 있다.

import { createParamDecorator, ExecutionContext } from '@nestjs/common';

export const Token = createParamDecorator(
	(data: unknown, ctx: ExecutionContext) => {
		const response = ctx.switchToHttp().getResponse();
		return response.locals.jwt;
	}
)