[nestjs] restapi + prisma 03

in kr •  last year 

이전 글

소개

이 파트에서는 API 사양을 준수하도록 입력의 유효성을 검사하는 방법을 배웁니다.

클라이언트에서 올바로 구성된 데이터만 API를 통과하도록 입력 유효성 검사가 수행됩니다.

웹 애플리케이션으로 전송된 모든 데이터의 정확성을 검증하는 것이 가장 좋습니다.

이렇게 하면 형식이 잘못된 데이터와 API 남용을 방지할 수 있습니다.

또한 입력 변환을 수행하는 방법도 배웁니다.

입력 변환은 클라이언트에서 보낸 데이터를 해당 요청에 대한 경로 처리기에서 처리하기 전에 가로채서 변환할 수 있는 기술입니다.

이는 데이터를 적절한 유형으로 변환하고, 누락된 필드에 기본값을 적용하고, 입력을 삭제하는 등의 작업에 유용합니다.

입력 유효성 검사 수행

입력 유효성 검사를 수행하려면 NestJS 파이프를 사용합니다.

파이프는 경로 처리기가 처리하는 인수에서 작동합니다.

Nest는 경로 처리기 전에 파이프를 호출하고 파이프는 경로 처리기로 향하는 인수를 받습니다.

파이프는 입력 유효성 검사, 입력에 필드 추가 등과 같은 여러 작업을 수행할 수 있습니다.

파이프는 미들웨어와 유사하지만 파이프의 범위는 입력 인수 처리로 제한됩니다.

NestJS는 즉시 사용할 수 있는 몇 가지 파이프를 제공하지만 사용자 지정 파이프를 만들 수도 있습니다.

  • 유효성 검사 (validation) : 입력 데이터를 평가하고 유효한 경우 변경되지 않은 상태로 전달합니다. 그렇지 않으면 데이터가 올바르지 않을 때 예외를 throw합니다.
  • 변환 (transform) : 입력 데이터를 원하는 형식으로 변환합니다(예: 문자열에서 정수로).

NestJS 유효성 검사 파이프는 경로에 전달된 인수를 확인합니다.

인수가 유효하면 파이프는 수정 없이 인수를 경로 처리기로 전달합니다.

그러나 인수가 지정된 유효성 검사 규칙을 위반하면 파이프에서 예외가 발생합니다.

다음 두 다이어그램은 유효성 검사 파이프가 작동하는 방식을 보여줍니다.

ValidationPipe를 전역적으로 설정

입력 유효성 검사를 수행하려면 내장된 NestJS ValidationPipe를 사용합니다.

ValidationPipe는 수신되는 모든 클라이언트 페이로드에 대해 유효성 검사 규칙을 적용하는 편리한 접근 방식을 제공합니다.

여기서 유효성 검사 규칙은 class-validator 패키지의 데코레이터로 선언됩니다.

# 의존성 설치
npm install class-validator class-transformer

validation pipe 를 전역적으로 설정하려면 main.ts 파일에 다음 코드를 추가합니다.

app.useGlobalPipes(new ValidationPipe());

// src/main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
import { ValidationPipe } from '@nestjs/common';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  app.useGlobalPipes(new ValidationPipe());

  const config = new DocumentBuilder()
    .setTitle('Median')
    .setDescription('The Median API description')
    .setVersion('0.1')
    .build();
  const document = SwaggerModule.createDocument(app, config);
  SwaggerModule.setup('api', app, document);

  await app.listen(3000);
}
bootstrap();

CreateArticleDto 에 검증 룰 추가하기

  1. 제목은 비어 있거나 5자 미만일 수 없습니다.
  2. 설명의 최대 길이는 300이어야 합니다.
  3. 본문과 설명은 비워둘 수 없습니다.
  4. 제목, 설명 및 본문은 문자열 유형이어야 하고 게시됨 유형은 부울 유형이어야 합니다.

Article 생성 시, 위 기준을 충족하기 위해 아래와 같이 데코레이터를 추가합니다.

Article 등록 시 아래 기준을 충족하지 않는 경우 400 (Bad Request) 오류를 반환합니다.
( 기존 미 설정 시에는 500 (Internal Server Error) 오류를 반환 )

// src/articles/dto/create-article.dto.ts

import { ApiProperty } from '@nestjs/swagger';
import {
  IsBoolean,
  IsNotEmpty,
  IsOptional,
  IsString,
  MaxLength,
  MinLength,
} from 'class-validator';

export class CreateArticleDto {
  @IsString()
  @IsNotEmpty()
  @MinLength(5)
  @ApiProperty()
  title: string;

  @IsString()
  @IsOptional()
  @IsNotEmpty()
  @MaxLength(300)
  @ApiProperty({ required: false })
  description?: string;

  @IsString()
  @IsNotEmpty()
  @ApiProperty()
  body: string;

  @IsBoolean()
  @IsOptional()
  @ApiProperty({ required: false, default: false })
  published?: boolean = false;
}

ParseIntPipe로 동적 URL 경로 변환

입력 값을 parse 하여 반영하며, 해당 값은 swagger 에도 반영되어 노출 되도록 합니다.

@Param('id', ParseIntPipe) id: number 과 같은 형태로 사용

// src/articles/articles.controller.ts

import {
  Controller,
  Get,
  Post,
  Body,
  Patch,
  Param,
  Delete,
  NotFoundException,
  ParseIntPipe,
} from '@nestjs/common';

export class ArticlesController {
  // ...

  @Get(':id')
  @ApiOkResponse({ type: ArticleEntity })
  findOne(@Param('id', ParseIntPipe) id: number) {
    return this.articlesService.findOne(id);
  }

  @Patch(':id')
  @ApiCreatedResponse({ type: ArticleEntity })
  update(
    @Param('id', ParseIntPipe) id: number,
    @Body() updateArticleDto: UpdateArticleDto,
  ) {
    return this.articlesService.update(id, updateArticleDto);
  }

  @Delete(':id')
  @ApiOkResponse({ type: ArticleEntity })
  remove(@Param('id', ParseIntPipe) id: number) {
    return this.articlesService.remove(id);
  }
}

PART2 끝

  • ValidationPipe를 사용한 통합 검증.
  • 불필요한 속성에 대한 클라이언트 요청을 제거했습니다. (whitelist)
  • 통합된 ParseIntPipe는 문자열 경로 변수를 구문 분석하고 숫자로 변환합니다.

참조링크

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

[광고] STEEM 개발자 커뮤니티에 참여 하시면, 다양한 혜택을 받을 수 있습니다.

image.png

Upvoted! Thank you for supporting witness @jswit.