유효성 검사
사용자의 입력 값이 유효한지 검증하는 것
ex) 이메일인 경우
- 사용자의 입력이 이메일 포맷에 맞는지 검증한다.
- 이메일 포맷이 맞는 경우 그때서야 서버와 통신을 한다.
=> 서버 비용 절감 가능
방법
- 정규식
- JS 문법
- 웹 표준 API
웹 표준 API를 활용한 유효성 검사
form 태그 안에 input 태그를 사용하고 type, minlength, required 등의 속성을 활용할 수 있다.
<form>
<div>
<label for="username">Username</label>
<input type="text" id="name" name="username"/>
</div>
<div>
<label for="password">Password</label>
<input type="password" id="pass" name="password" minlength="8" required/>
</div>
<input type="submit" value="sign in"/>
</form>정규식
Regex password validation 을 검색하면 유효성 검사에 필요한 정규식을 찾아볼 수 있다.
프론트엔드에서만 유효성 검사를 하면 조작될 수 있는 가능성이 있기 때문에 가능한 모든 곳에서 처리해야 한다. (프,백 모두에서 처리)
schema, react-hook-form 등을 활용하는 것도 좋다!
try ~ catch
예외 처리에 쓰임
예외 처리를 해야 하는 이유
개발자, 프로그래머가 모든 에러를 예측하여 처리하기가 어렵고 거의 불가능하기 때문이다.
try {
// 예외가 예상되는 코드 혹은 발생시킬 코드
} catch(error){
/*
예외를 처리하는 코드
1. 개발자를 위한 예외처리
2. 사용자를 위한 예외처리
3. 사용자에게 사용을 제안
4. 에러 로그 수집
*/
// 1. 개발자를 위한 예외처리 => 동료 개발자에게 제안을 한다. TDZ
console.error(error);
console.warn(error);
// 2. 사용자를 위한 예외처리 => 사용자가 보기 때문에 친절하게 작성하기
alert(error) // X => 에러를 그대로 보여주는건 좋지 않음!
alert("잠시만 기다려주세요, ~~ 문제가 있습니다. 다시 시도해주세요") // O
// 3. 사용자에게 사용을 제안
history.back()
history.go('안전한 어딘가로..')
clear()
element.focus() // 어딘가로 이동을 시켜서 다시 한 번 사용자에게 알려주기
// 4. 에러 로그 수집
sentry.전송() // sentry는 에러를 수집하는 도구이다
// 5. 비추천하지만 필요에 따라 사용되는 경우
재귀 호출
} finally {
// 데이터 분석을 위한 로그
}사용자에게 알려주기
여기서 사용자란?
- 동료 개발자
- 내가 만든 앱을 이용하는 사용자 (내가 만든 라이브러리나 실제 앱)
직접 에러 만들기
function React(){
if(!new.target){
// throw new Error('생성자입니다!');
throw new ReferenceError('생성자입니다!') // new 키워드를 쓰지 않은 경우 참조 에러 발생하도록
}
}
React(); // ReferenceError: '생성자입니다!'사용자에게 알려주기
: 문제가 생긴 부분에 포커스 효과 넣기
모든게 새롭고 재밌는 프론트엔드 새싹