#TIL 13일차(TMDB API 불러오기[1])

---

Step 1

먼저 팀원분이 만드신 ApiFetch를 import해와야한다. 그래야 내가 만든 js파일에서도 사용할 수 있기 때문!

import { ApiFetch } from "./movie.js"

• 내가 작성한 코드가 아니라 여기에 가져오긴 좀 그래서 ApiFetch가 어떤 함수인지에 대해 말해보자면, 이 함수를 사용했을 때 주어진 URL에서 데이터를 가져오고, 해당 데이터를 JSON 형식으로 변환하여 반환할 수 있다.

Step 2

이제 영화 상세 데이터를 가져오는 함수를 작성해야한다.

const fetchMovieDetails = async (movieId) => {
    const url = `/3/movie/${movieId}?append_to_response=credits,release_dates`;

• 여기서 movieId는 매개변수이고, url은 요청할 api의 엔드포인트를 생성한 것이다. 이 url은 주어진 movieId를 기반으로 영화의 세부 정보를 가져올 수 있도록 구성되어있다.
• 내일은 영화 등급 데이터를 불러온 작업에 대한 것을 작성할 것이기 때문에, 전체 코드는 내일 작성하도록 하겠다.

Step 3

이제 데이터를 가져왔으면, 화면에 표시하는 함수도 작성해야한다.

const displayMovieDetails = (movieDetails, movieCertifications) => {

• 여기서 movieDetails는 영화의 상세 정보를 포함하고 있는 객체이고, movieCertifications는 영화의 관람 등급 정보를 포함하고 있는 객체이다.

// detail_main 요소 선택
    const detailMain = document.querySelector('.detail_main');

• 함수 내부에서는 먼저 HTML 요소를 선택하기 위해 .detail_main 클래스를 가진 요소를 찾아 detailMain 변수에 할당한다.

Step 4

영화 감독 데이터와 출연 배우 데이터를 추출해오는 코드는 생략하기로 하고, html 요소의 일부 코드를 보여주자면 다음과 같다.

// detail_main 요소의 innerHTML을 채워 넣음
    detailMain.innerHTML = `
            <div class="img_container">
              <img src="https://image.tmdb.org/t/p/w500${movieDetails.poster_path}" 
                  alt="${movieDetails.title}" class="detail_img">
                <img src="https://image.tmdb.org/t/p/w500${movieDetails.poster_path}" 
                    alt="${movieDetails.title}" class="detail_main_img">
                </div>

• 여기서 innerHTML은 HTML 요소의 내부 HTML 코드를 나타내는 속성으로, 이 속성을 사용하면 JavaScript를 통해 HTML 요소의 내용을 동적으로 변경할 수 있다.

Step 5

마지막으로 영화 상세 페이지에서 필요한 데이터를 가져와서 화면에 구현하는 과정이다.

// URL에서 영화 ID 가져오기
    const urlParams = new URLSearchParams(window.location.search);
    const movieId = urlParams.get('id');

    // TMDB API를 사용하여 영화 상세 데이터 가져오기
    Promise.all([
        fetchMovieDetails(movieId),
        getMovieCertifications(movieId) // 관람 등급 정보도 가져오기
    ])
        .then(([movieDetails, movieCertifications]) => {
            // 영화 상세 데이터를 화면에 표시하기
            displayMovieDetails(movieDetails, movieCertifications);

• 먼저 URL에서 영화 ID를 가져온 후, fetchMovieDetails 함수를 사용하여 해당 영화의 상세 데이터를 가져온다.
• 그 후에는 가져온 데이터를 사용하여 displayMovieDetails 함수를 호출하여 화면에 표시한다.
• Promise.all을 사용하면 두 가지 정보를 동시에 처리하고, 가져온 데이터를 화면에 표시하는 방법을 학습할 수 있다.