hyungju-lee

95. Additional Rules

npm create vue@latest

이번에는 name 필드에 추가 규칙을 적용하는 것을 계속할 것입니다.
목표는 추가 규칙을 추가하는 것입니다.
우선, 인증 컴포넌트에서 규칙을 빠르게 추가하기 위한 대안적인 구문을 소개할 것입니다.
이름 입력에 대한 VeeField 컴포넌트에 rules 속성을 추가함으로써 규칙을 적용할 수 있다는 것을 배웠습니다.

규칙을 추가하는 형식은 규칙의 이름을 값으로 전달하는 것입니다.
이름은 defineRule 함수의 첫 번째 인자로 할당한 규칙의 이름과 일치해야 합니다.
더 복잡한 규칙의 경우 객체를 사용할 수도 있습니다.
rules 속성을 바인딩하여 객체를 사용할 수 있습니다.
이 바인딩은 객체를 전달하고 현재 값을 객체로 대체할 수 있게 합니다.
객체의 각 속성은 하나의 규칙을 나타냅니다.

규칙 이름은 추가하고 싶은 규칙의 이름이어야 합니다.
이 예제에서는 required 규칙을 다시 추가해 보겠습니다.
일부 규칙은 어떻게 적용될지 구성할 수 있게 해줍니다.
규칙에 따라 다릅니다.
규칙을 설정하고 싶다면, 속성의 값을 사용할 수 있습니다.
required 규칙의 경우에는 추가 옵션이 없습니다.
추가 옵션이 없는 규칙의 경우 객체 구문을 사용할 때 true로 설정해야 합니다.
이것은 이전과 같은 결과를 낳을 것입니다.
객체 구문은 문자열 대신 객체 구문을 선호하는 경우 유용할 수 있습니다.
객체를 사용하는 장점은 규칙을 데이터 속성으로 아웃소싱할 수 있다는 것입니다.
많은 규칙이 있으면 객체로 변환하는 것이 가독성에 도움이 될 수 있습니다.

우리는 VeeField 컴포넌트에서 규칙 객체를 사용하지 않을 것입니다.
우리는 이미 규칙을 아웃소싱하기 위해 validation-schema 속성을 객체로 설정했습니다.
저는 입력 규칙을 하나의 객체에 중앙집중화할 수 있기 때문에 schema 사용을 선호합니다.

더 많은 규칙을 추가해보겠습니다.

validation 파일을 열고 minimum, maximum, alphaSpaces라는 세 가지 규칙을 추가하겠습니다.
이 규칙들을 import 문에 포함시켜 업데이트할 것입니다.
minimum 규칙은 입력값이 특정 문자 길이보다 작지 않은지 확인합니다.
이 규칙은 사용자들이 입력란에 한 글자만 입력하고 넘어가는 것을 방지하기 위한 것입니다.
maximum 규칙은 입력값이 특정 문자 길이를 초과하지 않도록 합니다.
어떤 경우에는 데이터베이스에 문자 수 제한이 있을 수 있으며, 사용자들이 너무 큰 문자열을 입력하는 것을 허용하고 싶지 않을 수 있습니다.

AlphaSpaces 규칙은 입력값이 알파벳 문자 또는 공백만 포함하도록 합니다.
일반적으로 사람들의 이름에는 숫자나 기타 문자가 포함되지 않으므로 알파벳 문자와 공백만을 허용하는 것이 좋습니다.
import 문에서, AlphaSpaces 규칙에 별칭을 지정하고 있습니다.
이는 우리가 사용하는 ESLint 규칙이 important 이름에 밑줄 문자를 허용하지 않기 때문입니다.
우리는 카멜케이싱을 사용해야하므로, AlphaSpaces 객체가 밑줄 문자를 사용하는 것을 방지하기 위해 별칭을 사용합니다.
이것은 사소한 불편함입니다.
이후에는 밑줄을 사용하여 규칙을 등록할 것입니다.
규칙 객체들을 가져온 후에는 defineRule 함수를 사용하여 이들을 등록할 것입니다.
다음 단계는 규칙을 사용하는 것입니다.
인증 컴포넌트 파일로 전환하세요.
데이터 함수의 schema 객체로 스크롤을 내리세요.
추가 규칙을 추가하려면, 각 규칙을 파이프 문자(|)로 구분할 수 있습니다.
등록한 세 가지 규칙을 추가해보겠습니다.
required 규칙과 달리 minimum 규칙에는 최소 문자 길이를 설정하는 옵션이 있습니다.
옵션을 설정하려면 규칙 뒤에 콜론(:)을 추가하고 값을 설정해야 합니다.
최소 문자 길이를 3으로 설정할 것입니다.
그 다음에는 maximum 규칙을 추가하고, 이를 100으로 설정합니다.
이 규칙은 필드가 100자를 초과하지 않도록 제한합니다.
마지막으로 추가할 규칙은 AlphaSpaces 입니다.
이 규칙에는 옵션이 없습니다.
이제 총 4가지 규칙이 있습니다.

이들이 작동하는지 테스트해보겠습니다.
브라우저로 돌아가서 입력란에 한 글자만 입력해보세요.
입력란이 유효하지 않다는 오류 메시지를 받게 될 것입니다.
오류 메시지가 좀 더 설명적이면 좋을 것입니다.
향후 강의에서 오류 메시지를 사용자 정의하는 방법을 살펴볼 것입니다.
추가 문자를 입력하면 오류가 사라질 것입니다.
공백을 입력해도 괜찮아야 합니다.
숫자를 입력하면 AlphaSpaces 규칙이 위반되고, 알파벳 문자나 공백만 입력할 수 있습니다.
규칙이 원하는 대로 적용되고 있어서 좋습니다.
이 강의를 마치기 전에 두 가지를 언급하고 싶습니다.

첫째, VeeValidate는 기본적으로 빠른 종료 전략을 따릅니다.
입력란에서 오류를 만나면 나머지 규칙을 확인하지 않고 유효성 검사를 중단합니다.
이는 합리적입니다. 하나의 규칙이 이미 위반된 경우 나머지 규칙을 확인하는 것은 무의미합니다.
이로 인해 성능이 향상되고 사용자에게 더 빠른 피드백을 제공할 수 있습니다.
여러 오류를 출력하는 방법도 있지만, 향후 강의에서 예제를 살펴볼 것입니다.

둘째, 초기 값이 변경되기 전까지는 빈 필드에 대한 유효성 검사가 수행되지 않습니다.
페이지에 양식이 처음 나타날 때 오류가 발생하지 않는다는 것을 알 수 있습니다.
입력값이 변경될 때까지 VeeValidate는 규칙을 적용하지 않습니다.
이러한 동작은 우리에게 유리합니다.
사용자가 아직 입력할 기회조차 갖지 못했을 때 오류를 표시하기 시작하면 성가시게 될 수 있습니다.
이 강의를 마치며, 다음 강의에서 계속해서 진행할 것입니다.

src/includes/validation.ts
import { Form as VeeForm, Field as VeeField, defineRule, ErrorMessage } from 'vee-validate'
import { required, min, max, alpha_spaces as alphaSpaces } from '@vee-validate/rules'
import type { App } from 'vue'

export default {
    // install(app: App, options?: { [key: string]: any }) {}
    install(app: App) {
        app.component('VeeForm', VeeForm)
        app.component('VeeField', VeeField)
        app.component('ErrorMessage', ErrorMessage)

        defineRule('required', required)
        defineRule('min', min)
        defineRule('max', max)
        defineRule('alpha_spaces', alphaSpaces)
    }
}