TMDB 검색 API 적용 문제 해결

오늘은 검색 TMDB 검색 API를 활용하면서 생긴 문제와 이를 어떻게 해결했는지 작성해보고자 한다.

문제발생

기존에는 TMDB의 인기 영화 리스트에서 20개의 영화 데이터를 받아와서 검색하는 기능을 구현했었다. 그런데 조금 더 완성도 있는 기능을 만들고자 TMDB의 검색 API를 활용해 전체 영화 중에서 검색할 수 있는 기능을 추가했다.

const search = async function () {
  const searchURL = `https://api.themoviedb.org/3/search/movie?query=${searchInput.value}&include_adult=false&language=ko-KR&page=1`;
  const searchMovies = await getMoviesAPI(searchURL);

  searchMovies["results"].forEach((elem) => {
    if (!document.getElementById(elem.id)) makeCard(elem);
  });
  
  const movieTitle = document.querySelector("#movieTitle");
  const filter = movieTitle.value.toUpperCase();
  const div = document.getElementsByClassName("movieCard");

  for (let i = 0; i < div.length; i++) {
    let content = div[i].getElementsByTagName("h2")[0];
    let txtValue = content.textContent || content.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      div[i].style.display = "block";
    } else {
      div[i].style.display = "none";
    }
  }
}

위 코드는 검색창에 입력된 검색어를 기반으로 TMDB에서 데이터를 받아온 뒤, 검색 결과에 맞는 영화 카드만 화면에 표시한다.

하지만 큰 문제가 생겼다...
검색 후 검색창이 빈칸이 되면 초기 20개의 영화 리스트가 다시 보이는 것이 아니라 검색된 영화 카드들이 초기 리스트 뒤에 붙어서 화면에 출력되는 문제가 발생했다.

해결 시도

1. 검색된 카드들의 display를 none으로 설정하기

• 검색 결과를 화면에 보여준 후 검색창이 비어 있으면 검색된 영화 카드들을 display: none으로 적용하면 되지 않을까 생각했다. 그러나 이렇게 해도 문제는 해결되지 않았다.

2. 모든 영화 데이터를 처음부터 불러오기

• 초기 로딩 시 모든 영화 데이터를 불러오고 검색 기능을 적용하면 간단할 것 같았다. 그러나 이 방법은 성능 부담이 커질 가능성이 있었다.

해결 방법

해결 방법은 매우 간단했다.
검색창이 비어 있을 경우 기존의 영화 카드 리스트를 전부 초기화하고 다시 초기 20개의 영화 리스트를 불러오는 방식으로 구현하면 되었다.

if (movieTitle.value === "") {
    main.innerHTML = "";
    fetchMovies["results"].forEach((elem) => makeCard(elem));
  }

아까 그 코드 아래에 만약 검색창의 값이 비어 있다면 HTML을 비워주고 다시 초기 상태로 돌아가게 설정했다.

느낀점

문제를 너무 복잡하게 생각한 것 같다. 해결책은 단순했는데도 이것저것 불필요한 시도를 하면서 시간을 낭비했다. 오늘 경험을 통해 기본에 충실해야 한다는 말이 왜 중요한지 다시 한번 느꼈다.