2. Json schema validator: Zod

REST API로 json을 받아 유효성 검사하는 필수 패키지.

설치

Zod는 runtime dependency로 사용하므로 --save-dev가 아닌 바로 install

pnpm add zod

 

사용

import { z } from 'zod';
const productJson = {
  name: 'jeans',
  price: 100,
};

const productSchema = z.object({
  name: z.string(),
  price: z.number().positive(), // 양수 음수도 구별 가능
});

//type Product = z.infer<typeof productSchema>;

const Test1 = () => {
  const validateProduct = productSchema.safeParse(productJson);
  console.log('validateProduct', validateProduct);

  if (validateProduct.success === false) {
    console.error(validateProduct.error.message);
    return;
  }

  return <div>Test1</div>;
};

export default Test1;

 

1. infer

위 코드는 예시를 위해 fetch를 통해 json을 가지고오지 않고 하드코딩했다.

만약 fetch를 통해 가져온다면 미리 type(interface)을 지정해줘야하는데, 이러면 validation에서 한 번 더 입력해줘야하니 interface를 두 번 작업해야되는 번거로움이 생긴다. 그래서 위에처럼 

type Product = z.infer<typeof productSchema>;

 

zod로 한 번 type을 검토하고, 위 코드처럼 한 줄로 typescript에서 type을 지정해줄 수 있다.

 

2. safeParse

위 코드처럼 safeParse를 해주고 validateProduct를 출력하면

validateProduct { success: true, data: { name: 'jeans', price: 100 } }

 

success라는 키가 true / false인지 출력해준다.

 

테스트

이제 위에 하드코딩된 Json의 name을 → id 로 변경해주면

validateProduct { success: false, error: [Getter] }
ZodError: [
  {
    "code": "invalid_type",
    "expected": "string",
    "received": "undefined",
    "path": [
      "name"
    ],
    "message": "Required"
  }
]

 

validateProduct.success는 위와 같이 false가 되고

Required 필드인 name이 invalid type이라고 표시된다.