[영화 검색 사이트] - 영화 카드 사이를 누르면 오류 메시지가 뜬다?!

문제 상황

때는 바야흐로 개인 프로젝트 제출 바로 전날 밤...

모든 기능을 구현하긴 했지만 혹시 모르는 오류를 확인하기 위해 이것저것 눌러보고 있었다.

 

우연히 영화 카드 사이를 눌러봤는데 콘솔창에 에러 메시지가 뜨는 것을 확인하였다.

 

아무리 생각해도 문제의 원인을 모르겠어서 팀원분께 도움을 요청했다.

같이 차근차근 코드를 살펴본 결과, 오류를 손쉽게 해결할 수 있었다!

 

어떻게 해결했는지 밑에서 함께 알아보자.

 

 

문제 원인

문제의 원인은 모달창을 보여주는 코드 내의 예외 상황 처리 코드에 있었다.

// 예외 상황 처리
if (!movieCard) {
  $modal.style.display = "none";
  document.body.style.overflow = "unset";
}

 

movieCard가 없을 때 2개의 코드를 실행하고 마지막에 return 값을 반환하지 않았기 때문이다.

하하 생각보다 어이없는 이유로 발생하는 오류였다.

 

 

해결 과정

해결 과정은 매우 간단하다.

해당 코드에 return만 입력해주면 된다!

// 예외 상황 처리
if (!movieCard) {
  $modal.style.display = "none";
  document.body.style.overflow = "unset";
  return;
}

 

 

결과

이제 영화 카드 사이를 눌러도 에러 메시지가 뜨지 않는다!!!