웹 애플리케이션을 개발할 때, 폼 유효성 검증은 매우 중요한 부분입니다. 폼 유효성 검증을 통해 사용자가 입력한 데이터의 유효성을 확인하고 에러를 처리할 수 있습니다. 이번 글에서는 NestJS와 자바스크립트를 사용하여 웹 애플리케이션의 폼 유효성 검증 방법에 대해 알아보겠습니다.
1. 폼 유효성 검증 라이브러리 설치
먼저, 폼 유효성 검증을 위해 필요한 라이브러리를 설치해야 합니다. NestJS에서는 class-validator라는 라이브러리를 사용할 수 있습니다. 이 라이브러리를 사용하면 데코레이터를 사용하여 간단하게 폼 유효성 검증 규칙을 정의할 수 있습니다.
npm install class-validator
2. DTO 클래스 생성
다음으로, 폼 데이터를 전달받을 DTO(Data Transfer Object) 클래스를 생성해야 합니다. DTO 클래스는 사용자가 입력한 데이터를 담을 속성과 함께 검증 규칙을 선언합니다. 예를 들어, 이메일 주소와 패스워드를 입력받는 폼이 있다면, 다음과 같이 DTO 클래스를 작성할 수 있습니다.
import { IsEmail, Length } from 'class-validator';
export class LoginFormDTO {
@IsEmail()
email: string;
@Length(8, 20)
password: string;
}
3. 유효성 검사 실행
폼 데이터를 전달받은 후에는 유효성 검사를 실행해야 합니다. NestJS에서는 ValidationPipe를 사용하여 폼 데이터의 유효성을 검사할 수 있습니다. ValidationPipe를 생성하기 위해 다음과 같이 설정 파일에 추가합니다.
import { ValidationPipe } from '@nestjs/common';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.useGlobalPipes(new ValidationPipe());
// ...
await app.listen(3000);
}
bootstrap();
이제 @Body() 데코레이터를 사용하여 폼 데이터를 컨트롤러에 전달할 수 있습니다.
@Post('/login')
async login(@Body() loginForm: LoginFormDTO) {
// 유효성 검증을 통과하지 못한 경우, 에러를 처리할 수 있습니다.
if (loginForm instanceof ValidationError) {
// 에러 처리 로직
}
// ...
}
마무리
이렇게 자바스크립트 기반 NestJS 웹 애플리케이션에서 폼 유효성 검증을 적용하는 방법을 알아보았습니다. class-validator를 사용하여 검증 규칙을 선언하고, ValidationPipe를 사용하여 유효성 검사를 실행할 수 있습니다. 폼 유효성 검증은 사용자 입력 데이터의 신뢰성과 보안을 강화하는 데 중요한 역할을 합니다.