[개인 프로젝트 1][23,10,19] TMDB API를 이용해서 영화 리스트 가져오기

이번에는 TMDB를 이용해서 영화리스트를 가져와서 페이지에 나타내 주려고 합니다.

 

*TMDB API란,

TMDB API는 가장많이 사용하는 영화 정보 오픈 API 입니다. 기본적으로 감독, 출연진, 포스터 등 정보를 무료로 사용이 가능합니다.

(TMDB에서 API를 사용하기 위해서는 회원가입을 해주어야 합니다.)

 

TMDB Site : https://www.themoviedb.org/

The Movie Database (TMDB)

 

const options = {
  method: "GET",
  headers: {
    accept: "application/json",
    Authorization:
      "개인 API",
  },
};

Top rate list api를 이용하기 위해서 "<>API Reference"로 들어가셔서 "Movie list"에 있는 영화 API 요청 코드를 복사해서 사용해 주었습니다.

 

const url =
  "https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1";

fetch 레퍼런스를 가지고 option과 url을 넣어주어야 하는데, 이때 주소를 바로 넣지 않고, 주소 값을 const url에 넣어주었습니다.

 

 

Fetch api 데이터 가져오기

fetch(url, options)
  .then((response) => response.json())
  .then((data) => {
    let rows = data["results"];
    const cardList = document.querySelector(".card-list");
    cardList.innerHTML = "";

    rows.forEach((a) => {
      let _title = a["title"];
      let _overview = a["overview"];
      let _poster_path = a["poster_path"];
      let _vote_average = a["vote_average"];
      let _id = a["id"];

      let temp_html = `
            <div class="col">
              <div class="card movie-card" data-id="${_id}">
                  <img src="https://image.tmdb.org/t/p/w500${_poster_path}">
                  <h3>${_title}</h3>
                  <p>${_overview}</p>
                  <p>Rating: ${_vote_average}</p>
              </div>
            </div>
          `;

      cardList.insertAdjacentHTML("beforeend", temp_html);
      //console.log(temp_html);
    });

fetch에 선언해주는 url과 option을 가져오고 json 방식으로 가져오는 데이터를 let rows를 선언하여 배열로 담아주었다. 

 

Foreach 문은 한번 반복을 수행할 때마다 배열을 차례대로 접근해서 변수에다가 담아주는 것으로 이를 이용해서 데이터를 담아서 ``(변수와 문자를 함계사용할 수 있는 백틱)을 이용해서  temp_html에 담아서 html에 추가를 해주었다.

 

insertAdjacentHTML() 인터페이스의 메소드는 지정된 Element 텍스트를 HTML 또는 XML로 구문 분석하고 결과 노드를 지정된 위치에 DOM 트리에 삽입하는 메소드 입니다.

 

 

클릭 이벤트로 alert id 띄어주기

조건 : 각 카드를 클릭 시 해당하는 id 값을 alert으로 띄어주어야 합니다.

const movieCards = document.querySelectorAll(".movie-card"); // :CSS 선택자를 이용하여 모든 요소를 선택합니다.
    movieCards.forEach((card) => {
      card.addEventListener("click", function () {
        let movieId = this.getAttribute("data-id"); // : 해당 요소의 속성 값을 가져옵니다.
        alert(`영화 id: ${movieId}`);
      });
    });

 

querytSelectorAll()을 이용해서 선택한 모든 요소를 가져온 뒤 element.getAttribute()를 이용해서 해당 요소의 속성 값이 id 값을 가져와서 클릭할 시 alert을 이용해서 id 값을 나타내 주었습니다.

 

개인프로젝트를 하면서..

javascript를 이용해서 api를 연결해서 데이터를 띄우고, 데이터를 불러오는 작업을 하면서 생각보다 오류가 나는 부분이 많다는 것을 알았으며, api를 이용해서 보다 간단하게 데이터를 가져올 수 있다는 것을 알았다.