02-4. JSON schema validator: ajv

개요

그냥 우스개소리로 백엔드와 프론트엔드를 진짜 대충 캐쥬얼하게 대충 설명하자면,

backend는, db에서 데이터 가져와서 프론트에 json으로 뿌려주는 애고,

frontend는, 백엔드가 뿌려준 json 받아서 브라우저 화면에 뿌려주는 애다.

그만큼 json이 중요하단 얘기고,

그래서 백엔드에서도 프론트엔드에서도 유효성 검사를 이중으로 해줘야 한다.

 

Json schema

다음 json-schema 링크에 가면 

https://json-schema.org/implementations#validators-javascript

언어 종류별 json 유효성 검사에 대해 나오는데

javascript는 이 목록 중 아직까지는 ajv 라는 패키지가 단연 인기가 높다.

 

npmjs의 ajv : https://www.npmjs.com/package/ajv 

 

한 주동안 9천만 다운로드다. (수치가 이상하게 너무 높은데? 블랙핑크만큼 유명해?)

아무튼 가장 많이 이용하는 패키지다.

가장 편하고 약간 레거시인 느낌도 있다.

요즘에 ajv 대신 가장 많이 뜨는 패키지는 zod다. 이것도 나중에 살펴보겠다.

 

사용

1. 설치

pnpm add ajv

 

2. schema generator

여러가지 툴이 있지만 온라인에서 무료로 해주는 툴도 있다.

https://www.jsonschema.net/ 

여기에 json을 넣으면 json schema로 바꿔준다.

 

3. json schema 파일 저장

예시: user-schema.json으로 저장

{
  "type": "object",
  "properties": {
    "foo": { "type": "integer" },
    "bar": { "type": "string", "nullable": true }
  },
  "required": ["foo"],
  "additionalProperties": false
}

 

4. tsx 코드 작성

import Ajv, { JSONSchemaType } from "ajv";
import userSchema from "./user-schema.json";

interface MyData {
  foo: number;
  bar?: string;
}

const Test1 = () => {
  const ajv = new Ajv();

  const validate = ajv.compile(userSchema as JSONSchemaType<MyData>);

  const data = {
    foo: 1,
    bar: "abc",
  };

  if (validate(data)) {
    console.log("data", data);
  } else {
    console.log(validate.errors);
  }

  return (
    <div>
    </div>
  );
};

export default Test1;