유효성 검사
프론트는, 유저의 입력을 받아서 액션을 취하게 된다.
그런데 유저가 어떤 값을 입력할지 알수가 없다.
일전에, input에 이름을 적으라고 placeholder로 '이름'해놨더니 본인 이름이 아니라 정말로 '이름'이라고 적는 사람들이 적지 않다는 말을 듣고 충격을 받았던 적이 있다.
엥 싶기도 하지만 울엄마아빠 생각하면 그럴수도 있겠다 싶고.
여튼간 유저에게서 의도한 값을 의도한 형태로 입력받는 것은 쉽지 않은 것 같다.
입력을 프론트에서 매번 가공하는 것도 어려운 일이다.
그래서 유효성 검사 라는 것을 하게 된다.
유효성 검사는 프론트, 백 모두에서 빡빡하게 하는 것을 권한다.
위의 예시는 귀여운 편이다.
악의를 가진 유저에게서 방어하기 위해, xss 공격 등을 대비하기 위해, 그리고 서버 비용을 줄이기 위해서다.
1. 정규식
Regex라고 검색해보면 정말 많은 자료들이 나온다.
정규식을 공부해보는 것도 좋지만 기본적인 것만 알고있어도 괜찮은 것 같다.
생각보다 훨씬 더 많은 것을 할 수 있고, 정규식만 잘 알아도 자바스크립트 코드를 많이 줄일 수 있긴 하더라.
2. 자바스크립트 문법
문자열의 길이를 검사하거나, 특정 문자가 들어갔는지 확인하거나..
방법은 무궁무진하고 다양하다.
검사 유틸 함수를 만들어서 사용하는 방법도 있겠다.
const validateLen = (val, len) => {
return val.length > len;
}3. 웹 표준 API
<input required minlength="8" /> //최소글자와 필수입력을 웹 표준 api로 간편하게 사용 가능하다.라이브러리 사용
react hook form 같은 라이브러리를 사용하는 방법도 있다.
try-catch
try {
// 실행되는 모든 로직. 함수단위로 넣는다.
} catch (error) {
// 예외처리하는 코드
} finally {}try catch 예외처리
1. 개발자를 위한 예외처리
console.warn(error) //경고문구 출력 console.error(error) //에러문구 출력2. 사용자를 위한 예외처리
사용자가 볼 수 있다고 생각한다.
- 하지말자
alert(error): 에러를 그대로 노출시키기 말것.404 not Found- 이렇게 하자
- error.message; '기다려주세요. 어떤 문제가 있습니다. 다시 시도해주세요' 등의 문구 출력
3. 사용자에게 사용을 제안
- history api를 사용
history.back() //바로 뒤 페이지로 이동 history.go(-1) //-1이 매개변수로 들어가면 바로 뒤 페이지, 1이 들어가면 바로 앞 페이지로 이동 clear() //입력 초기화 element.focus() //특정 요소에 포커스를 주어 유저의 다음 행동을 유도4. 에러로그 수집
발생한 에러 로그를 수집한다.
같은 에러를 발생시키는 조건을 찾기란.. 쉽지않다. 에러 로그를 수집하면 디버깅에 유리하다.
sentry 같은 애플리케이션을 사용하는 것도 좋은 방법이다.5. 재귀호출(비추)
재귀호출하여 다시 시도하는 방법.
필요에 따라 사용하기도 하지만 추천하지 않는 방법이다.
to. 사용자...
여기서 말하는 사용자란 동료, 유저이다.
그리고 코드를 작성한 본인도 며칠 지나면 사용자가 되어버리겠지... ☺️
for 동료
function React() {
//생성자로 사용하길 바래~
if(!new.target) { //잘못사용하면
throw new Error('생성자입니다.') //(1)에러문구 던지기
throw new ReferenceError('생성자입니다.')//(2) 이런식으로 단순 에러가 아니라 레퍼런스에러로 생성 가능하다.
}
}for 유저
<input required minlength="8"/>위에서 유효성 검사할때 써먹었던 그 코드 맞다.
tag attribute를 추가하는 것만으로 필수로 적어야하는 값인지, length를 충족했는지 여부에 대해 유저에게 알려준다!
