Previous
Next
Vuelidate 완벽 가이드 | Vue 폼 검증·Validation·TypeScript·실전 활용

Vuelidate 완벽 가이드 | Vue 폼 검증·Validation·TypeScript·실전 활용

· 3분 읽기 · 수정 중급
Vuelidate 완벽 가이드 | Vue 폼 검증·Validation·TypeScript·실전 활용

이 글의 핵심

Vuelidate 완벽 가이드에 대해 정리한 개발 블로그 글입니다. Vuelidate로 Vue 폼 검증을 구현하는 완벽 가이드입니다. Built-in Validators, Custom Validators, Async Validation까지 실전 예제로 정리했습니다. > 실무 경험 공유:… 개념과 예제 코드를 단계적으로 다루며, 실무·학습에 참고할 수 있도록 구성했습니다. 관련 키워드:…

이 글의 핵심

Vuelidate로 Vue 폼 검증을 구현하는 완벽 가이드입니다. Built-in Validators, Custom Validators, Async Validation까지 실전 예제로 정리했습니다.

실무 경험 공유: 수동 검증 로직을 Vuelidate로 전환하면서, 코드가 60% 감소하고 검증 로직이 재사용 가능해진 경험을 공유합니다.

들어가며: “폼 검증이 복잡해요”

실무 문제 시나리오

시나리오 1: 검증 로직이 중복돼요

각 컴포넌트마다 작성합니다. Vuelidate는 재사용 가능합니다. 시나리오 2: 에러 메시지가 일관적이지 않아요

수동 관리가 어렵습니다. Vuelidate는 통일된 에러 처리를 제공합니다. 시나리오 3: 비동기 검증이 필요해요

직접 구현이 복잡합니다. Vuelidate는 Async Validation을 지원합니다.

1. Vuelidate란?

핵심 특징

Vuelidate는 Vue 폼 검증 라이브러리입니다. 주요 장점:

  • Model 기반: 반응형 검증
  • Composition API: Vue 3 친화적
  • TypeScript: 완벽한 지원
  • Async Validation: 비동기 검증
  • 커스터마이징: 자유로운 확장

2. 설치 및 기본 사용

설치

npm install @vuelidate/core @vuelidate/validators

기본 검증

<script setup lang="ts">
import { reactive, computed } from 'vue';
import { useVuelidate } from '@vuelidate/core';
import { required, email, minLength } from '@vuelidate/validators';
const state = reactive({
  email: ',
  password: ',
});
const rules = computed(() => ({
  email: { required, email },
  password: { required, minLength: minLength(8) },
}));
const v$ = useVuelidate(rules, state);
const handleSubmit = async () => {
  const isValid = await v$.value.$validate();
  if (!isValid) {
    return;
  }
  console.log('Valid data:', state);
};
</script>
<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="state.email" />
    <span v-if="v$.email.$error">
      {{ v$.email.$errors[0].$message }}
    </span>
    <input v-model="state.password" type="password" />
    <span v-if="v$.password.$error">
      {{ v$.password.$errors[0].$message }}
    </span>
    <button type="submit">Submit</button>
  </form>
</template>

3. Built-in Validators

import {
  required,
  email,
  minLength,
  maxLength,
  minValue,
  maxValue,
  between,
  alpha,
  alphaNum,
  numeric,
  url,
  sameAs,
} from '@vuelidate/validators';
const rules = {
  email: { required, email },
  password: { required, minLength: minLength(8) },
  age: { required, between: between(18, 120) },
  username: { required, alphaNum, minLength: minLength(3) },
  website: { url },
  confirmPassword: { required, sameAs: sameAs(computed(() => state.password)) },
};

4. Custom Validators

import { helpers } from '@vuelidate/validators';
const strongPassword = helpers.withMessage(
  'Password must contain uppercase, lowercase, and number',
  (value: string) => {
    return /[A-Z]/.test(value) && /[a-z]/.test(value) && /[0-9]/.test(value);
  }
);
const rules = {
  password: { required, strongPassword },
};

5. Async Validation

import { helpers } from '@vuelidate/validators';
const uniqueEmail = helpers.withAsync(async (value: string) => {
  if (!value) return true;
  const response = await fetch(`/api/check-email?email=${value}`);
  const { exists } = await response.json();
  return !exists;
});
const rules = {
  email: {
    required,
    email,
    uniqueEmail: helpers.withMessage('Email already taken', uniqueEmail),
  },
};

6. 에러 메시지

커스텀 메시지

import { required, email } from '@vuelidate/validators';
import { helpers } from '@vuelidate/validators';
const rules = {
  email: {
    required: helpers.withMessage('이메일을 입력하세요', required),
    email: helpers.withMessage('유효한 이메일을 입력하세요', email),
  },
};

다국어

import { createI18n } from '@vuelidate/validators';
const { withI18nMessage } = createI18n({
  ko: {
    required: '{property}을(를) 입력하세요',
    email: '유효한 이메일을 입력하세요',
  },
});
const rules = {
  email: {
    required: withI18nMessage(required),
    email: withI18nMessage(email),
  },
};

7. Nested Objects

<script setup lang="ts">
import { reactive } from 'vue';
import { useVuelidate } from '@vuelidate/core';
import { required, email } from '@vuelidate/validators';
const state = reactive({
  user: {
    name: ',
    email: ',
  },
  address: {
    street: ',
    city: ',
  },
});
const rules = {
  user: {
    name: { required },
    email: { required, email },
  },
  address: {
    street: { required },
    city: { required },
  },
};
const v$ = useVuelidate(rules, state);
</script>
<template>
  <input v-model="state.user.name" />
  <span v-if="v$.user.name.$error">{{ v$.user.name.$errors[0].$message }}</span>
  <input v-model="state.user.email" />
  <span v-if="v$.user.email.$error">{{ v$.user.email.$errors[0].$message }}</span>
</template>

8. 실전 예제: 회원가입 폼

<script setup lang="ts">
import { reactive, computed } from 'vue';
import { useVuelidate } from '@vuelidate/core';
import { required, email, minLength, sameAs, helpers } from '@vuelidate/validators';
const state = reactive({
  email: ',
  password: ',
  confirmPassword: ',
  name: ',
  agreeToTerms: false,
});
const strongPassword = helpers.withMessage(
  'Password must contain uppercase, lowercase, and number',
  (value: string) => /[A-Z]/.test(value) && /[a-z]/.test(value) && /[0-9]/.test(value)
);
const rules = computed(() => ({
  email: { required, email },
  password: { required, minLength: minLength(8), strongPassword },
  confirmPassword: { required, sameAs: sameAs(state.password) },
  name: { required, minLength: minLength(2) },
  agreeToTerms: {
    checked: helpers.withMessage('You must agree to terms', (value: boolean) => value === true),
  },
}));
const v$ = useVuelidate(rules, state);
const handleSubmit = async () => {
  const isValid = await v$.value.$validate();
  if (!isValid) {
    return;
  }
  console.log('Submitting:', state);
};
</script>
<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <input v-model="state.email" placeholder="Email" />
      <span v-if="v$.email.$error" class="error">
        {{ v$.email.$errors[0].$message }}
      </span>
    </div>
    <div>
      <input v-model="state.password" type="password" placeholder="Password" />
      <span v-if="v$.password.$error" class="error">
        {{ v$.password.$errors[0].$message }}
      </span>
    </div>
    <div>
      <input v-model="state.confirmPassword" type="password" placeholder="Confirm Password" />
      <span v-if="v$.confirmPassword.$error" class="error">
        {{ v$.confirmPassword.$errors[0].$message }}
      </span>
    </div>
    <div>
      <input v-model="state.name" placeholder="Name" />
      <span v-if="v$.name.$error" class="error">
        {{ v$.name.$errors[0].$message }}
      </span>
    </div>
    <div>
      <label>
        <input v-model="state.agreeToTerms" type="checkbox" />
        I agree to terms
      </label>
      <span v-if="v$.agreeToTerms.$error" class="error">
        {{ v$.agreeToTerms.$errors[0].$message }}
      </span>
    </div>
    <button type="submit" :disabled="v$.$invalid">Sign Up</button>
  </form>
</template>

정리 및 체크리스트

핵심 요약

  • Vuelidate: Vue 폼 검증
  • Model 기반: 반응형 검증
  • Composition API: Vue 3 친화적
  • Built-in Validators: 다양한 검증
  • Custom Validators: 자유로운 확장
  • Async Validation: 비동기 검증

구현 체크리스트

  • Vuelidate 설치
  • Rules 정의
  • 기본 검증 구현
  • Custom Validator 작성
  • Async Validation 구현
  • 에러 메시지 커스터마이징
  • 복잡한 폼 구현

같이 보면 좋은 글

이 글에서 다루는 키워드

Vuelidate, Vue 3, Validation, Form, TypeScript, Frontend, Composition API

자주 묻는 질문 (FAQ)

Q. Vue 2에서도 사용할 수 있나요?

A. 네, Vuelidate 2는 Vue 2와 Vue 3 모두 지원합니다.

Q. Zod와 함께 사용할 수 있나요?

A. 네, Zod 스키마를 Vuelidate Validator로 변환할 수 있습니다.

Q. 성능은 어떤가요?

A. 매우 좋습니다. 반응형 시스템을 활용해 효율적입니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, 많은 Vue 프로젝트에서 안정적으로 사용하고 있습니다.

심화 부록: 구현·운영 관점

이 부록은 앞선 본문에서 다룬 주제(「Vuelidate 완벽 가이드 | Vue 폼 검증·Validation·TypeScript·실전 활용」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.

내부 동작과 핵심 메커니즘

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]
sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(런타임·게이트웨이·프로세스)
  participant D as 의존성(API·DB·큐·파일)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)
  • 불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
  • 결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
  • 경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
  • 백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.

프로덕션 운영 패턴

영역운영 관점 질문
관측성요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가
용량피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.

확장 예시: 엔드투엔드 미니 시나리오

앞선 본문 주제(「Vuelidate 완벽 가이드 | Vue 폼 검증·Validation·TypeScript·실전 활용」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

  1. 입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
  2. 핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
  3. 실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
  4. 호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
  5. 부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.
handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)
  authorize(validated, ctx)
  result = domainCore(validated)
  persistOrEmit(result, idempotentKey)
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상가능 원인조치
간헐적 실패레이스, 타임아웃, 외부 의존성, DNS최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패환경 변수, 권한, 플랫폼 차이, lockfileCI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정 불일치프로필·시크릿·기본값, 리전스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화
데이터 불일치비멱등 재시도, 부분 쓰기, 캐시 무효화 누락멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.