💡유효성 검사( Validation )
→ 데이터가 특정 기준이나 규칙을 충족하는지 확인하는 과정이다.
→ 데이터의 정확성과 신뢰성을 보장한다.
예를 들어, 회원가입을 할 때 아이디 중복검사를 하거나
비밀번호를 설정할 때 어떠한 규칙(대문자 필수, 특수문자 필수 등)에 따라 작성해야 되는 등 다양한 것이 있다.
📌유효성 검사의 유형
1. 클라이언트 측 유효성 검사
→ 사용자의 브라우저에서 실행되어 데이터를 입력할 때 즉시 피드백을 제공한다.
- 장점 : 서버의 부하를 줄일 수 있다.
- 단점 : 브라우저의 개발자 도구(F12)를 사용하여 우회할 수 있어, 보안에 취약하다.
2. 서버 측 유효성 검사
→ 서버에서 데이터를 처리하기 전에 검사하여 데이터베이스에 저장되기 전에 데이터를 검증한다.
- 장점 : 브라우저에서 우회가 불가능해 보안이 강화된다.
- 단점 : 서버의 부하가 증가할 수 있다.
★자바스크립트에서의 유효성 검사 예시
document.getElementById('registrationForm').addEventListener('submit', function(event) {
event.preventDefault(); // 기본 제출 동작 방지
document.getElementById('usernameError').textContent = '';
document.getElementById('emailError').textContent = '';
document.getElementById('passwordError').textContent = '';
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
// 유효성 검사
let isValid = true;
// 사용자 이름 유효성 검사
if (username.length < 3) {
document.getElementById('usernameError').textContent = 'Username must be at least 3 characters long.';
isValid = false;
}
// 이메일 유효성 검사
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailPattern.test(email)) {
document.getElementById('emailError').textContent = 'Please enter a valid email address.';
isValid = false;
}
// 비밀번호 유효성 검사
if (password.length < 6) {
document.getElementById('passwordError').textContent = 'Password must be at least 6 characters long.';
isValid = false;
}
// 모든 유효성 검사를 통과한 경우
if (isValid) {
alert('Registration successful!');
}
});
위의 코드를 보면
사용자 이름 길이는 최소 3자보다 커야되고 비밀면호는 최소 6자보다 커야 되고
이메일은 정규표현식을 사용하여 올바른 이메일 형식인지 확인한 후
성공메시지를 보내는 형식이다.
나의 생각
유효성 검사란 데이터를 잘못 삽입하는 것을 방지하기 위해
미리 클라이언트(브라우저) or 서버에서 검사하는 것이라고 생각한다.
LIST
'CS 면접 준비' 카테고리의 다른 글
async와 await (1) | 2025.01.23 |
---|---|
정규 표현식 이란? (0) | 2025.01.22 |
인증과 인가 란? (0) | 2025.01.21 |
싱글톤이란? (0) | 2025.01.21 |
쿠키와 세션이란 ? (0) | 2025.01.21 |