자바스크립트 뉴스 웹페이지 예외 처리를 해보자

 

 안녕하세요. 진득 코딩입니다.

 

 지금까지 뉴스 웹 페이지를 만드는 과정은 웹 페이지가 정상적으로 작동할 때만을 고려해서 만들었습니다.

 

 에러가 생겼을 때 개발자는 개발자 툴을 통해서 에러 상황을 알 수 있지만 유저 입장에서는 이러한 상황을 알 수 없습니다.

 

 이렇게 에러에 대해서 유저를 고려해서 필요한 것이 에러 핸들링입니다.

 

 이번 시간에는 에러 핸들링하는 법에 대해 알아보도록 하겠습니다.

 

try-catch문

 

 

 에러 핸들링을 하는 방법으로 try-catch문이 있습니다.

 

 try-catch문에 대해 알아보기 위해 에러가 발생하는 상황부터 알아보도록 하겠습니다.

 

 위와 같이 그냥 문자열만 써놓으면 어떻게 될지 생각해 봅시다.

 

 

 위와 같은 그냥 문자열만 써놓으면 당연히 에러가 발생하게 됩니다.

 

 

 이때 해당 문구를 try문에 넣고 catch문에 try에서 오류가 생겼을 때의 대처 방안을 써두면 에러를 핸들링할 수 있습니다.

 

 위 코드에서는 try문에서 에러가 발생한다면 console 출력이 error 메세지와 함께 출력될 것으로 예상됩니다.

 

 

 예상한 대로 "내가 잡은 에러는"이라는 문자열과 함께 error 메세지가 출력된 것을 확인할 수 있습니다.

 

 

 try-catch문에서 throw를 사용하면 강제로 에러를 발생시킬 수 있습니다.

 

 if문을 사용해서 weight라는 변수가 30 이하가 되면 강제로 error를 발생시킬 수 있습니다.

 

 

 위처럼 weight가 29가 되어 if문 안에 들어가 throw를 만나게 되자 강제로 error가 발생되어 catch문이 실행된 것을 확인할 수 있습니다.

 

 

 또한 try문은 에러가 발생하게 되면 끝나게 됩니다.

 

 위와 같이 throw 위아래로 console을 출력하도록 코드를 작성하였습니다.

 

 

 

 이때 if문 위에 있는 하하하라는 문자열은 출력되었지만 if문 밑에 있는 console.log는 실행되지 않은 것을 확인할 수 있습니다.

 

news 웹 페이지에서 에러 핸들링 하기

 

 

 먼저 뉴스 웹페이지의 에러 핸들링을 위해 API 문서로 가서 error 메뉴에 있는 부분을 살펴보면 에러를 핸들링하기 더 좋습니다.

 

 코드가 200일 때는 성공적으로 요청이 된 것이며 이외의 코드들은 에러가 난 것을 확인할 수 있습니다.

 

 

 API를 가져올 때의 에러 핸들링을 위해 fetchNews안에 있는 코드에 try-catch문을 넣어주었습니다.

 

 if문을 사용하여 status가 200일 때 if문을 사용하여 검색 결과가 없을 때는 throw를 사용하여 검색 결과가 없다는 메세지를 발생시키고 그렇지 않으면 원래 코드가 실행되도록 하였습니다.

 

 status가 200이 아니면 throw를 이용해 오류 메세지를 catch문으로 보내주었습니다.

 

 

 catch문이 실행되었을 때 render() 함수 대신 실행되는 errorRender() 함수입니다.

 

 errorHTML이라는 변수에 <div> 태그를 남아서 news-board에 출력해 주었습니다.

 

 

 errorHTML에 사용한 화면은 bootstrap에서 Components 안에 있는 Alerts에 있는 danger 부분에 있는 화면을 사용하였습니다.

 

이렇게 status가 200이 아닐 때와 검색 결과가 없는 경우의 에러 핸들링을 완료하였습니다.

 

 

 위와 같이 검색 결과가 아무것도 없는 경우에는 검색 결과가 없다는 alert 화면이 출력되게 됩니다.

 

---

 

 이번 시간에는 try-catch문을 이용하여 에러 핸들링하는 방법에 대해 살펴보았습니다.

 

 에러 핸들링은 개발할 때는 티도 안 나는데 고려해야 할 부분이 많기 때문에 지나치기 쉽지만 이러한 에러 핸들링까지 고려하는 개발자가 정말 실력 있는 개발자라고 생각합니다.

 

 프로그램을 만들 때 꼭 고려하여 처리해 두는 것을 추천합니다.

 

 이번 포스팅은 여기까지입니다.

 

 궁금하신 사항이나 문의하실 사항은 댓글로 남겨주시면 열심히 답글 달도록 하겠습니다.

 

 끝까지 봐주셔서 감사합니다.😊