<div id="readability-page-1" class="page"><div id="entry-view">
        
        <main>
          <div>
              <article id="mainContent">
                <div>
                  <p><a href="/m/category/BACKEND"><span>BACKEND</span></a></p><h3>[nestjs] validation error 핸들링</h3>
                </div>
                <p><cite>나를찾는아이</cite>
                  <span> 2022. 9. 16. 13:11</span>
                </p>
                
            
                <div>
                                <p data-ke-size="size16">nestjs는 class-validator와 함께 강력한 validationpipe&nbsp; 기능을 제공하고 있습니다</p>


<p data-ke-size="size16">dto를 통해서 입력된 값의 validation을 체크할수 있습니다</p>

<pre id="code_1662778968750" data-ke-language="javascript" data-ke-type="codeblock"><code>export class CreateUserDto {
  @IsNotEmpty()
  @IsString()
  username: string;
}</code></pre>

<p data-ke-size="size16">이런식으로 dto 클래스의 원하는 필드에 어노테이션을 추가하면</p>

<p data-ke-size="size16">username은 반드시</p>

<p data-ke-size="size16">1. 값은 string 타입이어야 합니다</p>
<p data-ke-size="size16">2. 값을 가지고 있어야 합니다</p>

<p data-ke-size="size16">만약 값이 입력되지 않는 경우 두개의 validation 규칙을 모두 어기게 되는것이지요</p>


<pre id="code_1661996332326" data-ke-language="typescript" data-ke-type="codeblock"><code>{
    "statusCode": 400,
    "message": [
        "username must be a string",
        "username should not be empty"
    ],
    "error": "Bad Request"
}</code></pre>

<p data-ke-size="size16">이렇게 두개의 어노테이션에 대한 에러가 모두 출력됩니다</p>

<p data-ke-size="size16">그런데 흔히볼수 있는 입력폼을 가진 UI 에서는 하나의 입력필드에 에러가 있는 경우 2개이상의 에러를 한번에 보여주지는 않습니다</p>

<p data-ke-size="size16">그런경우 UI단에서 에러가 여러개 있는경우 첫번째 에러메시지만 보여주는 방법을 선택할수도 있고</p>

<p data-ke-size="size16">서버에서 의도적으로 하나의 에러만 리턴할수 있습니다</p>

<p data-ke-size="size16">그럴때는 validationpipe의 stopAtFirstError 옵션을 true로 전달하세요</p>

<pre id="code_1662778972752" data-ke-language="typescript" data-ke-type="codeblock"><code>  app.useGlobalPipes(
    new ValidationPipe({
      transform: true,
      stopAtFirstError: true,
    }),
  );</code></pre>


<p data-ke-size="size16">그러면 이렇게 하나의 필드에 여러개의 어노테이션이 설정되어있는경우 에러가 먼저 발견되는경우 해당 에러만 표시하고 바로 넘어갑니다</p>

<p data-ke-size="size16">그래서 이러한 결과를 만날수 있습니다</p>
<pre id="code_1662779241646" data-ke-language="typescript" data-ke-type="codeblock"><code>{
    "statusCode": 400,
    "message": [
        "username must be a string"
    ],
    "error": "Bad Request"
}</code></pre>


<p data-ke-size="size16">어노테이션은 가장 아래에 있는 어노테이션 부터 차례대로 실행이 됩니다</p>

<p data-ke-size="size16">그래서 가장 아래에 있는&nbsp;</p>

<p data-ke-size="size16">@IsString의 결과값이 보여지게 되었습니다</p>

            
            
                </div>
            

                
              </article>
              
                
              
              
              
              
              
                
              
            </div>
        </main>
        
      </div></div>

나를 찾는 아이

Kyoung min, Kim

nestjs는 class-validator와 함께 강력한 validationpipe  기능을 제공하고 있습니다
 
 
dto를 통해서 입력된 값의 validation을 체크할수 있습니다
 
export class CreateUserDto {
  @IsNotEmpty()
  @IsString()
  username: string;
}
 
이런식으로 dto 클래스의 원하는 필드에 어노테이션을 추가하면
 
username은 반드시
 
1. 값은 string 타입이어야 합니다
2. 값을 가지고 있어야 합니다
 
만약 값이 입력되지 않는 경우 두개의 validation 규칙을 모두 어기게 되는것이지요
 
 
{
    "statusCode": 400,
    "message": [
        "username must be a string",
        "username should not be empty"
    ],
    "error": "Bad Request"
}
 
이렇게 두개의 어노테이션에 대한 에러가 모두 출력됩니다
 
그런데 흔히볼수 있는 입력폼을 가진 UI 에서는 하나의 입력필드에 에러가 있는 경우 2개이상의 에러를 한번에 보여주지는 않습니다
 
그런경우 UI단에서 에러가 여러개 있는경우 첫번째 에러메시지만 보여주는 방법을 선택할수도 있고
 
서버에서 의도적으로 하나의 에러만 리턴할수 있습니다
 
그럴때는 validationpipe의 stopAtFirstError 옵션을 true로 전달하세요
 
  app.useGlobalPipes(
    new ValidationPipe({
      transform: true,
      stopAtFirstError: true,
    }),
  );
 
 
그러면 이렇게 하나의 필드에 여러개의 어노테이션이 설정되어있는경우 에러가 먼저 발견되는경우 해당 에러만 표시하고 바로 넘어갑니다
 
그래서 이러한 결과를 만날수 있습니다
{
    "statusCode": 400,
    "message": [
        "username must be a string"
    ],
    "error": "Bad Request"
}
 
 
어노테이션은 가장 아래에 있는 어노테이션 부터 차례대로 실행이 됩니다
 
그래서 가장 아래에 있는 
 
@IsString의 결과값이 보여지게 되었습니다

[nestjs] validation error 핸들링

댓글