✅Zod 도입기: 코드가 짧아지고 오류도 줄었다
Zod는 TypeScript를 위한 선언형 스키마 기반 유효성 검사 라이브러리이며,어떤 값이 어떤 구조와 조건을 만족해야 하는지를 코드로 선언하고, 그 스키마에 맞는지를 검증해주는 도구이다.
import { z } from "zod";
const schema = z.string().email();
schema.parse("test@example.com"); // 통과
schema.parse("abc"); // 에러 발생
• 특징- TypeScript 친화적: 스키마로부터 타입을 자동 생성할 수 있음- 간결한 문법: 복잡한 조건도 짧고 명확하게 표현 가능- 정형화된 에러 처리: 에러 메시지 포맷이 일관적이고 커스터마이징 용이- 다양한 유효성 조건 제공: 기본 타입뿐 아니라, 정규식, 조건부, 배열, 객체 등도 쉽게 검증 가능
도입하게 된 이유: 정규식 유효성 검사의 한계• React에서 form 유효성 검사를 구현할 때, 초기에는 useState로 각 필드의 값을 관리하고, 정규식으로 직접 유효성을 검사.- 정규식 코드가 길고 반복적으로 늘어남- 실수하기 쉽고, 한 필드만 빠져도 전체 폼 검증이 실패- 에러 메시지 관리가 중복됨- 유지보수가 점점 어려워짐
export const addMemberCondition = (
customerId: string,
newMember: TMemberInfo,
familyInfoList: TFamily[]
) => {
return {
customerId !== "" &&
newMember.name !== "" &&
newMember.work_start_date !== "" &&
newMember.birth !== "" &&
newMember.phone !== "" &&
newMember.photo !== "" &&
newMember.gender !== "" &&
newMember.heart_dia !== "" &&
newMember.heart_dia !== "" &&
30 <= Number(newMember.weight) &&
Number(newMember.weight) <= 220 &&
30 <= Number(newMember.height) &&
Number(newMember.weight) <= 240 &&
newMember.retail !== "" &&
newMember.license_number !== "" &&
newMember.license_aquisition_date !== "" &&
newMember.license_expiration_date !== "" &&
(familyInfoList[0]
? familyInfoList?.every((familyInfo) => familyInfo.name !== "")
: true),
};
};Zod 도입
export const ZMember = z.object({
deviceId: z.optional(z.string()),
assetId: z.optional(z.string()),
face_id: z.optional(z.string()),
name: z.string().min(2),
photo: z.string().min(1),
birth: z.string().min(4),
retail: z.string().min(1),
gender: z.string().min(1),
weight: z.string().min(1),
height: z.string().min(1),
heart_sys: z.string().min(1),
heart_dia: z.string().min(1),
calib_sys: z.optional(z.string()),
calib_dia: z.optional(z.string()),
});if(ZMember.safeParse(newMember).success)도입 효과- 코드가 간결해지고 가독성 향상- 버그 발생 가능성 감소- 테스트 및 디버깅이 쉬워짐- 필드 추가/변경이 매우 쉬움