> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/02./2.-json-schema-validator-zod.md).

# 2. Json schema validator : Zod

이 문서는 REST API로부터 받은 JSON 데이터의 유효성을 검사하기 위한 필수 패키지인 Zod의 사용법을 안내합니다.

***

## 설치

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

{% hint style="info" %}
Zod는 런타임 의존성입니다. 개발 의존성(devDependency)으로 설치하지 마세요.
{% endhint %}

{% code title="설치" %}

```bash
pnpm add zod
```

{% endcode %}

## 사용

{% code title="예제: Product 유효성 검사 (React 컴포넌트)" %}

```javascript
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;
```

{% endcode %}

{% stepper %}
{% step %}

### infer

위 코드는 예시를 위해 fetch를 통해 json을 가지고오지 않고 바로 하드코딩한 예입니다.

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

type Product = z.infer;

zod로 한 번 type을 검토하고, 위 코드처럼 한 줄로 TypeScript에서 type을 지정해줄 수 있습니다.
{% endstep %}

{% step %}

### safeParse

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

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

success라는 키가 true / false인지 알려줍니다.
{% endstep %}
{% endstepper %}

## 테스트

이제 위에 하드코딩된 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이라고 표시됩니다.