데이터 전송을 위한 유효성 검사 방법 중에는
Joi, Ajv와 같은 JSON schema validator로 진행하는 방법이 있다
데이터를 JSON 구조로 만들어 쉽고 빠르게 검증할 수 있다는
장점으로 많이 채택받고 있다
그렇다면 Ajv는 쉽게 적용할 수 있고 사용함에 문제가 없는
완벽한 검증 도구일까?🤔
기본적인 동작 원리는 JSON 스키마로 만들어진 코드를
유효성 검사 기능을 수행하는 자바스크립트로 컴파일 하여
데이터를 검증하게 된다.
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' 이 아닌 경우에만 검증이 유효하게 된다.
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
스키마 작성 시 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"]}
✔ CRA에 기본으로 포함될 정도로 잘 만들어져있다
✔ 함수형 Validation과 동작원리는 동일했다
✔ 필수 입력값이 아닌 경우 조건문을 활용하자