Nest에서 파이프를 통해 요청 DTO 검사하기

우선 Post를 통해 요청되는 값 자체를 콘솔로 찍어보자.

값을 이렇게 보내면, 위의 부분이 Header이고 아래부분이 Body이다.

 

다음과 같은 핸들러로 요청을 출력해보니

    @Post()
    async createMessage(@Body() body: any, @Headers() headers: Record<string, string>) {
        console.log('📌 Headers:');
        for (const [key, value] of Object.entries(headers)) {
            console.log(`  ${key}: ${value}`);
        }

        console.log('📌 Body:');
        console.log(JSON.stringify(body, null, 2));
    }

 

그냥 그대로 나오는 것을 볼 수 있다.

그럼 우리는 이제 사용자의 요청에 대하여, 이 헤더와 바디를 통해서 처리를 하도록 할 것이다.

 

그럼 일단 body부터 원하는 데이터로 가져올 수 있도록 하자.

해당 데이터를 이렇게 any 타입이 아닌, 우리가 원하는 값으로 가져오기 위해 DTO를 작성한다.

 

export class CreateMessageDto {
    content: string
}

현재는 가져오는 값이 content 밖에 존재하지 않기 때문에, content 필드 하나만 가지고 있는 DTO를 생성한다.

 

    @Post()
    async createMessage(@Body() body: CreateMessageDto) {
        console.log(`This is content: ${body.content}`);
    }

그리고 body의 타입을 CreateMessageDto로 직접 지정해준 후에 재요청해보자.

 

그러면 이렇게 타입이 적절하게 지정된 것을 볼 수 있다.

 

하지만 이렇게 정상적인 값이 아니라

POST http://localhost:3000/messages
Content-Type: application/json

{
}

이렇게 본문이 비어있거나, 

POST http://localhost:3000/messages
Content-Type: application/json

{
  "content": null
}

null인 값이 있어도 

위와 같이 정상 응답을 주게 된다.

 

우리는 이렇게 잘못된 요청에 대하 BadRequest인 400 응답을 주어야 한다.

 

이렇게 자동으로 체크를 해서 응답을 해줄 수 있도록, validation pipe를 사용해보자.

 

사용자의 요청과 응답이 서버에서 위와 같은 순서로 처리가 되는데, 이 중 가장 먼저 이루어지는 데이터의 유효성 체크이다.

 

현재 CreateMessageDto는 content를 string 타입으로 받고 있다.

그렇기에 content가 string인 것을 확인하고 나서야 요청 처리를 시작해야 한다.

 

class-validator를 사용해보자.

우선 이런 타입에 대한 체크는 모든 핸들러에서 이루어지기 때문에, 전역으로 validation pipe를 추가한다.

 

main.ts에서 app에 다음 속성을 추가하자.

  app.useGlobalPipes(new ValidationPipe({
    whitelist: true,
    forbidNonWhitelisted: true
  }));

이러면 모든 request에 대하여 dto에 타입체크가 시작된다.

 

이제 dto에도 데코레이터를 추가하자.

export class CreateMessageDto {
    @IsString()
    content: string
}

이렇게 string 타입이기 때문에 @IsString() 데코레이터를 추가해준다.

 

그렇게해서 잘못된 요청을 보내보자.

그렇게 요청해보니, 잘못된 요청이라며 400에러가 나오는 것을 볼 수 있었다.

 

근데 여기서 궁금한 부분이 있다.

우리가 만든 TypeScript는 JavaScript로 변환되어 동작하게 되는데, 그럼 이 validation pipe는 어떻게 동작하는 것인가.

 

tsconfig.json을 보면 다음과 같은 부분이 있다.

 

이 설정을 통해서 데코레이터의 정보가 자바스크립트에도 포함이 되게 된다.

변환된 자바스크립트의 dto를 보면 다음과 같이 나와있다.

 

__decorate([
    (0, class_validator_1.IsString)(),
    __metadata("design:type", String)
], CreateMessageDto.prototype, "content", void 0);

데코레이터로 파라미터가 string 타입임을 알리고 있는 것이다.

 

이렇게 자바스크립트에서도 타입에 관하여 동작할 수 있도록 한다.