📖 custom pipe에서 Nan이 받아지는 문제

분야	작성자	작성일
BE	김민수	24년 11월 14일

custom pipe에서 Nan이 받아지는 문제

어떤 문제인가요?

@Query('latestChatId', NumberOrUndefinedPipe) latestChatId?: number,

위와 같이 숫자와 undefined만 받기 위해 커스텀 pipe를 만들었다.

@Injectable()
export class NumberOrUndefinedPipe implements PipeTransform {
  transform(value: string): number | undefined {
    if (value === undefined) {
      return value;
    }
    const number = Number(value);
    if (isNaN(number)) {
      throw new BadRequestException('Value should be a number or undefined');
    }
    return number;
  }
}

pipe코드에서 number와 undefined가 아니면 예외가 발생하도록 했지만 undefined일 때 에러가 발생하게 되었다.

해당 문제가 왜 발생했나요?

@Query('latestChatId', NumberOrUndefinedPipe) latestChatId?: number,

pipe를 설정한 변수의 타입이 number일 때 undefined가 Nan으로 전달되는 것이 문제였다. Nan ≠ undefined이기 때문에 첫 번째 if 문은 통과하게 된다.

이때 문자열의 경우도 Nan이 되기 때문에 undefined와 문자열을 구분할 수 없는 상황이다.

app.useGlobalPipes(new ValidationPipe({ transform: true }));

왜 이렇게 바뀌는지 조사해본 결과 글로벌 ValidationPipe에 transform을 true로 하면 타입에 맞게 자동으로 변경하는 작업이 진행된다.(단 클래스일 경우 내부 값의 타입을 바꾸지 않음) 따라서 transform을 false로 설정하면 되지만 다른 코드에 영향을 미치기 때문에 다른 선택지를 찾아야 했다.

custom pipe에서 Nan이 받아지는 문제

문제를 어떻게 해결했나요?

쿼리에 들어가는 값들을 클래스를 묶고나서 class-tranform이 제공하는 것 중 하나인 @IsOptional을 통해서 undefined도 받을 수 있도록했다.

export class ChatScrollRequest {
  @IsString()
  readonly stockId: string;

  @IsOptional()
  @IsNumber()
  readonly latestChatId?: number;

  @IsOptional()
  @IsNumber()
  readonly pageSize?: number;
}