Zod로 스키마 유효성 검사하기

환영합니다

스키마 검증을 사용하는 이유

설치

npm install zod @hookform/resolvers

Zod 스키마 정의하기

import { z } from 'zod';

const loginSchema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'At least 8 characters'),
});

TypeScript 타입 추론하기

type LoginForm = z.infer<typeof loginSchema>;
// { email: string; password: string }

resolver를 통해 useForm 연결하기

import { zodResolver } from '@hookform/resolvers/zod';

const { register, handleSubmit, formState } = useForm<LoginForm>({
  resolver: zodResolver(loginSchema),
});

인라인 규칙은 이제 필요하지 않습니다

<input {...register('email')} />
{errors.email && <p>{errors.email.message}</p>}

복잡한 Zod 검증

const schema = z.object({
  url: z.string().url('Must be a valid URL'),
  confirmPassword: z.string(),
}).refine(
  data => data.password === data.confirmPassword,
  { message: 'Passwords must match', path: ['confirmPassword'] }
);

필드 간 검증

const schema = z.object({
  start: z.string(),
  end: z.string(),
}).refine(d => d.end > d.start, {
  message: 'End must be after start',
  path: ['end'],
});

백엔드와 스키마 공유

// shared/schemas.ts
export const loginSchema = z.object({ ... });

// frontend — import and use as resolver
// backend — import and call .parse() on request body

간단한 확인

복습

다음 학습 내용