[TIL] 24.01.16

[구현한 것]

• main page에서 해당 영화 더보기 버튼 클릭 시 ranking page로 이동 후 해당하는 영화의 다음 페이지부터 보여주기

[코드]

let currentPage = 2;

const url1 = `https://api.themoviedb.org/3/movie/popular?language=ko-KR&page=${currentPage}`;
const url2 = `https://api.themoviedb.org/3/discover/movie?language=ko-KR&region=KR&with_original_language=ko&page=${currentPage}`;
const url3 = `https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=ko-KR&sort_by=revenue.desc&with_genres=28&page=${currentPage}`;
const url4 = `https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=ko-KR&sort_by=revenue.desc&with_genres=10749&page=${currentPage}`;
const url5 = `https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=ko-KR&sort_by=revenue.desc&with_genres=14&page=${currentPage}`;
const url6 = `https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=ko-KR&sort_by=revenue.desc&with_genres=16&page=${currentPage}`;

const buttonNumber = localStorage.getItem('buttonNumber');

window.onload = function () {
  if (buttonNumber === '1') {
    mainMovie(url1);
  } else if (buttonNumber === '2') {
    mainMovie(url2);
  } else if (buttonNumber === '3') {
    mainMovie(url3);
  } else if (buttonNumber === '4') {
    mainMovie(url4);
  } else if (buttonNumber === '5') {
    mainMovie(url5);
  } else if (buttonNumber === '6') {
    mainMovie(url6);
  }
};

function mainMovie(url) {
  fetch(url, options)
    .then((response) => response.json())
    .then(({ results }) => {
      results.forEach((movie) => {
        createCard(movie);
      });
      currentPage++;

      const moreMovies = document.querySelector(".more");
      moreMovies.addEventListener("click", loadMoreMovies);
    })
    .catch((err) => {
      console.error(err);
    });
}

페이지 이동을 하게 되면 해당 id를 가진 요소를 찾을 수가 없어서
함수가 실행이 되지 않는다.

해당하는 버튼 별 url이 달라서 어떤 버튼을 눌렀을 때 어떤 url이 실행되도록 설정을 해주어야하는데 나는 로컬스토리지에 해당 버튼을 눌렀을 때 [i]를 문자로 변환해서 저장해주고,

저장된 문자를 보고 해당하는 url을 실행되도록 해주었다.

[배운점]

페이지 이동하고 실행되게 하는게 매우매우 복잡하다는 생각이 많이 들었다. 그래도 많은 분들이 도와주시고 알려주셨지만!
어떻게 하는지 머리로는 설명이 되는데 코드로 작성하는게 너무 힘들었다.
고민 끝에 로컬스토리지에 저장하면 남으니 그걸 가지고 실행시켜보자는게 다행히도 구현이 되었다.

아직 코드를 보면 너무 복잡하고 줄일 수 있어보이는 부분이 많은 거 같은데 차근차근해봐야겠다.