20260210 Zod 라이브러리 공부하기

들어가며

유레카의 최종 융합 프로젝트에서 고객 분석 데이터를 시각화하여 보여주는 프로젝트를 진행하게 됐다. 이때 시각화하여 보여주는데 문제가 덜 생기게 하기 위해서는 데이터 타입의 문제를 최소화하면 좋겠다고 생각이 들었다. 그래서 찾아보다가 Zod라는 라이브러리를 발견하게 됐고 이를 공부하고 글로 남겨볼까한다.

 

Zod란?

Zod는 스키마 선언 및 유효성 검사 라이브러리이다. 서버에서 온 데이터가 내가 생각한 형태가 맞는지 프론트에서 마지막으로 보증해주는 안전벨트라고 할 수 있다.

 

Zod를 사용하는 이유

Zod가 필요한 이유는 TypeScript의 한계때문이다. TypeScript는 런타임에 아무것도 못 막는다.

TypeScript는 컴파일 타밍만 체크하기 때문에 런타임 단계에서의 타입 에러는 막을 수가 없다.

이러한 TypeScript의 한계 때문에 Zod 라이브러리를 사용한다.

Zod를 사용한 스키마

import { z } from 'zod';

export const CustomerSchema = z.object({
  id: z.number(),
  name: z.string(),
  phone: z.string(),
  status: z.enum(['ACTIVE', 'DORMANT']),
});

Zod를 사용한 코드이다. Zod의 문법은 배운 적이 없더라도 바로 이해할 수 있을 정도로 직관적이다. 

 

Zod 사용 방법

설치

npm install zod

기본 예제

import { z } from 'zod';

const UserSchema = z.object({
  name: z.string(),
  age: z.number(),
});

실제 검증

UserSchema.parse({
  name: 'Kim',
  age: 30,
});

만약 잘못된 데이터라면 에러를 발생시킨다.

TypeScript 타입 자동 생성

type User = z.infer<typeof UserSchema>;

User 타입, UserSchema 검증

UserSchema에 정의된 구조를 그대로 읽어서 TypeScript 타입 User를 자동으로 만들어준다.

 

느낀 점

Zod 라이브러리를 공부했는데 타입스크립트에 대한 이해도 같이 올라가서 좋았다. 컴파일 단계와 런타임 단계의 차이라던지, 네트워크 통신에서의 데이터 검증에 대한 이해를 늘릴 수 있었던 공부였다.

참고

https://zod.dev/

Intro | Zod

https://velog.io/@jinyoung985/TypeScript-zod-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EB%9E%80

[TypeScript] zod 라이브러리란?