[4주차] 메인페이지에서 상세페이지로 이동하기

<현재상황>

- TMDB api 를 통해 데이터를 받아서

- 메인화면에 띄워주고

- 메인화면에 보여지는 영화데이터 리스트를 영화제목을 통한 검색을 할 수 있게 함

 

<나의 task>

- 메인화면, 그리고 검색된 화면에 나오는 영화 카드를 클릭하면 -> 선택된 영화 카드 상세페이지로 이동 => 선택된 영화 상세내용을 보여주기

- 상세페이지에서 뒤로 가기 버튼 구현 

---

오늘은 이걸 해결했다.
메인화면, 그리고 검색된 화면에 나오는 영화 카드를 클릭하면 -> 선택된 영화 카드 상세페이지로 이동 

 

 

 

내가 처음에 구상했던 로직

메인 화면에서 api 영화데이터를 화면에 보여주는 movieShow.js 의

generateMovieCard 함수 맨 마지막에 handleClickCard 함수를 넣어 click 이벤트를 받아

goToMovieDetail(상세페이지로 이동하는 함수)를 호출한다.

 cardList.addEventListener("click", handleClickCard);

  // 이벤트 위임: 하위요소에서 발생한 이벤트를 상위요소에서 처리하도록 해줍니다.
function handleClickCard({ target }) {
  // 카드 외 영역 클릭 시 무시
if (target === cardList) return;

if (target.matches(".movie-card")) {
    goToMovieDetail();
    } else {
 // 카드의 자식 태그 (img, h3, p) 클릭 시 부모의= id로 접근
   goToMovieDetail();
  }
 }

 

 

goToMovieDetail 함수는 location.href 를 이용해 main-detail-page.html 주소를 넣었다.

 

모든 파일이 모듈화되어 있어 모두 적기 어렵지만, 

 

handleClickCard -> goToMovieDetail -> showClickedMovieDetail 순으로 로직을 구상하고 코딩을 했다.

 

 

 

 

문제

원하는 카드를 클릭하면 상세페이지 html 로 이동은 하지만 테스트용으로 넣어놓은 alert는 뜨지 않는다.

그리고 무한로딩이 시작된다. 로딩이 한참후면 끝나고 에러메세지가 떴다.

또한 후에 api 데이터를 띄워야 하는 데 이동 로직부터 이렇게 접근하면 안될 것 같았다.

 

 

 

 

해결방안

1) 모듈 경로 에러 : 일단 모듈화에 필요한 import, export 를 모두 체크하면 잘 넣어주고, import 시 from~ 경로를 잘 써야했다.

 

예를들어, index.html과 연결되어 있는 main.js 로 import가 되는 기능별 js 파일이라면 index.html 부터 import 하고 싶은 해당 기능 js 파일까지 어떻게 이동해야하는지 잘 생각하며 경로를 써야 한다.

import {fetchMovieData} from "../feat_js/movieShow.js";

 

2) 상세 페이지로 이동 에러 : 튜터님과의 면담을 통해서 알게 된 것은, 보통 우리가 블로그 홈 화면에서 하나의 블로그 글을 선택하게 되면 주소창에 주소 맨 뒤에 그 블로그글 id 값이 붙여진다는 것이다. 이것을 모티브로 삼아, api 데이터에서 영화 id 값을 상세페이지 주소 가장 마지막에 ${movie.id}의 형태로 a 태그 속성에 넣어줘서, 하나의 페이지에 데이터만 id값에 따라서 바껴 끼워주는 형태로 각각의 페이지로 이동할수 있도록 구현하였다. 유의할 점은 html 다음에 ?가 들어간다는 점.

href="./movie_detail_page.html?id=${movie.id}"

 

3) 무한 리로딩 에러 : 자기 자신을 계속 호출하지 않도록 하게 했다.

이미 메인 html과 연결되어 있는 main.js 에서 generateMovieCard 함수를 호출하는 코드가 있다. 그 함수 로직이 써져있는 movieShow.js 파일로 들어가면 상세페이지로 이동하라고 하는 함수가 있다. 그러면 여기서 이미, 상세페이지로 가는 로직 1번.

 

그런데, 내가 goToDetailPage라는 기능별 파일을 main_detail_page.js 에다가 호출하면서 또! 상세페이지로 이동하라고 써놔서 무한 로딩이 일어나게 된 것이다! 그래서 후자를 지워주면서 에러를 해결했다.

 

 

 

movieShow.js

import { goToMovieDetail } from "../feat_js/goto_movie_detail.js";

export const generateMovieCards = async () => {
  const movies = await fetchMovieData();

  const cardList = document.querySelector("#card_list");
  cardList.innerHTML = movies
    .map(
      (movie) =>
        `<a id="a_movie_card" href="./movie_detail_page.html?id=${movie.id}"><div class="movie_card" id=${movie.id}>
              <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}">
              <h3 id="title" class="movie_title">${movie.title}</h3>
              <p id="overview">${movie.overview}</p>
              <p id="rating">평점:${movie.vote_average}</p>
              </div></a>`
    )
    .join("");

  // cardList.addEventListener("click", handleClickCard);

  // // 이벤트 위임: 하위요소에서 발생한 이벤트를 상위요소에서 처리하도록 해줍니다.
  // function handleClickCard({ target }) {
  //   // 카드 외 영역 클릭 시 무시
  //   if (target === cardList) return;

  //   if (target.matches(".movie-card")) {
  //     goToMovieDetail();
  //   } else {
  //     // 카드의 자식 태그 (img, h3, p) 클릭 시 부모의= id로 접근
  //     goToMovieDetail();
  //   }
  // }
};

export async function fetchMovieData() {
  const options = {
    method: "GET",
    headers: {
      accept: "application/json",
      Authorization:
        "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI1NThhODc2ZTY5NDA4NWY4YTA1MmQyNjc5MTRhY2RlMiIsInN1YiI6IjYxYzNjZjY5MzdiM2E5MDBjMzQ2YzYyYyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.pPkre3BdMQtujbkqtPmW7TC_022A-ZR2M_ZShzd_kDU",
    },
  };
  const response = await fetch(
    "https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1&include_adult=false",
    options
  );
  const data = await response.json();
  return data.results;
}

 

결과

 

화질이 꺠끗하게 보이지 않지만, 카드를 누르면 상세페이지 주소가 ( http://127.0.0.1:5500/movie_detail_page.html?id=238 ) 로 나온다.

 

---

알게된점

상세페이지로 이동을 할 때는 차라리 a 태그를 이용하여 속성 href에다가 api key값을 모두 받을 수 있는 형태로 넣어주기

<a href="./index.html?id=${movie.id}"></a>