Ajv 필수 입력값이 아닌 경우

Jinjer·2022년 1월 5일
1
post-thumbnail

1. 프롤로그

데이터 전송을 위한 유효성 검사 방법 중에는
Joi, Ajv와 같은 JSON schema validator로 진행하는 방법이 있다

데이터를 JSON 구조로 만들어 쉽고 빠르게 검증할 수 있다는
장점으로 많이 채택받고 있다

그렇다면 Ajv는 쉽게 적용할 수 있고 사용함에 문제가 없는
완벽한 검증 도구일까?🤔

2. 유효성 검사

기본적인 동작 원리는 JSON 스키마로 만들어진 코드를
유효성 검사 기능을 수행하는 자바스크립트로 컴파일 하여
데이터를 검증하게 된다.

2-1. 스키마 정의

const email = "[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}";

export const schema = {
  type: "object",
  required: ["name", "phone", "email"],
  properties: {
    name: {
      type: "string",
      minLength: 1,
      errorMessage: {
        type: ":name:이름을 입력해 주세요",
        minLength: ":name:이름을 입력해 주세요",
      }
    },
    phone: {
      type: "string",
      minLength: 1,
      pattern: "[0-9]{2,3}-?[0-9]{3,4}-?[0-9]{4}",
      errorMessage: {
        type: ":phone:전화번호를 입력해 주세요",
        minLength: ":phone:전화번호를 입력해 주세요",
        pattern: ":phone:전화번호를 정확히 입력해 주세요",
      }
    },
    email: {
      type: "string",
      minLength: 1,
      pattern: email,
      errorMessage: {
        type: ":email:이메일을 입력해 주세요",
        minLength: ":email:이메일을 입력해 주세요",
        pattern: ":email:이메일을 정확히 입력해 주세요",
      }
    }
  }
}

🙆‍♂️ 주로 사용되는 옵션들

type: 데이터 타입
minlength: 최소 입력값
pattern: 지정된 패턴 검사
errorMessage: 오류 발생 시 텍스트 반환
not: 키워드와 다른 것만 유효함
const: 키워드의 값과 데이터가 같으면 유효함

🤷‍♀️ 예시
not: {const: 0}
입력된 데이터가 '0' 이라면 const에 명시된 키워드의 값과 동일하여 유효하나
not으로 인하여 '0' 이 아닌 경우에만 검증이 유효하게 된다.

2-2. 이벤트 실행

import Ajv from "ajv";
import AjvErrors from "ajv-errors";s
import {schema} from "./Validation.js";

const ajv = new Ajv({
  allErrors: true, //모든 규칙을 확인함
  unicodeRegExp: false, //유니코드 플래그를 사용안함.
  code: {es5: true}, // 코드 생성 옵션. es6(default)
  $data: true // 검증된 데이터의 값을 사용할 수 있다.
});

AjvErrors(ajv, {
  singleError: false, //errorMessage안에 키워드별 하나의 오류 생성 
  keepErrors: false //기본으로 적용되는 오류 사용안함.
});

const data = {
  name: "jinjer",
  phone: 101010,
  email: "jinjer@gmail.com"
};
const isValid = ajv.validate(schema, data);

if(!isValid) {
  const errorMessage = ajv.errorsText();
  alert(errorMessage.split(",")[0].split(":")[2]);	
}

$data

"이전 입력값 보다 값이 적을 경우에만 검증되야 한다" 처럼
다른 입력값을 받아서 사용하고 싶다면 $data 옵션을 사용하면 된다

const ajv = new Ajv({$data: true})

const schema = {
 properties: {
   score: {
     type: "number",
     maximum: {$data: "1/total"},
   },
   total: {type: "number"},
 },
}

const data = {
 score: 86,
 total: 100,
}

ajv.validate(schema, data) // true

3. 조건문

스키마 작성 시 if, then, else를 사용하여
조건에 따라 속성에 대한 유효성검사를 진행할 수 있다

예시

"값이 존재하는 경우에만 패턴이 검증되야 한다" 처럼
필수 입력값은 아니지만 값이 입력될 경우 조건에 따라 처리할 수 있다

type: "object",
if: {properties: {phone: {minLength: 1}}},
then: {pattern: "[0-9]{2,3}-?[0-9]{3,4}-?[0-9]{4}"},
else: {required: ["email"]}

4. 정리

✔ CRA에 기본으로 포함될 정도로 잘 만들어져있다
✔ 함수형 Validation과 동작원리는 동일했다
✔ 필수 입력값이 아닌 경우 조건문을 활용하자

profile
프론트엔드개발자

0개의 댓글