🔴 유효성 검사 체크
유효성 검사는 사용자가 입력한 데이터가 예상대호 유효한지 여부를 체크할 수 있다. 이는 시스템의 안정성과 보안을 유지하며 오류와 잘못된 데이터가 입력되는 것을 사전에 방지하는데 도움을 준다. 그렇다면 유효성 검사 처리는 어떻게 어디서 해주는 것이 합리적 일까??
🟠 유효성 검사
앞에서 설명했 듯 유효성 검사는 시스템의 안전성과 보안을 유지하며 오류와 잘못된 데이터를 사전에 방지하는데 도움이 된다.
또한 유효성 검사는 시스템의 사용자 경험을 향상시키는 데 중요한 역할을 한다. 사용자가 잘못된 데이터를 입력 했을 때, 시스템이 그에 대해 적절하게 처리하지 못하면 사용자는 혼란스러움과 불만을 느낄 수 있다.
마지막으로, 유효성 검사는 데이터의 일관성을 유지하는데 도움을 준다. 잘못된 데이터가 시스템에 입력되면 일관성이 깨지고, 잘못된 결과가 나타날 수 있기 때문이다.
유효성 검사의 예시로는 아이디, 비밀번호, 닉네임 등을 최소글자수/최소글자수/특정문자/특정문자 제외 등을 예로 들 수 있다.
그렇다면 처리는 백에서? 프론트에서??
정답은 프론트와 백 둘다 처리해주는 것이 현명하다.
프론트엔드에서 유효성 검사를 수행하는 것은 사용자가 입력한 데이터의 형식이나 값이 올바른지 빠르게 확인할 수 있게 도와준다. 이러한 수행을 프론트단에서 처리하게 되면 더 나은 사용자 경험을 누릴 수 있으며, 입력된 데이터를 보다 쉽게 처리할 수 있다.
하지만 프론트엔드에서 수행된 유효성 검사는 보안적인 측면에서 신뢰성이 떨어질 수도 있고, 잘못된 데이터가 백엔드로 전송될 수 도 있다.
또한 백엔드에서 유효성 검사를 수행함으로서 프론트에서 처리하지 못한 데이터 검증을 할 수 있다. 예를 들어, 아이디 중복, 이메일 확인 등 허용되는 범위가 있는지를 확인할 수 있다.
따라서, 프론트와 백엔드 모두에서 유효성 검사를 수행할 필요가 있다.
++추가적인 내용
react-hook-form을 사용하면 보다 쉽게 유효성 검사 form을 구성할 수 있다.
usestate로 따로 상태관리를 해주지 않아도 된다...
import { useState } from "react";
import { useForm } from "react-hook-form";
import Header from "./Header";
export function App() {
const { register, handleSubmit } = useForm();
const [data, setData] = useState("");
return (
<form onSubmit={handleSubmit((data) => setData(JSON.stringify(data)))}>
<Header />
<input {...register("firstName")} placeholder="First name" />
<select {...register("category", { required: true })}>
<option value="">Select...</option>
<option value="A">Option A</option>
<option value="B">Option B</option>
</select>
<textarea {...register("aboutYou")} placeholder="About you" />
<p>{data}</p>
<input type="submit" />
</form>
);
}위의 코드를 간단하게 설명하자면 npm i react-hook-form을 통해 설치해주고
useForm()을 import해준다. useForm()에서 register와 handleSubmit를 분해할 수 있는데 register같은 경우 html태그에 넣어주면 그 html값을 읽어 준다.
handlesubmit는 form에 onSubmit함수로 넣어준다.
section에 required : true라고 되어 있는 부분은 무조건 값이 존재해야한다는 의미이다.
자세한 내용은 https://react-hook-form.com/ 에서 공식문서를 활용하면 좋다.
👉 후기
프로젝트 진행시에 아이디나 비밀번호 같은 사용자 정보를 받는 form을 다뤄야하는 경우가 많았기 때문에 유효성검사에 대해 많이 찾아보았고 이를 프론트와 백엔드 둘다 처리를 이야기 하면서 처리해주었다. 정규식에 대한 부분도 어느정도 이해하고 적용을 해야겠다는 생각이 들었다.
👍올바른 피드백은 언제든지 환영입니다~!
