zod 라이브러리 알아보기

zod란 무엇일까?

먼저 공식문서에 보면 이렇게 나와있다.

TypeScript-first schema validation with static type inference

즉 정적 유형 추론을 통한 타입스크립트 스키마 선언 및 유효성 검사 라이브러리 라고 보면 된다.

설치

npm install zod
yarn add zod

zod 불러오기

import {z} from "zod";

설치한 zod 패키지에서 z 로 불러올 수 있고, 불러오면 zod의 기능을 모두 활용할 수 있다.

예시

import { z } from "zod";

// 스키마 정의
const User = z.object({
  username: z.string(),
  age: z.number(),
  email: z.string(),
});

// 유효성 검증
User.parse({
  username: "Ludwig",
  age: 28,
  email: "user@naver.com",
});

// 타입 추론
type User = z.infer<typeof User>;

스키마(schema)란?
데이터 베이스나 데이터 구조와 관련된 용어로 데이터의 형태와 구조를 뜻한다.

사용해보기

간단한 회원가입 기능을 만들어보면서 사용해본 예시 코드이다.

// auth.ts
import { z } from "zod";

const passwordRegex =
  /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

const phoneRegex = /^010\d{8}$/;

export const registerSchema = z.object({
  email: z.string().email({ message: "이메일 형식에 맞게 입력해주세요" }),
  phone: z
    .string()
    .min(11, "연락처는 11자리여야 합니다")
    .max(11, "연락처는 11자리여야 합니다")
    .refine(
      (value) => phoneRegex.test(value),
      "010으로 시작하는 11자리 숫자를 입력해주세요"
    ),
  username: z
    .string()
    .min(2, { message: "2자 이상 입력해주세요" })
    .max(20, { message: "20자 이하로 입력해주세요" }),
  role: z.string().min(2, { message: "역할을 선택해주세요" }),
  password: z
    .string()
    .min(6, "최소 6자 이상 입력해주세요")
    .max(20, "20자 이하로 입력해주세요")
    .refine(
      (value) => passwordRegex.test(value),
      "비밀번호는 최소 6자 이상 영문, 숫자, 특수문자를 포함해주세요"
    ),
  confirmPassword: z
    .string()
    .min(6, "최소 6자 이상 입력해주세요")
    .max(20, "20자 이하로 입력해주세요")
    .refine(
      (value) => passwordRegex.test(value),
      "비밀번호는 최소 6자 이상 영문, 숫자, 특수문자를 포함해주세요"
    ),
});

hook-form을 함께 사용하기 때문에 이메일, 전화번호, 유저이름, 역할, 비밀번호 등의 타입과 제한사항에 대해 설정해주었다.

// page.tsx
type RegisterInput = z.infer<typeof registerSchema>;

const page = () => {
  const form = useForm<RegisterInput>({
    resolver: zodResolver(registerSchema),
    defaultValues: {
      email: "",
      phone: "",
      username: "",
      role: "",
      password: "",
      confirmPassword: "",
    },
  });
// ...

처음엔 많이 생소했지만 잘 활용하면 타입스크립트를 사용하면서 스키마 활용을 극대화하고 불필요한 타입 작성을 최소화 할 수 있어 개발 생산성을 향상시키기 좋을 것 같다.