TIL.Validation

Validation

로그인을 구현하면서 유효성 검사에 대해 알게되었다. 아직 개발 어린이인 나는 유효성검사를 알지 못했고 이번 기회에 유효성 검사에 대해서 공부하게 되었다! 공부하면서 알게된걸 오늘 끄적여 볼 생각이다.

먼저 유효성 검사란?

• 사용자가 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입력 되었는지 검증하는 것을 말한다.
• 사용자가 실수로 유효하지 않은 데이터 값을 입력하면 부적합하다고 판단하여 다시 폼 페이지로 되돌려 사용자에게 오류가 있음을 알려준다.

유효성 검사가 필요한 이유

• 보안공격!, 잘못된 데이터, 사용자로의 실수로 예상 가능한 오류등을 방지할 수 있다.
• 다양한 사용자가 폼 데이터를 입력해도 폼 페이지의 동일한 입력 양식과 형태를 유지할 수 있다.

그럼 유효성 검사는 백에서? 프론트에서?

Q. 백엔드에서 디비에 넣기 전에 할건데 프론트에서 굳이 해야할까?

Q. 프론트에서 했으면 백엔드에서는 안해도 되는걸까?

✅결론은 프론트와 백엔드 모두에서 해주어야 한다

프론트에서 JS로 유효성 검사를 하는 이유는 사용자에게 알려주기 위한 UX 측면이 강하다. 물론 불필요한 요청을 서버로 보내지 않아도 되니깐 하지만 프론트에서만 유효성 검사를 하는것은 보안상 위험하기 때문에, 백엔드에서도 체크해주는 것이 필수이다!

유효성 검사 처리 방법

• 사용자가 폼 페이지에 입력한 데이터 값이 서버로 전송되기 전에 웹 브라우저에서 검증하는 방법으로는 기본 유효성 검사와 데이터 형식 유효성 검사가 있다.

1. 기본 유효성 검사 : 폼 페이지에 입력된 데이터 값이 존재 유무를 검사한다.
2. 데이터 형식 유효성 검사 : 폼 페이지에 입력된 데이터 값이 특정 패턴에 적합한지 여부를 검사하며 정규 표현식을 사용한다.

기본 유효성 검사

• 기본 유효성 검사는 사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이 있는지 없는지 확인하고 데이터 길이, 숫자 등 기본적인 것이 맞는지 검사한다.
• 폼 페이지의 입력 데이터 길이를 확인하여 데이터의 유무를 검증하는 것은 기본 유효성 검사에 해당한다.

데이터 형식 유효성 검사

• 사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이 특정 형태에 적합한지 검사하기 위해 정규 표현식을 사용하는 방법으로 기본 유효성 검사보다 복잡하다.

폼 페이지 유무 검사

<script>
funtion checklogin(){
	var form = document.loginForm;
    if(form.id.value == ""){   /* 아이디가 입력되었는지 검사한다. 아이디가 입력되지 않으면 오류 메시지를 출력하고 해당 입력 항목에 커서를 놓이게 됨 */
    alert("아이디를 입력해주세요")
    form.id.focus();
    return false;
    } else if (form.password.value == "") { /* 비밀번호가 입력되었는지 검사한다. 비밀번호가 입력되지 않으면 오류 메시지를 출력하고 해당 입력 항목에 커서가 놓이게 됨 */ 
    alert("비밀번호를 입력해주세요");
    form.password.focus();
    return false;
    }
    form.submit(); /* 폼 페이지에서 입력한 데이터 값을 서버로 전송함 */
} /* 자바스크립트로 폼 페이지에 입력 항목의 데이터를 검사하는 핸들러 함수 checkLogin()을 작성함 */
</script>