유효성 검사

• 사용자의 입력 값이 유효한지 검증하는 것
• 사용자와 상호작용 ⇒ 사용자의 입력을 받아 처리
• 서버와의 통신 비용 절약
• 방법
  • 정규식
  • JavaScript 문법
  • 웹 표준 API
  • 라이브러리 활용하기 (react-hook-form)
• 할 수 있는 모든 곳에서 처리하는게 좋음
  • 사용자의 입력 ⇒ 클라이언트(HTML, JavaScript) ⇒ 벡엔드 처리

try ~ catch

• 버그, 모든 에러를 예측하고 처리하기가 어렵고 거의 불가능에 가깝기 때문에 사용
• try : 예외가 예상되는 코드 혹은 발생시킬 코드
• catch : 예외를 처리하는 코드
• 모든 로직에 try ~ catch를 포함 시키기
• try, catch는 함수 단위로 사용하고, 사용되지 않는 경우 그 함수가 처리되는 부분에서만 사용
• catch에 개발자를 위한 예외처리, 사용자를 위한 예외처리, 사용자에게 사용을 제안하는 로직 포함 시키기

function handleSubmit(input) => {
	try {
		//..some code
	}

	catch(error) {
	// 1. 개발자를 위한 에러 처리
	console.error(error);

	// 2. 사용자를 위한 예외처리 => 사용자가 볼 수 있다고 생각
	alert("잠시만 기다려주세요, OO문제가 있습니다.");

	// 3. 사용자에게 사용을 제안
	history.back();
	history.go("안전한 페이지");
	clear(); // 초기화
	element.focus(); // 어딘가로 포커스 주기

	// 4. 에러 로그 수집
	sentry //  에러 로그 수집 도구 

	// 5. 비추천하지만 필요에 따라 추천
	// 재귀 사용
	handleSubmit(input);
	}
	
	finally {
		// 데이터 분석을 위한 로그
	}
}

사용자에게 알려주기

• 커스텀 에러 생성하여 알려주기

function React() {
	// 생성자로 사용하기 원할때
	if(!new.target) {
		throw new ReferenceError("생성자 입니다!");
	};
}

React(); // Reference Error "생성자 입니다!"
new React();