수동 검증 패턴
반응형 오류 객체, 포커스 해제 시점과 제출 시점의 검증, 비밀번호 확인 일치를 다룹니다.
수동 검증 패턴은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
라이브러리 없이 검증하기
간단한 form은 반응형 상태를 사용해 직접 검증할 수 있습니다. errors를 추적하고 제출 시 또는 포커스를 잃을 때 검사를 실행한 다음 디렉티브로 메시지를 표시합니다. 이는 모든 라이브러리의 기반이 되는 핵심을 익히게 해 줍니다.
errors 객체
필드 이름을 키로 사용하는 반응형 errors 객체를 유지하세요. 빈 문자열(또는 없는 키)은 오류가 없다는 뜻입니다.
<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
const errors = reactive({ name: '', email: '' })
</script>validate 함수
각 필드를 검사하고 errors 객체에 메시지를 설정하는 validate 함수를 작성하세요. form이 유효한지 여부를 반환합니다.
<script setup>
function validate() {
errors.name = form.name ? '' : 'Name is required'
errors.email = form.email.includes('@') ? '' : 'Invalid email'
return !errors.name && !errors.email
}
</script>제출 시 검증하기
제출 처리기의 시작 부분에서 validate를 호출하고 실패하면 더 진행하지 마세요. 이렇게 하면 유효하지 않은 데이터가 전송되지 않습니다.
<script setup>
function onSubmit() {
if (!validate()) return
// proceed to send
}
</script>필드를 벗어날 때 필드별 검증
제출할 때만 검증하면 느리게 느껴질 수 있습니다. 사용자가 필드를 벗어날 때 @blur를 사용해 해당 필드 하나만 검증하면 즉시 피드백을 제공할 수 있습니다.
<script setup>
function validateName() {
errors.name = form.name ? '' : 'Name is required'
}
</script>
<template>
<input v-model="form.name" @blur="validateName" />
</template>오류 메시지 표시하기
해당 필드에 오류가 있을 때만 메시지를 표시하도록 v-if를 사용하세요. 입력 필드 가까이에 배치하세요.
<template>
<input v-model="form.name" @blur="validateName" />
<span v-if="errors.name" class="msg">{{ errors.name }}</span>
</template>잘못된 필드 스타일 지정하기
오류가 있을 때 빨간 테두리를 추가하도록 객체 문법으로 class를 바인딩합니다. 이 class는 errors.name이 참으로 평가되는 동안에만 적용됩니다.
<input
v-model="form.name"
:class="{ error: errors.name }"
@blur="validateName"
/>오류 스타일
작은 CSS 규칙으로 모양을 완성합니다 — 빨간 테두리는 해당 필드에 확인이 필요하다는 신호입니다.
<style>
.error { border: 1px solid red; }
.msg { color: red; font-size: 12px; }
</style>계산된 유효성
computed를 사용해 전체 유효성 플래그를 도출하여 제출 버튼을 반응형으로 활성화하거나 비활성화합니다.
<script setup>
import { computed } from 'vue'
const isValid = computed(() => !errors.name && !errors.email)
</script>
<template>
<button :disabled="!isValid">Submit</button>
</template>장점과 한계
수동 검증은 동작이 투명하고 종속성이 없어 작은 form에 적합합니다. 하지만 규칙이 늘어나면 — 필드 간 검사, 비동기 검증, 많은 필드 등 — 반복 코드가 쌓이므로 라이브러리가 필요해집니다.
검증 흐름 요약
패턴은 다음과 같습니다: 반응형 errors, validate 함수, 제출 시 실행(선택적으로 포커스를 잃을 때도 실행), v-if로 메시지 표시, 조건부 class로 스타일 지정.
빠른 확인
수동 검증에 관한 지식을 확인해 보세요.
복습
수동 검증 패턴:
- 필드를 키로 사용하는 반응형
errors객체를 유지합니다. validate함수가 메시지를 설정하고 유효성 여부를 반환합니다.- 제출 시 검증하고, 빠른 피드백을 위해
@blur에서 필드별로 검증합니다. v-if="errors.x"로 메시지를 표시하고:class="{ error: errors.x }"로 스타일을 지정합니다.
자주 묻는 질문
“수동 검증 패턴” 강의는 무료인가요?
네 — “수동 검증 패턴” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“수동 검증 패턴”에서 뭘 배우나요?
반응형 오류 객체, 포커스 해제 시점과 제출 시점의 검증, 비밀번호 확인 일치를 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“수동 검증 패턴” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.