유효성 검사.
개인 과제들을 경험하며 데이터 형태에 대한 오류들이 지속적으로 나타났다.
undefined를 알아들을 수 없습니다.
[0]이 뭔가요.
프로필 사진이 엑스박스가 떠요.
이 이유는 바로 데이터의 유효성을 검사하지 않았기 때문이었다.
생각과 다른 데이터들을 가지고 작업을 하려고 하니 오류가 나오는 것이었다.
그렇기 때문에 사용하고자 하는 데이터 형식, 구조, 자료형, 값과 다른 데이터가 들어오면 안내를 해 줄 필요가 있다. 그것이 유효성 검사이고 여러가지 예시들이 있다.
이메일로 회원가입 할 때.
이메일 형식이 맞지 않다면 막아야 한다.
그렇지 않으면 회원가입 시 에러가 발생한다.
기본적으로 HTML에서 <input type="email"> 을 사용하면 @에 대한 유효성검사를 진행한다.
파이어베이스에서 제공해주는 유효성 검사가 있기 때문에 try catch로 잡아주면 된다.
비밀번호 제한.
비밀번호의 길이, 형태를 정해서 받고싶을 때가 있다.
보안과 관련된 문제이므로 에러를 떠나 중요하다.
이때,HTML에서 <input type="password"> 를 사용해도 유효성 검사가 진행되지는 않는다.
(type="password" 를 지정하면 input 되는 비밀번호를 * 으로 치환하여 가려준다.)
<input type="password" minLength="6"> 를 이용하면 최소길이를 지정 할 수 있다.
그 외에는 입력값을 받아 포함여부를 파악해야 한다.
파이어베이스에서 제공해주는 유효성 검사가 있기 때문에 try catch로 잡아주면 된다.
image input 유효성 검사
이미지를 업로드 할 때.
이미지를 업로드 할 곳에 메모장을 업로드하면 파일형식이 맞지 않다고 막아줘야 한다.
그렇지 않으면 나중에 <image> 안에 업로드한 파일의 URL데이터를 src=""로 제공하였을 때 엑스박스가 나타난다.
해결방법은 많다.
const img_ref = React.useRef();
function onFileChange(e) {
img_ref.current.innerText = null;
...
const correctForm = /(.*?)\.(jpg|jpeg|gif|bmp|png)$/;
if (e.target.files[0].size > 3 * 1024 * 1024) {
img_ref.current.innerText = "파일 사이즈는 3MB까지만 가능합니다.";
return;
} else if (!e.target.files[0].name.match(correctForm)) {
img_ref.current.innerText = "이미지 파일만 업로드 가능합니다.";
return;
}
...
}
...
<span style={{ color: "red", fontSize: ".5rem" }} ref={img_ref} />파일의 사이즈를 제한하고, 이미지 파일형식을 이름에서 가져왔다.
물론...
이 경우 파일 이름에검사못하지롱.jpg.text라고 넣는 변태들은 막을 수 없다.
e.target.files[0].name.split('.').pop()
이러면 파일명의 마지막.이후의 확장자명을 가져와서 뚝딱할 수 있지 않을까 싶다.
정말루다가 유효성 검사의 효율성과 완성도는 파고들 수록 어려웁다.
