[유튜브 뮤직 클론코딩] 7. 로그인 시 발생할 수 있는 에러처리

사실 에러처리는 전에도 이미 해놨었다.

하지만 그때는 간단한 메세지를 alert 함수로 표현하는 식이어서 마음에 들지 않았다.

가능하면 alert는 사용하지 않는 것이 사용자 경험에 좋다고 들었기 때문이다.

 

그래서 로그인 화면에 에러메세지를 위한 공간을 만들고

평소에는 안보이게 해두다가 에러가 뜨면 보이도록 만들었다.

 

ShowErrorMessage 함수를 만들어서 에러메세지를 표시하도록 했다.

 

const ShowErrorMessage = function(errorMessage) {
	const error_msg_div = document.getElementById("error-msg");
	error_msg_div.style.visibility = "visible";
	error_msg_div.textContent = errorMessage;
};

다른 스타일은 다 설정해두고, visibility 속성만 바꾸도록 간단하게 만들었다.

 

다음으로 서버에서 응답으로 보내는 메세지를 바꿔주었다.

 

이런식으로 반환할 객체에 msg 프로퍼티 값을 넣어주어 반환했다.

 

테스트를 해보았다.

 

잘된다