Zod

설치

<aside> 🥕

npm install zod

</aside>

사용 - 스키마 생성

import {z} from "zod";

// 1. 단일 요소 적용
const userameSchema = z.string().min(5).max(10);

// 2. 오브젝트에 적용
const formSchema = z.object({
    username: z.string().min(3).max(10),
    email: z.string().email(),
    password: z.string().min(10),
    confirm_password: z.string().min(10)
})

검증

formSchema.parse(data);

여기까지 한다면,

submit 버튼 클릭 시에

흰&빨강색 에러창으로 넘어갈 것이다.

에러 페이지로 넘기지 않고 사용하는 방법 두가지

1. parse - error throw 하여 try catch로 감싸주어야함