2024-04-23 자바스크립트 개인과제 2일차

영화 API 받아와 필요한 정보만 카드 형태로 출력시키기

 

전체 코드

// 영화정보 api

const options = {
  method: "GET",
  headers: {
    accept: "application/json",
    Authorization:
      "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI2YzhlYWZkZjBlMjA3NGVhMjBjYzQ4YWQ4OTdkOTNiMCIsInN1YiI6IjY2MjYyNTc3MjU4ODIzMDE3ZDkyYWMyZiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.VvbVqzpDWzP2q2o0zUPPI46p6l9xcHP84V4FVLj983k",
  },
};

fetch(
  "https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1",
  options
)
  .then((response) => response.json())
  //   .then((response) => console.log(response))
  .then((response) => {
    console.log(response.results[0].title);
    const images = {
      method: "GET",
      headers: {
        accept: "application/json",
        Authorization:
          "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI2YzhlYWZkZjBlMjA3NGVhMjBjYzQ4YWQ4OTdkOTNiMCIsInN1YiI6IjY2MjYyNTc3MjU4ODIzMDE3ZDkyYWMyZiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.VvbVqzpDWzP2q2o0zUPPI46p6l9xcHP84V4FVLj983k",
      },
    };

    fetch("https://api.themoviedb.org/3/configuration", options)
      .then((response) => response.json())
      .then((data) => {
        // 이미지 api
        console.log(data);
        const imageBaseUrl = data.images.base_url;
        const imagePosterSize = data.images.poster_sizes[4];
        const imageUrl = imageBaseUrl + imagePosterSize;
        document.getElementById("movie-poster").src =
          imageUrl + response.results[0].backdrop_path;

        let myArray = [];

        response.results.forEach((e) => {
          let abcd = {
            title: e.title,
            overview: e.overview,
            poster_path: e.poster_path,
            vote_average: e.vote_average,
            id: e.id,
          };

          myArray.push(abcd);
        });

        // map 메서드를 사용하여 각 배열 요소에 대해 카드를 생성하고 템플릿 문자열을 반환합니다.
        let temp_html_array = myArray.map((item) => {
          return `<div class="movie-card" id="${item.id}">
        <img src="${imageUrl}${item.poster_path}" id="movie-poster" />
        <p class="movie-title">${item.title}</p>
        <p class="movie-overview">${item.overview}</p>
        <p class="movie-vote">rating: ${item.vote_average}</p>
      </div>`;
        });

        // 반환된 템플릿 문자열들을 조합하여 최종 결과를 얻습니다.
        let temp_html = temp_html_array.join("");

        // DOM에 카드를 추가합니다.
        document.getElementById("card-section").innerHTML = temp_html;
        // 카드 클릭 ID 출력
        // 각 카드에 대해 이벤트 리스너를 추가합니다.

        myArray.forEach((item) => {
          const card = document.getElementById(item.id);
          card.addEventListener("click", () => {
            alert(`영화의 ID는 ${item.id}입니다`);
          });
        });

        console.log(myArray);
      })
      .catch((err) => console.error(err));
  })
  .catch((err) => console.error(err));

 

1. GET 요청을 통해 API를 호출한다.

2. fetch를 사용하여 영화정보에 GET 요청을 보낸다.

3. 응답데이터를 json 형식으로 변환 후 then 메서드로 전달한다.

const options = {
  method: "GET",
  headers: {
    accept: "application/json",
    Authorization:
      "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI2YzhlYWZkZjBlMjA3NGVhMjBjYzQ4YWQ4OTdkOTNiMCIsInN1YiI6IjY2MjYyNTc3MjU4ODIzMDE3ZDkyYWMyZiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.VvbVqzpDWzP2q2o0zUPPI46p6l9xcHP84V4FVLj983k",
  },
};

fetch(
  "https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1",
  options
)
  .then((response) => response.json())
  .then((response) => console.log(response))
  .catch((err) => console.error(err));

 

4. then 메서드로 전달받은 데이터에서 모든 API가 필요하진 않고 results라는 객체 안에 있는 title, overview, poster_path, vote_average, id 프로퍼티만 필요하니, 임의의 지역변수 abcd를 만든 후 여기에 객체타입으로 정보를 key: value 형태로 받아온다.

그런데 객체가 20여 개 정도 필요하니, forEach 반복문을 통해 배열이 끝날 때까지 반복시킨다.

그런데 forEach는 배열을 순회만 하고 값을 반환하지는 않으니, 값을 반환시켜주어야 하는데 forEach 내부에서 이렇게 만들어진 배열을 HTML 문서에 차곡차곡 카드 형태로 데이터를 보내서 만들어야 하지만 forEach 안에 map 메서드를 사용하기 어렵다.

따라서 abcd라는 지역변수를 외부에서 사용할 수 있도록 myArray라는 빈 배열을 만들고 push 메서드를 통해 빈 배열로 객체를 반복해서 밀어 넣는다.           

let myArray = [];

        response.results.forEach((e) => {
          let abcd = {
            title: e.title,
            overview: e.overview,
            poster_path: e.poster_path,
            vote_average: e.vote_average,
            id: e.id,
          };

          myArray.push(abcd);
        });

5. 임의의 변수 temp_html_array를 만든 후 여기에 값을 반환해줄 것이다.

어떠한 값을 반환해줄 것이냐면 map 메서드를 통해 배열을 순회한 후 html에 이미 만들어진 카드 CSS 형태로 값을 return해서 배열이 끝날 때까지 반복하여 값을 할당해줄 것이다.

`` 백틱으로 표기되는 안의 정보는 html 문서에 innerHTML로 갈아 치워지는 태그를 담는다.

태그의 요소로 id="${item.id}"와 같이 달러 표기로 map 메서드에서 지정한 매개변수 item의 프로퍼티를 점 표기법으로 불러오는 식으로 객체에서 필요한 값을 모두 불러온다.

        let temp_html_array = myArray.map((item) => {
          return `<div class="movie-card" id="${item.id}">
        <img src="${imageUrl}${item.poster_path}" id="movie-poster" />
        <p class="movie-title">${item.title}</p>
        <p class="movie-overview">${item.overview}</p>
        <p class="movie-vote">rating: ${item.vote_average}</p>
      </div>`;
        });

6. 그리고 이렇게 불러온 값을 join 메서드를 통해 temp_html이라는 임의의 변수에 다시 담는다. 생성된 템플릿 리터럴을 하나의 문자열로 다시 저장하는 과정이다.

let temp_html = temp_html_array.join("");

7. 이렇게 만들어진 temp_html을 영화 카드 이미지가 있는 html 영역에 innerHTML로 밀어 넣어야 한다. 따라서 card-section이라는 ID를 가진 구역을 쿼리셀렉터로 지목하여 밀어 넣는다.

그런데 여기서 클래스로 지정하려고 getElementByClassName을 사용했더니 작동하지 않는다. Id에만 반응한다.

        document.getElementById("card-section").innerHTML = temp_html;