Vue Academy · 강의

스키마 기반 검증을 위한 VeeValidate

useForm(), useField(), yup 스키마, 오류 메시지, 비동기 검증 처리를 다룹니다.

스키마 기반 검증을 위한 VeeValidate은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

VeeValidate로 확장하기

form이 커질수록 직접 작성한 검증은 번거로워집니다. VeeValidate는 form 상태를 관리하고 schema에 따라 검증을 수행하며 errors를 모두 반응형으로 제공하는, 널리 사용되는 Vue 라이브러리입니다.

schema 기반 검증

검사를 직접 작성하는 대신 schema에 규칙을 선언적으로 설명합니다. VeeValidate와 yup을 함께 사용하면 schema를 유연하게 작성할 수 있습니다.

<script setup>
import * as yup from 'yup'
const schema = yup.object({
  name: yup.string().required(),
  email: yup.string().email().required()
})
</script>

useForm으로 form 설정하기

useForm은 form 수준의 상태와 검증을 초기화합니다. schema를 validationSchema로 전달하면 모든 요소를 연결합니다.

<script setup>
import { useForm } from 'vee-validate'
const { handleSubmit, errors } = useForm({
  validationSchema: schema
})
</script>

useField로 필드 연결하기

useField는 이름으로 입력 필드 하나를 등록합니다. 필드의 value, errorMessage, handleBlur 처리기를 반환합니다.

<script setup>
import { useField } from 'vee-validate'
const { value: name, errorMessage, handleBlur } = useField('name')
</script>

템플릿에서 필드 바인딩하기

반환된 value를 v-model로 바인딩하고, 포커스를 잃을 때 검증하도록 @blur를 handleBlur에 연결하세요.

<template>
  <input v-model="name" @blur="handleBlur" />
  <span>{{ errorMessage }}</span>
</template>

오류 메시지 표시하기

각 필드는 자체 errorMessage를 제공하며, 이는 반응형 문자열입니다. 유효할 때는 비어 있고 유효하지 않을 때는 schema 메시지를 담습니다.

<template>
  <input v-model="name" @blur="handleBlur" />
  <span v-if="errorMessage" class="error">{{ errorMessage }}</span>
</template>

제출 처리하기

handleSubmit은 제출 함수를 감쌉니다. 먼저 검증을 실행하고, 전체 form이 유효할 때만 값을 전달해 콜백을 호출합니다.

<script setup>
const onSubmit = handleSubmit((values) => {
  console.log('valid form', values)
})
</script>

<template>
  <form @submit="onSubmit">...</form>
</template>

form 수준 오류

useForm에서 제공하는 errors 객체는 필드 이름을 현재 메시지에 매핑하므로 요약이나 조건부 UI에 유용합니다.

<script setup>
const { errors } = useForm({ validationSchema: schema })
// errors.name, errors.email
</script>

라이브러리를 사용하는 이유

선언적 schema가 반복적인 수동 검사를 대신합니다.
포커스를 잃을 때, 변경할 때, 제출할 때의 검증 시점을 기본으로 지원합니다.
필드별 errorMessage와 form 수준의 errors를 제공합니다.
yup을 통해 비동기 및 필드 간 규칙을 쉽게 작성할 수 있습니다.

컴포넌트 방식과 컴포지션 API 비교

VeeValidate는 템플릿 우선 방식에 적합한 <Form> 및 <Field> 컴포넌트도 제공합니다. 컴포지션 함수인 useForm과 useField는 <script setup>과 더 잘 맞고 더욱 세밀하게 제어할 수 있습니다.

수동 검증과 schema 기반 검증 비교

수동 검증은 작동 원리를 익히는 데 도움이 되며 아주 작은 form에 적합합니다. VeeValidate와 yup을 사용하는 schema 기반 검증은 훨씬 적은 코드와 더 적은 버그로 크고 복잡한 form까지 확장할 수 있습니다.

빠른 확인

VeeValidate에 관한 지식을 확인해 보세요.

복습

VeeValidate를 사용한 schema 기반 검증:

validationSchema로 전달할 yup schema에 규칙을 설명합니다.
useForm이 form 상태, errors, handleSubmit을 관리합니다.
useField가 각 입력 필드에 대해 value, errorMessage, handleBlur를 반환합니다.
큰 form에서는 수동 검증보다 훨씬 뛰어난 확장성을 제공합니다.

자주 묻는 질문

“스키마 기반 검증을 위한 VeeValidate” 강의는 무료인가요?

네 — “스키마 기반 검증을 위한 VeeValidate” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“스키마 기반 검증을 위한 VeeValidate”에서 뭘 배우나요?

useForm(), useField(), yup 스키마, 오류 메시지, 비동기 검증 처리를 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“스키마 기반 검증을 위한 VeeValidate” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기