키모스토리

#3. zod.dev (validation) 본문

Web Devlopment/Next-Blog Project

#3. zod.dev (validation)

키모형 2025. 4. 4. 12:32
반응형

https://zod.dev/

 

GitHub - colinhacks/zod: TypeScript-first schema validation with static type inference

TypeScript-first schema validation with static type inference - colinhacks/zod

github.com

 

Zod는 타입스크립트 우선 스키마 선언 및 검증 라이브러리 입니다.

 

타입스크립트는 컴파일 시점에서 타입을 검사합니다. 런타임에 동적으로 생성되는 값과 타입스크립트의 타입 간의 불일치가 발생하여 에러가 발생할 수 있는데요, 이를 방지할 수 있는 라이브러리가 바로 Zod입니다.

 

 

사용 방법

zod는 직관적이고 간단한 API를 제공합니다.

아래 예시는 가장 기본적인 zod 라이브러리 사용법입니다.

기본 유효성 검사

import { z } from "zod";

const usernameSchema = z.string().min(4).max(20).optional();

usernameSchema.parse("username"); // => "username" (유효한 값)
usernameSchema.parse(12); // => 숫자 타입이므로 ZodError 발생

발생한 ZodError를 확인하면 다음과 같이 에러 내용을 알 수 있습니다.

Error: [
  {
    "code": "invalid_type",
    "expected": "string",
    "received": "number",
    "path": [],
    "message": "Expected string, received number"
  }
]

객체 스키마

입력에 대한 여러 필드에 대한 유효성 검사를 위해 객제 스키마를 사용할 수 있습니다.

import { z } from "zod";

const userSchema = z.object({
  username: z.string().min(4).max(20).optional(),
  email: z.string().email().nullable(),
});

userSchema.parse({
  username: 'username',
  email: 'test@example.com',
});

safeParse

parse 메서드를 사용할 때 유효성 검사가 실패하면 zod는 Error를 발생시킵니다.
그러나 경우에 따라 에러를 발생시키지 않고, 유효성 검사 결과를 반환받아 별도로 처리하고 싶을 때가 있습니다.
이때 safeParse를 사용할 수 있습니다.

import { z } from "zod";

const usernameSchema = z.string().min(4).max(20).optional();

const validResult = usernameSchema.safeParse("username"); // { success: true, data: "username" }
const invalidResult = usernameSchema.safeParse(12); // { success: false, error: ZodError }

if (invalidResult.success) {
  // 유효한 데이터 처리
  console.log(invalidResult.data);
} else {
  // 유효성 검사 실패 처리
  console.log(invalidResult.error);
}

safeParse는 유효성 검사 실패시 에러를 발생시키지 않고, 결과를 객체 형태로 반환합니다.
이 객체에는 success 속성과 data 또는 error 속성이 포함되어 있으며, success가 true이면 data에 유효한 값이 있고, false이면 error에 ZodError 객체가 있습니다.

 

 

 

사용법 참고

https://lurgi.tistory.com/85

https://xionwcfm.tistory.com/346

https://sorrel012.tistory.com/429

 

 

 

 

 

반응형

'Web Devlopment > Next-Blog Project' 카테고리의 다른 글

#6. Active Links  (0) 2025.04.05
#5. server-only  (0) 2025.04.05
#4. register (MongoDB, Jose, session, cookie)  (0) 2025.04.04
#2. useActionState  (0) 2025.04.04
#1. Setup  (0) 2025.04.03