Zod로 유효성 검사 구현에 생산성을 더해보아요

date

Aug 27, 2024

slug

zod

author

status

Public

tags

Etc

summary

type

Post

thumbnail

category

updatedAt

Nov 11, 2024 01:45 PM

TypeScript를 쓰는데 별도의 데이터 유효성 검사 라이브러리가 필요한 이유

런타임 데이터에 대한 유효성 검사를 구현하는데 생산성을 높여주는 라이브러리

joi와 Avj는 우선 건너뜁시다

Yup과 Zod

• 스키마 정의가 유연하다

• Formik과 함께 많이 쓰는듯 - Formik공식문서에서 추천중 ‣

• 역사가 깊다 - yup은 Jun 25, 2016 / zod는 Apr 5, 2020

• repository star 22.7k

• TS와 강력한 호환성 제공 - 엄격한 정적 타입 검사 제공

• 의존성이 없다 ⇒ 경량이다
package.lock.json을 보면 dependencies필드가 없는 것을 볼 수 있음.

//package.lock.json

		"node_modules/zod": {
			"version": "3.23.8",
			"resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
			"integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
			"funding": {
				"url": "https://github.com/sponsors/colinhacks"
			}
		}

• API 스타일이 Yup에 비해 간결한편

• React-hook-form과 조합해 자주 쓰임

• release가 잦으며 업데이트 + 관리가 잘 되고있다. 현재 최신 version v3.23.8

• 구문이 더 간결하다 → 복잡한 validation구현 시 yup에 비해 간결한 구문으로 구현이 가능하다

• 검사에 더해 데이터 형변환도 지원

• repository star 33k

Zod를 선택한 이유

const testSchema = yup
    .string()
    .validate(333)
    .then((res) => console.log(res));
    // string 자료형을 예상했는데 333을 넣어 확인했을때 엄격하게 자료형을 검사하지 않음. 
		// 반환값은 333
    
const testSchema = yup
    .string()
    .isValid(11)
    .then((res) => console.log(res)); // true를 반환

const testSchema = yup
    .string()
    .strict()
    .validate(333)
    .then((res) => console.log(res));
   // 333을 반환하지 않고 끝남
   
 const testSchema = yup
    .string()
    .strict()
    .isValid(11)
    .then((res) => console.log(res));
    //false를 반환

이 라이브러리를 쓰지 않는다면 유효성 검사 함수를 개별 구현하시면 됩니다

const emailValidation = (email: string) => {
		const emailValidation =
			/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*[-_\.]?@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{1,6}$/i;
		if (email === '' || !emailValidation.test(email)) {
			return false;
		} 
			return true;
	};

zod를 사용하면

import { z } from 'zod';

const emailValidationSchema = z.string().email({ message: "Invalid email address" });

const emailValidation = (email: string) => {
  try {
    emailValidationSchema.parse(email);
    return true;
  } catch (e) {
    return false;
  }
};

const result = emailValidationSchema.safeParse(email);

if(!result.success){
// 유효성 검사 실패에 대한 처리
	return;
}