✔️오늘 한일!
- 팀프로젝트 코드리뷰
- EDR, API 특강 / JS 특강 수강
- 폴더트리 정리
예외처리
로그인을 안했을 경우 리뷰작성을 하면 영화 디테일 페이지 API랑 다른 요소들이 undefined로 출력되는 현상이 생겼다. 팀원들과 논의해보면서 로그인을 하는 과정과 리뷰작성 부분에는 간단하게 유효성 검사를 해뒀지만 예외처리를 안해둬서 로컬스토리지에 값이 없는 경우 발생하는 문제라고 생각되어 로그인을 안했을때 예외처리를 위한 작업을 해주었다.
//로그인을 안했을 때의 예외처리를 위한 작업
const savedReview = localStorage.getItem("review");
const userId = JSON.parse(localStorage.getItem("login"));
let currInfo = null;
if (userId === null) {
currInfo = [];
} else {
currInfo = userId.filter((e) => e.id === currUser);
}
userId가 null값인 경우 최근 접속자 정보를 빈배열로 반환하고 로컬 스토리지에 최근접속자 정보와 일치하는 userId가 있는 경우 해당 id를 filter() 메소드로 가져다주는 방법으로 코드를 작성했다.
function movieReview(event) {
event.preventDefault();
const reviewInput = document.querySelector("#review-input");
//예외처리가 꼭 필요함.
if (currInfo.length === 0) {
alert("로그인 후 이용해 주세요.");
reviewInput.value = "";
return;
}
if (reviewInput.value) {
const reviewObj = {
movieId: movieId,
id: currInfo[0].id,
uid: currInfo[0].uid,
rid: Date.now(),
review: reviewInput.value,
like: 0,
disLike: 0,
};
reviewLists.push(reviewObj);
reviewSave();
printReview(reviewObj);
reviewInput.value = "";
}
}리뷰를 출력해주는 함수인 printReview 함수 안에 currInfo 배열의 길이가 0인 경우 alert처리와 함께 댓글 작성칸을 초기화한 뒤 리턴해주는 방식으로 예외처리를 해줬더니 상세페이지에 undefined가 출력되는 현상이 해결되었다.
팀원분이 튜터님께 여쭤보니 해당 오류를 해결하지 않을 경우 다른 코드에서도 오류가 발생할 수 있다고 하셔서 꼭 처리를 해줘야 한다고 하셨다고 한다.
팀원들과 전체코드를 리뷰해보면서 함수의 실행순서, 기능의 작동원리, 왜 해당 메소드를 사용했는지 서로 설명하고 질문하면서 많이 배울 수 있는 기회였었다.
아직도 자바스크립트가 많이 어렵지만 미니프로젝트를 했을때보다는 훨씬 나아진것 같다.
코드를 작성할때 최대한 함수로 구현하려고 노력했고 필수 구현사항이 아니더라도 원하는 기능을 구현하기 위해서 구글링도 열심히 해보고 팀원과 코드를 작성하면서 오류도 수정해보고 하니 혼자 하는 것보다는 확실히 더 도움이 됐다.
특히 코드리뷰가 많은 도움이 되는 것 같다. 다른분에게 설명해주면서 내 스스로도 코드 작동 원리에 대해 한번 더 정리를 하고 이해할 수 있고 다른분의 설명을 들으면서 몰랐던 것을 알아갈 수 있어서 좋았다.
