영화 검색 사이트) TroubleShooting 2 : 더보기 기능🎬

1. 문제 발생🤯

01. 영화 목록 더보기 기능 도전
지난번에 영화 검색 기능에서 사용자가 검색어를 입력하면 검색용 API로 바꿔서 데이터를 fetch하는 것을 구현했다. 하지만 영화 목록에서는 Popular에 해당하는 20개의 영화 밖에 없는 것이 아쉬워서 이를 개선해보고자 했다.
우선 카테고리를 Popular, Now Playing, Top Rated, Up Coming으로 세분화하고, 밑에 영화 더보기 버튼을 추가하여 page 수를 조절하고자 했다. 즉, url - query param을 동적으로 만듦으로써 원하는 카테고리의 영화 카드를 렌더링하는 기능 구현에 도전했다.

역시나 처음 짠 코드에서 문제가 발생했다! (이젠 놀랍지도 않다...) 영화 더보기 버튼을 "한번 " 클릭하면 해당 카테고리의 영화 "20개씩 " 더 추가가 되어야하는데, 그보다 훨씬 많은 수의 영화 목록이 렌더링 되는 것이다. 해당 카테고리가 아닌 영화들도 렌더링되는 것 같아서 (Top Rated에서 별점 3개인 영화가 같이 렌더링 되었다.) 문제를 찾아 해결해야했다.

2. 원인 추론🧐

01. console.log로 문제 파악하기

어디 내놓기 부끄러운 내자식... 처음 작성한 코드이다. 카테고리(naviLi) 에서 로직이 진행된다고 생각되어 forEach로 카테고리 요소를 하나씩 가져와 로직이 실행도록 작성해보았다. 하지만 문제가 발생한 코드이기 때문에 수정이 꼭 필요했다.
우선 문제가 어디서 발생하는지 찾는 것이 중요했다. 그래서 url과 pageNum을 console.log로 찍어보았다.

어라? 버튼 클릭 한번에 url 4개가 한번에 불러와졌다. 그래서 80개의 영화 카드가 추가된 것이었다. 카테고리에 접근하는 방법이 잘못되었음을 알 수 있었다.

02. 튜터님의 TIP
원인을 파악하고 혼자서 수정해보았지만, 또다시 실패! url_detail를 key로, pageNum을 value로 받는 객체도 만들어서 접근해보았지만, 역시나 클릭 한번에 4개의 객체가 console에 찍혔다.

접근 방법에 대한 힌트를 얻기 위해 튜터님께 도움을 요청하였다. 아래는 튜터님께서 알려주신 문제점을 정리한 것이다.

• forEach의 사용이 잘못되었다. forEach는 요소에 하나하나 접근하는 것이기 때문에, 결과적으로 4개의 값이 반환되는 것이 당연하다.
• 함수에 대한 이해가 부족하다. (🤕) 함수 호출 시점을 다시 생각해볼 것!

3. 해결 방안😇

01. 카테고리(naviLi) 접근 방법 수정 : .activeLi 클래스로 접근
사실 이 부분은 챗gpt 에게 힌트를 받았다. 도저히 forEach나 map을 통한 접근방법 밖에 생각나지 않았다.
사용자가 현재 보고 있는 영화 목록은 활성화된(.activeNavi가 적용된) 카테고리의 목록이었다. 그리고 카테고리 태그의 id값을 애초에 url_detail 값으로 설정했기에, 활성화된 카테고리의 id값을 API url에 적용하면 해당 데이터만 추가할 수 있다! 우리 gpt 진짜 똑똑하다!!!

const activeLi = document.querySelector('.activeNavi').id;

02. addPage 함수 선언과 호출 시점 수정

• addPage 함수 로직
  addPage함수는 인자값으로 현재 활성화된 카테고리의 id값과 pageNum이 필요하다. 그래야 해당 API url을 불러올 수 있다.

async function addPage(activeLi, pageNum) {
  let addedUrl = `https://api.themoviedb.org/3/movie/${activeLi}?language=ko-KR&page=${pageNum}`;

  //영화 렌더링
  const addData = await fetchMovies(addedUrl);
  renderMovie(addData);
}

*activeLi는 클릭 이벤트에서 선언

• 영화 더보기 버튼 클릭 이벤트
  버튼 클릭(addEventListener)시, pageNum이 1씩 증가(pageNum ++)하면서 추가 데이터를 불러오고, 활성화된 카테고리의 id값을 변수로 불러와서(document.querySelector('.activeNavi').id) addPage 함수의 인자값으로 넣어주어야한다.

moreBtn.addEventListener('click', () => {
  const activeLi = document.querySelector('.activeNavi').id;
  pageNum++;
  addPage(activeLi, pageNum);
});

4. 결과😎

01. 해결!

영화 더보기 버튼을 클릭하니 해당 카테고리와 pageNum이 잘 출력되고, 해당 카테고리의 영화 카드 20개가 추가되었다!

02. 최종 코드

• addPage 함수