wam
w__am 개발노트
wam
  • 분류 전체보기 (165)
    • CS 지식 (10)
      • 자료구조 (0)
      • 알고리즘 (0)
      • 컴퓨터 구조 (0)
      • 운영체제 (0)
      • 네트워크 (7)
      • 데이터베이스 (0)
      • 디자인 패턴 (3)
    • Frontend (131)
      • Three.js (64)
      • NPM (1)
      • Nest.js (19)
      • React (10)
      • Apollo (7)
      • TypeScript (2)
      • JavaScript (12)
      • HTML, CSS (1)
      • Jest (3)
      • E2E (5)
      • Cypress (7)
    • Database (12)
      • TypeORM (12)
    • IT 지식 (8)
      • 클라우드 서비스 (3)
      • 네트워크 (1)
      • 데이터 포맷 (2)
      • 기타 (2)
    • IT Book (2)
    • 유용한 사이트 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 🐱 Github

인기 글

태그

  • 함수 표현식
  • 삼각함수
  • three.js 구성 요소
  • 오프-프레미스(off-premise) 방식
  • getelapsedtime()
  • mapped types
  • getdelta()
  • react 성능 최적화
  • 디자인 패턴
  • reactive variables
  • 함수의 범위
  • gridhelper
  • joi 에러
  • Interface
  • type-graphql
  • math.cos()
  • 원형적인 움직임
  • axeshelper
  • 함수 선언문
  • e.preventdefault()
  • math.sin()
  • Decorators
  • 스코프
  • isabstract
  • 함수 리터럴
  • 렌더링 성능 최적화
  • 데이터 포맷
  • API
  • 초기 환경설정
  • threejs 개발 할 때 도움을 줄 수 있는 유틸리티

최근 글

관리자

글쓰기 / 스킨편집 / 관리자페이지
hELLO · Designed By 정상우.
wam

w__am 개발노트

NestJS : DTO 데이터 전송 객체 (Data Transfer Object)
Frontend/Nest.js

NestJS : DTO 데이터 전송 객체 (Data Transfer Object)

2023. 1. 10. 15:00

DTO 장점

  • DTO는 타입이 애플리케이션이 움직일 때 도움을 준다.
  • 코드를 간결하게 만들어 준다.
  • NestJS 가 들어오는 쿼리에 대해 유효성을 검사할 수 있게 해 준다.
  • DTO 만 작성 시 유효성을 검사해주진 않는다. (유효성 검사용 파이프 만들기)

 

 

 

메인에 유효성 검사용 파이프 만들기

파이프란?

  • 코드가 지나가는 곳
  • 미들웨어 같은 것이라 생각할 수 있다.

 

파이프 적용

src/main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ValidationPipe } from '@nestjs/common/pipes';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalPipes(new ValidationPipe()); // 추가
  await app.listen(3000);
}
bootstrap();
  • useGlobalPipes() 추가 후 사용하고 싶은 파이프를 NestJS 애플리케이션에 넘겨주기
  • ValidationPipe() : 유효성 검사

 

 

설치

class의 유효성 검사하기 위해 아래 2가지 설치해 주기

$ npm i class-validator class-transformer
  1. class-validator [NPM 옵션 보기]
  2. class-transformer

 

 

CreateMovieDto를 위한 decorator 작성해 class의 유효성 검사하기

src/movies/dto/create-movie.dto.ts

import { IsString, IsNumber } from 'class-validator';

export class CreateMovieDto {
  @IsString()
  readonly title: string;

  @IsNumber()
  readonly year: number;

  @IsString({ each: true }) // [유효성 검사의 옵션 확인]
  readonly genres: string[];
}

 

유효성 검사의 옵션 확인 

유효성 검사의 옵션을 확인해보면 Each true가 있다. 모든 요소를 하나씩 검사한다.

 

 

유효성 검사의 옵션 : whitelist / 파라미터를 안전하게 사용

src/main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ValidationPipe } from '@nestjs/common/pipes';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalPipes(
    new ValidationPipe({
      whitelist: true, // 추가
    }),
  );
  await app.listen(3000);
}
bootstrap();

true로 설정하면 아무 decorator 도 없는 어떠한 property의 object를 거른다.
잘못 들어오는 값은 Validator에 도달하지 않을 것이라는 것이다.

 

 

유효성 검사의 옵션 : forbidNonWhitelisted/ 보안 한 단계 더 업그레이드

src/main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ValidationPipe } from '@nestjs/common/pipes';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalPipes(
    new ValidationPipe({
      whitelist: true,
      forbidNonWhitelisted: true,
    }),
  );
  await app.listen(3000);
}
bootstrap();

누군가가 이상한 걸 보내면, request 자체를 막아 버린다

 

 

유효성 검사의 옵션 : transform / 실제 타입으로 변환

src/main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ValidationPipe } from '@nestjs/common/pipes';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalPipes(
    new ValidationPipe({
      whitelist: true,
      forbidNonWhitelisted: true,
      transform: true, // 추가
    }),
  );
  await app.listen(3000);
}
bootstrap();

유저들이 보낸 타입 원하는 실제 타입으로 변환할 수 있다. NestJS는 타입을 받아서 넘겨줄 때 자동으로 타입도 변환해 준다.

 

class Movie의 id는 number인데 getOne 함수에서의 파라미터 id 값은 string 인 이유
 URL로 보낸 값은 뭐든지 일단 string이기 때문이다.  형변환 코드 +id로 string → number로 형변환 하였다.

 

 

ValidationPipe 옵션인 transform를 사용하면 실제 타입인 number를 사용하면 된다. 실시간으로 서버도 보호되며 NestJS를 쓸 때 TypeScript의 보안도 이용할 수 있고, 유효성 검사도 따로 하지 않아도 된다. NestJS가 모든 검사를 해준다.

 

 

만약 express.js로 작업하면 이런 것을 전혀 도와주지 않아 원하는 모든 걸 스스로 전환해야 한다.
NestJS 프레임 워크를 사용하면 원하는 타입으로 변환하는 것을 도와준다.

 

 

타입 매핑

 

mapped-types 설치

yarn add  @nestjs/mapped-types

// $ npm i @nestjs/mapped-types // yarn으로 설치하기

mapped-types는 타입을 변환시키고 사용할 수 있게 하는 패키지이다.

 

부분 타입(partial types) 적용

src/movies/dto/update-movie.dto.ts

import { PartialType } from '@nestjs/mapped-types';
import { CreateMovieDto } from './create-movie.dto';

export class UpdateMovieDto extends PartialType(CreateMovieDto) {}
  • 읽기 전용이고 필수사항 X
  • 부분 타입은 베이스 타입이 필요하다. PartialType(CreateMovieDto)

 

CreateMovieDto에 @IsOptional 적용

src/movies/dto/create-movie.dto.ts

import { IsString, IsNumber, IsOptional } from 'class-validator';

export class CreateMovieDto {
  @IsString()
  readonly title: string;

  @IsNumber()
  readonly year: number;

  @IsOptional()
  @IsString({ each: true })
  readonly genres: string[];
}
  • 장르는 필수로 하고 싶지 않아 @IsOptional() 추가

 

 

 

 

저작자표시 변경금지 (새창열림)

'Frontend > Nest.js' 카테고리의 다른 글

type-graphql의 isAbstract 옵션  (0) 2024.06.21
@InputType과 @ObjectType을 동시에 데코레이터 사용 시 주의할 점  (0) 2024.06.21
NestJS : 예외처리  (0) 2023.01.10
NestJS : 형변환  (0) 2023.01.09
NestJS : 라우터 및 데코레이터 설명  (0) 2023.01.09
    'Frontend/Nest.js' 카테고리의 다른 글
    • type-graphql의 isAbstract 옵션
    • @InputType과 @ObjectType을 동시에 데코레이터 사용 시 주의할 점
    • NestJS : 예외처리
    • NestJS : 형변환
    wam
    wam

    티스토리툴바