[TIL] 영화 검색 사이트 만들기 (6)

혱·2023년 10월 30일

TIL

목록 보기

18/85

추가한 기능 및 해결한 에러

review count 기능 추가

정렬버튼 클릭 후 검색하면 searchMovie 함수가 여러번 호출되어 결과 값 없을 때 alert 여러번 뜨는 에러 해결

video api 가져와서 영화에 해당하는 예고편, 티저로 이동할 수 있는 아이콘 추가

드디어 팀과제가 끝이 났다!
팀과제를 마무리하면서 어떤 점이 추가되었는지, 최종 결과물은 어떠한지 등을 정리해보고자 한다.

메인 페이지

못생긴 UI 에서 봐줄만 한 UI 로 바꾼 우리의 EGV 사이트 🎥 (메인 화면)

검색 기능도 잘 동작한다~!
(TMDB 에서 popular Movie List API를 받아오는 거라 매일 영화가 조금씩 바뀌는데, 오늘 나의 최애 영화 중 하나인 '코코' 가 생겨서 매우 기뻤다 😎 )

오른쪽 상단에 Rating, Title, Date 버튼 클릭 시 평점순, 이름순, 개봉일 순으로 정렬되는 버튼도 잘 동작한다~!
그러나 정렬버튼 클릭 시 검색이 안되는 에러가 있어서 해결하기위해 여러 시도를 해보았다.

시도 1️⃣

각 버튼 클릭 이벤트에 searchMovie() 함수를 추가해서 수정하였는데.. 여전히 문제가 있었다.
버튼을 클릭할 때마다 콜스택에 SearchMovie() 함수가 쌓여서, 검색 결과가 없으면 "검색 결과가 없습니다" alert을 클릭한 횟수만큼 출력하는 오류가😂
(정렬버튼 10번 클릭하고 검색값 없는 것 아무거나 검색하면 "검색 결과가 없습니다" 10번 뜸 😂)

export const sortMovie = function (unsorted) {
  function avg() {
    sortVoteAverage(unsorted);
    searchMovie(); //1트
  }
  voteAverage.addEventListener("click", avg);

  function title() {
    sortTitle(unsorted);
    searchMovie(); //1트
  }
  movieTitle.addEventListener("click", title);

  function date() {
    sortReleaseDate(unsorted);
    searchMovie(); //1트
  }
  releaseDate.addEventListener("click", date);
}; // 클릭할 때마다 searchMovie() 함수 호출함 (BAD)

시도 2️⃣

처음에 searchMovie함수 호출하는 부분을 지우고 sortMovie 함수를 호출하면서 searchMovie 함수를 호출하면 되지 않을까? 생각했지만..
초기화면에서는 검색이 되지만..ㅋㅋ 정렬버튼을 클릭하고 검색하면 검색이 이루어지지 않았다.. 이것도 근본적인 해결 방법이 아니었다.

export const sortMovie = function (unsorted) {
  function avg() {
    sortVoteAverage(unsorted);
  }
  function title() {
    sortTitle(unsorted);
  }
  function date() {
    sortReleaseDate(unsorted);
  }
  searchMovie(); // 2트
  // 정렬 버튼 클릭시 검색 안 이루어짐  (BAD)
  voteAverage.addEventListener("click", avg);
  movieTitle.addEventListener("click", title);
  releaseDate.addEventListener("click", date);
};

방법을 강구하다가 조원 분이 튜터님께 질문해서 문제를 해결할 수 있었다.
sortMovie() 함수에서 해결해보려고 하니 답이 바로 안나왔던 것.
문제는 searchMovie() 함수에서 해결할 수 있었다.

해결 ✅

Before

const movieCards = document.querySelector(".movie-cards");
const searchValue = document.getElementById("search-value");
const searchBtn = document.querySelector(".search-btn");


export function searchMovie() {
  const movieCard = movieCards.querySelectorAll(".movie-card"); // 원래 여기

  function handleSearch(e) {
    e.preventDefault();
    const searchMovieList = [];
    let searchedValue = searchValue.value.toLowerCase();

    // 생략
  }
  searchBtn.addEventListener("click", handleSearch);
}

After

const movieCards = document.querySelector(".movie-cards");
const searchValue = document.getElementById("search-value");
const searchBtn = document.querySelector(".search-btn");

export function searchMovie() {
  function handleSearch(e) {
    const movieCard = movieCards.querySelectorAll(".movie-card"); // 여기로 바꿈

    e.preventDefault();
    const searchMovieList = [];
    let searchedValue = searchValue.value.toLowerCase();
	
    // 생략
  }
  searchBtn.addEventListener("click", handleSearch);
}

movie-card 라는 클래스명을 갖는 요소들을 querySelectorAll로 가져오는 부분이 원래 hadleSearch() 함수 밖에 있었는데 handleSearch() 함수 안으로 넣기만 하면 되는 문제였다. 😇 정렬 버튼 클릭 시 innerHTML = ""; 로 다 지우고 정렬된 요소가 들어있는 배열로 addMovie() 를 다시 돌면서 그리게 되는데, 그 이후에 검색 버튼을 클릭하면 실행되는 handleSearch() 함수 안에 다시 movie-card 들을 querySelectorAll 로 다시 가져와서 검색해야 했던 것.
제출 당일까지 에러 해결하며 완성도를 높여나갈 수 있어서 좋았다.

상세페이지

영화 정보 (Detail api)

캐스팅 정보 (Credit api) / 비디오 정보 (video api)

유튜브 버튼을 클릭하면 해당 영화의 티저가 있는 유튜브 링크로 이동한다.

주연 배우 3명의 이미지, 이름, 캐릭터 이름을 가져와서 뿌려주었다.

리뷰 등록
삭제 모달창

📑 회고

개인 과제를 응용하여 팀 과제를 진행해서 더 재미있었고 조원들의 개인과제 중 내 개인과제를 디벨롭하여 팀 과제를 완성하는 거였어서 완성도에 대한 욕심도 생기게 되었다.

코딩을 하면서 찐재미를 느낀적이 많지는 않았는데, 이번에는 주말까지 반납하면서 팀과제를 완성할 정도로 재미가 붙었던 것 같다. 그래서 누가 시킨 것도 아니지만,, 이 기능도 추가해볼까? 하면서 도전해보고 적용할 수 있었다.

대충 넘어갈 만한 에러들도 끝까지 집요하게 해결하여 마지막까지 완성도를 높인 게 만족스럽다. 조원들의 도움이 없었다면 쉽지 않았겠지.

기능 구현도 중요하지면 가독성 있게 코드를 작성하는 것도 중요하므로 refactoring을 시도한 점이 의미있었다. 물론 아직 더 다듬을 부분이 많지만.