[Nest.js] Interceptor로 응답 포맷 설정하기

일관된 형식의 HTTP 응답을 작성해야 하는 이유

HTTP 응답의 형태가 일관적이면 클라이언트에서 데이터를 처리하기가 훨씬 수월합니다. 상태 코드 또는 응답 메세지등에 따라서 공통 로직을 작성할 수 있습니다.

 

예를 들어, 데이터가 없는 경우를 생각해봅시다. 데이터가 없는 경우 null, undefined, 빈 배열등으로 표현할 수 있지만, 일관되게 { data: [] }와 같은 형태로 전달한다면 프론트엔드에서 데이터가 빈 경우, "데이터 없음"과 같은 처리를 할 수 있습니다.

Interceptor란?

Interceptor는 Nest.js에서 HTTP 요청 및 응답의 처리 흐름에 개입하여 작업을 수행하는 클래스입니다. 주로 로깅, 데이터 변환, 예외 처리, 헤더 추가 등과 같은 작업에 사용됩니다. Nestjs에서 제공하는 useGlobalInterceptor를 사용하여 응답 포맷을 쉽게 설정할 수 있습니다.

response.interceptor.ts

적용할 커스텀 응답 포맷을 작성합니다.

import {
    Injectable,
    NestInterceptor,
    ExecutionContext,
    CallHandler,
    HttpStatus
} from '@nestjs/common';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import { getStatusMessage } from '@common/helpers';
import { type StatusMessage } from '@common/interfaces';

/**
 * @summary Interceptor for common response format
 */
@Injectable()
export class CommonResponseInterceptor implements NestInterceptor {
    intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
        return next.handle().pipe(
            map((data) => {
                const statusCode: HttpStatus = context
                    .switchToHttp()
                    .getResponse().statusCode;
                const message: StatusMessage = getStatusMessage(statusCode);
                return {
                    statusCode,
                    message,
                    data
                };
            })
        );
    }
}

main.ts

앞서 작성한 커스텀 인터셉터를 적용합니다.

import { CommonResponseInterceptor } from '@common/interceptors';

async function bootstrap() {
    const app = await NestFactory.create(AppModule);
    app.useGlobalPipes(
        new ValidationPipe({
            whitelist: true,
            forbidUnknownValues: true
        })
    );
    app.useGlobalInterceptors(new CommonResponseInterceptor()); // * 인터셉터 적용!
    await app.listen(3300);
}

bootstrap();