빠르게 변화하는 개발 세계에서는 데이터 무결성과 신뢰성이 무엇보다 중요합니다. 강력한 데이터 검증과 사용자 데이터의 효율적인 처리는 원활한 경험과 일관되지 않은 애플리케이션 상태 사이의 차이를 만들 수 있습니다.
아래 George Fuechsel의 인용문은 이 기사의 내용을 요약합니다.
"쓰레기를 넣으면 쓰레기가 나옵니다." — 조지 푸치셀
이 기사에서는 NestJS의 데이터 유효성 검사에 대해 살펴보겠습니다. 데이터가 유효하고 올바른 형식인지 확인하기 위해 클래스 유효성 검사기와 클래스 변환기의 몇 가지 복잡한 사용 사례를 살펴보겠습니다. 그 과정에서 우리는 귀하의 기술을 다음 단계로 끌어올리기 위한 모범 사례, 몇 가지 고급 기술 및 일반적인 함정에 대해 논의할 것입니다. 제 동기는 NestJS를 사용하여 더욱 탄력적이고 오류 방지 애플리케이션을 구축할 수 있도록 준비하는 것입니다.
이 여정을 함께 진행하는 동안 더 큰 서비스(마이크로 서비스)의 일부인지 여부에 관계없이 애플리케이션 외부의 사용자 또는 클라이언트가 제출한 입력을 절대 신뢰해서는 안 된다는 점을 명심하세요.
DTO는 데이터를 캡슐화하고 이를 애플리케이션의 다른 계층으로 전송하는 데 활용할 수 있는 패턴입니다. 앱에 들어오고(요청) 나가는(응답) 데이터를 관리하는 데 유용합니다.
이미 설정한 것처럼 DTO 사용의 주요 아이디어는 데이터를 전송하는 것이므로 데이터가 생성된 후에는 변경되어서는 안 됩니다. 일반적으로 DTO는 불변으로 설계되었습니다. 즉, 일단 생성되면 해당 속성을 수정할 수 없습니다. 이에 따른 일부 이점은 다음과 같으나 이에 국한되지는 않습니다.
JavaScript에는 Java 및 C#에 record 유형이 있는 것처럼 불변 유형을 생성하기 위한 내장 유형이 없습니다. 필드를 읽기 전용으로 설정하면 비슷한 동작을 수행할 수 있습니다.
사용자 관리를 위한 기본 CRUD 작업이 포함된 미니 사용자 관리 프로젝트부터 시작하겠습니다. 전체 소스 코드를 살펴보려면 여기를 클릭하여 GitHub의 프로젝트에 액세스하세요.
NestJS CLI 설치
$ npm i -g @nestjs/cli $ nest new user-mgt
클래스 유효성 검사기와 클래스 변환기 설치
npm i --save class-validator class-transformer
사용자 모듈 생성
$ nest g resource users ? What transport layer do you use? REST API ? Would you like to generate CRUD entry points? No
빈 DTO 및 엔터티 폴더를 만듭니다. 결국 이런 구조가 되어야 합니다.
필요한 DTO를 만드는 것부터 시작해 보겠습니다. 이 튜토리얼에서는 사용자 생성 및 업데이트라는 두 가지 작업에만 중점을 둡니다. DTO 폴더에 두 개의 파일을 생성하세요
user-create.dto.ts
export class UserCreateDto {
public readonly name: string;
public readonly email: string;
public readonly password: string;
public readonly age: number;
public readonly dateOfBirth: Date;
public readonly photos: string[];
}
user-update.dto.ts
import { PartialType } from '@nestjs/mapped-types';
import { UserCreateDto } from './user-create.dto';
export class UserUpdateDto extends PartialType(UserCreateDto) {}
UserUpdateDto는 UserCreateDto를 확장하여 모든 속성을 상속하고, PartialType은 모든 필드가 선택 사항이므로 부분 업데이트가 가능하도록 보장합니다. 이렇게 하면 시간이 절약되므로 반복할 필요가 없습니다.
필드에 유효성 검사를 추가하는 방법을 자세히 살펴보겠습니다. 클래스 유효성 검사기는 이러한 규칙을 DTO에 적용할 수 있는 이미 만들어진 많은 유효성 검사 데코레이터를 제공합니다. 지금은 몇 가지를 사용하여 UserCreateDto를 검증하겠습니다. 전체 목록을 보려면 여기를 클릭하세요.
import {
IsString,
IsEmail,
IsInt,
Min,
Max,
Length,
IsDate,
IsArray,
ArrayNotEmpty,
ValidateNested,
IsUrl,
} from 'class-validator';
import { Transform, Type } from 'class-transformer';
export class UserCreateDto {
@IsString()
@Length(2, 30, { message: 'Name must be between 2 and 30 characters' })
@Transform(({ value }) => value.trim())
public readonly name: string;
@IsEmail({}, { message: 'Invalid email address' })
public readonly email: string;
@IsString()
@Length(8, 50, { message: 'Password must be between 8 and 50 characters' })
public readonly password: string;
@IsInt()
@Min(18, { message: 'Age must be at least 18' })
@Max(100, { message: 'Age must not exceed 100' })
public readonly age: number;
@IsDate({ message: 'Invalid date format' })
@Type(() => Date)
public readonly dateOfBirth: Date;
@IsArray()
@ValidateNested()
@ArrayNotEmpty({ message: 'Photos array should not be empty' })
@IsString({ each: true, message: 'Each photo URL must be a string' })
@IsUrl({}, { each: true, message: 'Each photo must be a valid URL' })
public readonly photos: string[];
}
간단한 클래스의 규모가 커지고 Class-Validator의 데코레이터로 필드에 주석을 달았습니다. 이러한 데코레이터는 필드에 유효성 검사 규칙을 적용합니다. 이 작업을 처음 사용하는 경우 데코레이터에 대해 질문이 있을 수 있습니다. 예를 들어, 그것은 무엇을 의미합니까? 우리가 사용한 기본 유효성 검사기 중 일부를 분석해 보겠습니다.
The UserCreateDto fields validator contains additional properties passed into it. These allow you to:
Unlike normal fields validating nested objects requires a bit of extra processing, class-transformer together with class-validator allows you to validate nested objects.
We did a little bit of nested validation in UserCreateDto when we validated the photos field.
@IsArray()
@IsUrl({}, { each: true, message: 'Each photo must be a valid URL' })
public readonly photos: string[];
Photos are an array of strings. To validate the nested strings, we added ValidateNested() and { each: true } to ensure that, each link is a valid URL.
Let’s update photos a some-what complex structure. create a new file in DTO folder and name it user-photo.dto.ts
import { IsString, IsInt, Min, Max, IsUrl, Length } from 'class-validator';
export class UserPhotoDto {
@IsString()
@Length(2, 100, { message: 'Name must be between 2 and 100 characters' })
public readonly name: string;
@IsInt()
@Min(1, { message: 'Size must be at least 1 byte' })
@Max(5_000_000, { message: 'Size must not exceed 5MB' })
public readonly size: number;
@IsUrl(
{ protocols: ['http', 'https'], require_protocol: true },
{ message: 'Invalid URL format' },
)
public readonly url: string;
}
Now let’s update the photos section of UserCreateDto
export class UserCreateDto {
// Other fields
@IsArray()
@ArrayNotEmpty({ message: 'Photos array should not be empty' })
@ValidateNested({ each: true })
@Type(() => UserPhotoDto)
public readonly photos: UserPhotoDto[];
}
The ValidateNested() decorator ensures that each element in the array is a valid photo object. The most important thing to be aware of when it comes to nested validation is that the nested object must be an instance of a class else ValidateNested() won’t know the target class for validation. This is where class-transformer comes in.
Class-transformer provides us with the @Type() decorator. Since Typescript doesn’t have good reflection capabilities yet, we use @Type(() => UserPhotoDto) to give an instance of the class.
We can also utilize the Type() decorator for basic data transformation in our DTO. The dateOfBirth field in UserCreateDto is transformed into a date object using @Type(() => Date).
For complex DTO fields transformation, the Tranform() decorator handles this perfectly. It allows you to access both the field value and the entire object being validated. Whether you’re converting data types, formatting strings, or applying custom logic, @Transform() gives you the control to return the exact version of the value that your application needs.
@Transform(({ value, obj }) => {
// perform additional transformation
return value;
})
Most often, some fields need to be validated based on some business rules, we can use the ValidateIf() decorator, which allows you to apply validation to a field only if some condition is true. This is very useful if a field depends on other fields like multi-step forms.
Let’s update the UserPhotoDto to include an optional description field, which should only be validated if it is provided. If the description is present, it should be a string with a length between 10 and 200 characters.
export class UserPhotoDto {
// Other fields
@ValidateIf((o) => o.description !== undefined)
@IsString({ message: 'Description must be a string' })
@Length(10, 200, {
message: 'Description must be between 10 and 200 characters',
})
public readonly description?: string;
}
Before we dive into how NestJS handles validation errors, let’s first create simple handlers in the user.controller.ts. We need a basic route to handle user creation.
import { Body, Controller, Post } from '@nestjs/common';
import { UserCreateDto } from './dto/user-create.dto';
@Controller('users')
export class UsersController {
@Post()
createUser(@Body() userCreateDto: UserCreateDto) {
// delegating the creation to a service
return {
message: 'User created successfully!',
user: userCreateDto,
};
}
}
Trying this endpoint on Postman with no payload gives us a successful response.
NestJS has a good integration with class-validator for data validation. Still, why wasn’t our request validated? To tell NestJS that we want to validate UserCreateDto we have to supply a pipe to the Body() decorator.
Pipes are flexible and powerful ways to transform and validate incoming data. Pipes are any class decorated with Injectable() and implement the PipeTransform interface. The usage of pipe we are interested is its ability to check that an incoming request meets a certain criteria or throw errors if otherwise.
The most common way to validate the UserCreateDto is to use the built-in ValidationPipe. This pipe validates rules in your DTO defined with class-validator
Now we pass a validation pipe to the Body() to validate the DTO
import { Body, Controller, Post, ValidationPipe } from '@nestjs/common';
import { UserCreateDto } from './dto/user-create.dto';
@Controller('users')
export class UsersController {
@Post()
createUser(@Body(new ValidationPipe()) userCreateDto: UserCreateDto) {
// delegating the creation to services
return {
message: 'User created successfully!',
user: userCreateDto,
};
}
}
With this small change, we get the errors below if we try to create a user with no payload.
Awesome right :)
To ensure that all requests are validated across the entire application. We have to set up a global validation pipe so that we don’t have to pass validation pipe to every Body() decorator.
Update main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ValidationPipe } from '@nestjs/common';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.useGlobalPipes(
new ValidationPipe({
whitelist: true,
transform: true,
}),
);
await app.listen(3000);
}
bootstrap();
The built-in validation pipe uses class-transformer and class-validator, we can pass validations options to be used by these underlying packages. whitelist: true automatically strips any properties that are not defined in the DTO.transform: true automatically transforms the payload into the appropriate types defined in your DTO.
ValidationPipe({
whitelist: true,
transform: true,
}),
With this, we can remove the pipe we passed to createUser endpoint and it will still be validated. Passing it to parameters helps us fine-tune the validation we need for specific endpoints.
@Post()
createUser(@Body() userCreateDto: UserCreateDto) {
// ...
}
The default validation errors format is not bad, we get to see all the errors for the validations that failed, Some frontend developers will scream at you though for mixing all the errors, I have been there?. Another reason to separate it is when you want to display errors under the fields that failed on the UI.
For nested objects, we also need to retrieve all the errors recursively for a smooth experience. We can achieve this by passing a custom exceptionFactory method to format the errors.
Update main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import {
BadRequestException,
ValidationError,
ValidationPipe,
} from '@nestjs/common';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.useGlobalPipes(
new ValidationPipe({
transform: true,
whitelist: true,
exceptionFactory: (validationErrors: ValidationError[] = []) => {
const getPrettyClassValidatorErrors = (
validationErrors: ValidationError[],
parentProperty = '',
): Array<{ property: string; errors: string[] }> => {
const errors = [];
const getValidationErrorsRecursively = (
validationErrors: ValidationError[],
parentProperty = '',
) => {
for (const error of validationErrors) {
const propertyPath = parentProperty
? `${parentProperty}.${error.property}`
: error.property;
if (error.constraints) {
errors.push({
property: propertyPath,
errors: Object.values(error.constraints),
});
}
if (error.children?.length) {
getValidationErrorsRecursively(error.children, propertyPath);
}
}
};
getValidationErrorsRecursively(validationErrors, parentProperty);
return errors;
};
const errors = getPrettyClassValidatorErrors(validationErrors);
return new BadRequestException({
message: 'validation error',
errors: errors,
});
},
}),
);
await app.listen(3000);
}
bootstrap();
This looks way better. Hopefully, you don’t go through what I went through with the front-end developers to get here ?. Let’s go through what is happening.
We passed an anonymous function to exceptionFactory. The functions accept the array of validation errors. Diving into the validationError interface.
export interface ValidationError {
target?: Record<string, any>;
property: string;
value?: any;
constraints?: {
[type: string]: string;
};
children?: ValidationError[];
contexts?: {
[type: string]: any;
};
}
For example, if we apply IsEmail() on a field and the provided value is not valid. A validation error is created. We also want to know the property where the error occurred. We need to keep in mind that, we can have nested objects for example the photos in UserCreateDto and therefore we can have a parent property let’s say, photos where the error is with the url in the UserPhotoDto.
We first declare an inner function, that takes the errors and sets the parent property to an empty string since it is the root field.
const getValidationErrorsRecursively = (
validationErrors: ValidationError[],
parentProperty = '',
) => {
};
We then loop through the errors and get the property. For nested objects, I prefer to show the fields as photos.0.url. Where 0 is the index of the invalid photo in the array.
The error messages are stored in the constraints field as it’s in the validationError interface. We retrieve these errors and store them under a specific field.
if (error.constraints) {
errors.push({
property: propertyPath,
errors: Object.values(error.constraints),
});
}
For nested objects, the children property of a validation error contains an array of validationError for the nested objects. We can easily get the errors by recursively calling our function and passing the parent property.
if (error.children?.length) {
getValidationErrorsRecursively(error.children, propertyPath);
}
While Class-validator provides a comprehensive set of built-in validators, there are times when your requirements exceed the standard validation rules or the standard validation doesn’t fit what you want to do. Custom validators are useful when you need to enforce rules that aren’t covered by the standard validators. Examples:
To create a custom validator, we have to define a new class that implements the ValidatorConstraintInterface from class-validator. This requires us to implement two methods:
Create a new folder in users module named validators. Create two files, is-valid-password.validator.ts and is-username-unique.validator.ts. It should look like this.
A valid password in our use case is very simple. it should contains
Update is-valid-password.validator.ts
import {
ValidatorConstraint,
ValidatorConstraintInterface,
ValidationArguments,
} from 'class-validator';
@ValidatorConstraint({ name: 'IsStrongPassword', async: false })
export class IsValidPasswordConstraint implements ValidatorConstraintInterface {
validate(password: string, args: ValidationArguments) {
return (
typeof password === 'string' &&
password.length > 5 &&
password.length <= 20 &&
/[A-Z]/.test(password) &&
/[a-z]/.test(password) &&
/[0–9]/.test(password) &&
/[!@#$%^&*(),.?":{}|<>]/.test(password)
);
}
defaultMessage(args: ValidationArguments) {
return 'Password must be between 6 and 20 characters long and include at least one uppercase letter, one lowercase letter, one number, and one special character';
}
}
IsValidPasswordContraint is a custom validator because it is decorated with ValidatorConstraint(), we provide our custom validation rules in the validate method. If the validate function returns false, the error message in the defaultMessage will be returned. Providing these methods implements the ValidatorContraintInterface. To use isValidPasswordContraint, update the password field in UserCreateDto. For ValidatorConstraint({ name: ‘IsStrongPassword’, async: false }), we provided the constraint name that will be used to retrieve the error and also, since all actions in the validate are synchronous, we set async to false.
import { Validate } from 'class-validator';
export class UserCreateDto {
// other fields
@Validate(IsValidPasswordConstraint)
public readonly password: string;
}
Now, if we try again with an invalid password, we get this result indicating our custom validator is working.
We can go further and create a decorator for the validator so that we can decorate the password field without using the Validate.
Update is-valid-password.validator.ts
import {
ValidatorConstraint,
ValidatorConstraintInterface,
ValidationArguments,
registerDecorator,
ValidatorOptions,
} from 'class-validator';
@ValidatorConstraint({ name: 'IsStrongPassword', async: false })
class IsValidPasswordConstraint implements ValidatorConstraintInterface {
// removing the implementation so that we focus on IsPasswordValid function
}
export function IsValidPassword(validationOptions?: ValidatorOptions) {
return function (object: NonNullable<unknown>, propertyName: string) {
registerDecorator({
target: object.constructor,
propertyName: propertyName,
options: validationOptions,
constraints: [],
validator: IsValidPasswordConstraint,
});
};
}
Creating custom decorators makes working with validators a breeze, NestJs gives us registerDecorator to create our own. we provide it with the validator which is the IsValidPasswordContraint we created. We can use it like this
export class UserCreateDto {
// other fields
@IsValidPassword()
public readonly password: string;
}
It is common to encounter scenarios where you need to validate against external systems. Let’s assume that the username in UserCreateDto is unique across the various servers.
Update is-unique-username.validator.ts
import {
ValidatorConstraint,
ValidatorConstraintInterface,
ValidationArguments,
registerDecorator,
ValidationOptions,
} from 'class-validator';
interface IsUsernameUniqueOptions {
server: string;
message?: string;
}
@ValidatorConstraint({ name: 'IsUsernameUnique', async: true })
export class IsUsernameUniqueConstraint
implements ValidatorConstraintInterface
{
async validate(username: string, args: ValidationArguments) {
const options = args.constraints[0] as IsUsernameUniqueOptions;
const server = options.server;
// server check, let assume username exist
return !(await this.checkUsernameOnServer(username, server));
}
defaultMessage(args: ValidationArguments) {
const options = args?.constraints[0] as IsUsernameUniqueOptions;
return options?.message || 'Username is already taken';
}
async checkUsernameOnServer(username: string, server: string) {
return true;
}
}
export function IsUsernameUnique( options: IsUsernameUniqueOptions,
validationOptions?: ValidationOptions,) {
return function (object: object, propertyName: string) {
registerDecorator({
target: object.constructor,
propertyName: propertyName,
options: validationOptions,
constraints: [options],
validator: IsUsernameUniqueConstraint,
});
};
}
Usage
export class UserCreateDto {
@IsString()
@Length(2, 30, { message: 'Name must be between 2 and 30 characters' })
@Transform(({ value }) => value.trim())
@IsUsernameUnique({ server: 'east-1', message: 'Name already exists' })
public readonly name: string;
// other fields
}
We created a simple interface to show the possible options we can pass to the decorator. These options are constraints that will be used by IsUsernameUniqueConstraint, we can get them through the validation arguments . const options = args.constraints[0] as IsUsernameUniqueOptions;
Logging options give us { server: ‘east-1’, message: ‘Name already exists’ }, We then called the required service and passed the server name and username to validate the uniqueness of the name.
Also, async is set to true to allow asynchronous operations inside the validate function; ValidatorConstraint({ name: ‘IsUsernameUnique’, async: true }).
It is necessary to be aware of common pitfalls to ensure robust and maintainable code.
There is so much to add like validation groups, using service containers, etc, but this article is getting way longer than I anticipated ?. As you continue developing with NestJS, I encourage you to explore more complex use cases and scenarios and share your experiences to keep the learning journey going.
Data validation is crucial in ensuring data integrity within any application and the principles covered here will serve as a strong foundation for further growth and mastery in building secure and efficient applications.
This is my very first article, and I’m eager to hear your thoughts! ? Please feel free to leave any feedback in the comments.
If you’d like to connect and stay updated on future content, you can find me on LinkedIn
Happy Coding !!!
위 내용은 NestJS에서 데이터 유효성 검사 마스터하기: 클래스 유효성 검사기와 클래스 변환기를 사용한 전체 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
