90. Setting up Form Validation
npm create vue@latest
이 섹션에서는 양식 유효성 검사에 초점을 맞출 것입니다.
양식 유효성 검사는 사용자로부터 받은 입력이 올바른 형식인지 확인하는 과정입니다.
예를 들어, 나이에 대한 필드가 있을 수 있습니다.
유효성 검사를 사용하여 입력이 일련의 기준을 충족하는지 확인할 수 있습니다.
값이 숫자인지 확인하는 것이 일반적입니다.
또한, 숫자가 최소 및 최대 범위 내에 있는지 확인하는 것도 흔합니다.
유효성 검사는 자원 절약 역할을 합니다.
전통적으로 유효성 검사는 서버에서 수행됩니다.
사용자가 양식을 작성한 후 데이터는 서버로 전송되고, 서버는 양식 데이터를 데이터베이스에 삽입하기 전에 입력을 검증합니다.
또한, 서버는 악의적인 코드가 실행되는 것을 방지하기 위해 데이터를 정화할 수도 있습니다.
사용자가 제출한 데이터에 대한 유효성 검사를 수행하는 것은 매우 중요한 단계입니다.
데이터베이스에 부적절한 데이터를 삽입하고 싶지는 않을 것입니다.
서버에서 유효성 검사를 수행하는 것의 단점은 사용자가 실수를 하면 서버로부터의 응답을 기다려야하며 그들의 실수를 알려주어야 한다는 것입니다.
현대에는 대부분의 사용자들이 즉각적인 피드백을 기대합니다.
이와 함께, 서버는 요청을 처리하기 위해 자원을 할당해야 합니다.
서버에서 유효성 검사를 수행하는 것은 비용이 많이 들고 느립니다.
자바스크립트는 많은 발전을 이루었습니다.
클라이언트에서 양식 유효성 검사를 수행할 수 있습니다.
이를 통해 피드백이 즉각적으로 이루어집니다.
검증이 브라우저에서 수행되므로 많은 자원을 절약할 수 있습니다.
분명히 말하자면, 클라이언트에서 하더라도 서버에서 항상 유효성 검사를 수행해야 합니다.
이것은 중복처럼 보일 수 있지만, 클라이언트에서의 양식 유효성 검사의 목적은 사용자 경험을 향상시키고 자원을 절약하는 것입니다.
사용자가 충분히 똑똑하다면 유효성 검사를 우회할 수도 있습니다.
실제로, 자바스크립트가 언어로 도입된 이유 중 하나는 양식 유효성 검사였습니다.
자바스크립트의 원래 목적 중 하나는 양식 유효성 검사를 수행하는 것이었습니다.
사용자는 즉각적인 피드백을 받을 수 있습니다.
실수를 하면 서버는 요청이 처음부터 이루어지지 않았기 때문에 자원을 할당할 필요가 없습니다.
인터넷이 그 어느 때보다 빠르고 서버가 이전 보다 강력해졌음에도 불구하고, 양식 유효성 검사를 수행하는 것은 여전히 좋은 아이디어입니다.
이는 서버로의 요청 수를 줄여줍니다.
결국에는 여러분의 선택입니다.
클라이언트 측 양식 유효성 검사를 수행하는 것은 선택 사항입니다.
이에 동의한다면, Vue에서 양식 유효성 검사를 수행하는 방법을 살펴보겠습니다.
기본적으로 Vue는 유효성 검사에 대해 최소한의 지원을 제공합니다.
기술적으로 라이브러리나 서드파티 패키지 없이 유효성 검사를 수행할 수 있습니다.
과정은 간단합니다.
이벤트는 양식 제출과 사용자 입력을 위해 사용됩니다.
양식이 제출되기 전에 사용자의 입력에 대해 조건이 수행됩니다.
조건이 실패하면 오류가 출력됩니다.
Vue를 단독으로 양식 유효성 검사에 사용하는 것은 완벽히 괜찮습니다.
그러나, 여러 양식에 대한 유효성 검사를 수행해야 할 수도 있습니다.
이는 반복적인 코드의 가능성을 증가시킵니다.
이 경우, 더 일반적이고 기본적인 유효성 검사를 관리하는 데 도움이 될 몇 가지 함수를 생성하고 싶을 수 있습니다.
직접 생성하거나 서드파티 라이브러리를 사용할 수 있습니다.
이 과정에서는 서드파티 라이브러리를 사용할 것입니다.
서드파티 라이브러리를 사용하는 또 다른 이점은 보통 모든 브라우저에서 작동하도록 테스트되고, 최신 상태로 유지된다는 것입니다.
Vue는 양식 유효성 검사를 위한 공식 라이브러리를 제공하지 않습니다.
대신, Vue는 Vue Validate와 VeeValidate 두 가지 옵션을 추천합니다.
이 강의의 리소스 섹션에서는 두 라이브러리에 대한 링크를 제공합니다.
두 라이브러리 모두 훌륭합니다.
하나를 선택하는 것은 선호도에 달려있습니다.
이 과정에서는 VeeValidate를 사용할 것입니다.
이것은 더 자주 업데이트되고 매우 유연하기 때문입니다.
설치를 시작합시다.
커맨드 라인으로 전환하세요.
서버가 실행 중이라면 종료하세요.
서버가 실행되지 않는 동안에 패키지를 설치해야 합니다.
그 후, 다음 명령어를 실행하세요:
npm i vee-validate
성공적으로 설치되었습니다.
라이브러리에 대해서는 다음 강의에서 계속할 것입니다.