Zod

저번 프로젝트에서 Form 유효성 검증을 위한 Yup + Vee-Validate 라이브러리의 조합을 경험했다.
중간 투입되었기 때문에 직접 선정한 것은 아니다.
이전까지의 유효성 검증은 form 컴포넌트의 props를 통해 생짜로만 처리해봤지 라이브러리의 도움을 받은 경험은 처음이다.
이번에 신규 프로젝트 세팅을 준비하면서 Zod + Formkit 이 보다 트렌디한 대안으로 각광받는 것 같아 비교분석 해보았다.

Yup - 데이터 유효성 검사 라이브러리
npm install yup

VeeValidate - 간편한 Vue Forms
가장 인기 있는 Vue.js 폼 라이브러리입니다.
값 추적, 유효성 검사, 오류 처리, 제출 등을 모두 담당합니다.
npm install vee-validate

VeeValidate 컴포넌트 방식 + Yup
https://vee-validate.logaretm.com/v4/guide/components/validation/#validation-schemas-with-yup

<Form @submit="submit" :validation-schema="schema">
  <Field name="email" />
  <ErrorMessage name="email" />
  <Field name="password" type="password" />
  <ErrorMessage name="password" />
  <button type="submit">제출</button>
</Form>

import { Form, Field, ErrorMessage } from 'vee-validate';
import * as yup from 'yup';

const schema = yup.object({
  name: yup.string().required(),
  email: yup.string().required('이메일은 필수입니다').email('올바른 이메일 형식이 아닙니다'),
  password: yup.string().required('비밀번호를 입력해주세요').min(8, '최소 8자 이상'),
});

function submit(values) {
  console.log('유효한 데이터:', values);
}

Zod
정적 타입 추론을 사용한 TypeScript 우선 스키마 유효성 검사
npm install zod

FormKit
프로젝트를 획기적으로 간소화하는 오픈 소스 폼 프레임워크
npm install @formkit/vue

<FormKit type="form" :plugins="[zodPlugin]" @submit="submitHandler">
  <FormKit type="text" name="email" label="이메일" />
  <FormKit type="password" name="password" label="비밀번호" />
  <FormKit type="submit" label="제출" />
</FormKit>

import * as z from "zod";
import { createZodPlugin } from '@formkit/zod'

const zodSchema = z.object({
  email: z.string().email({ message: '유효한 이메일이 아닙니다' }),
  password: z.string().min(8, { message: '최소 8자 이상' }),
});

const [zodPlugin, submitHandler] = createZodPlugin(zodSchema, async (values) => {
  console.log('유효한 데이터:', values)
})