[TIL] sparta 12일차 - TMDB에서 영화 데이터 가져오기

 

 

개인 과제로 진행 중인

영화 검색 사이트를 만들기 위해

 

TMDB에 데이터를

요청하고 받는 코드를 작성했다🙂

 

영화 데이터 요청 코드

 // 발급받은 TMDB API key
const apiKey = "발급받은 TMDB API key";

const totalPages = 2;

const options = {
    method: "GET",
};

    
// TMDB API에서 한 번에 반환되는 결과 수는 기본적으로 20개로 제한
// 40개의 데이터를 가져오기 위해서는 페이지마다 20개씩 요청을 반복해야 합니다
for (let page = 1; page <= totalPages; page++) {
    const url = `https://api.themoviedb.org/3/movie/top_rated?language=ko-KR&page=${page}&api_key=${apiKey}`;

    fetch(url, options)
        .then((response) => response.json())
        // 'data'는 JavaScript 객체로 파싱된 JSON 데이터
        .then((data) => {
            // 여기에서 데이터를 처리
            data.results.forEach((movie, index, poster) => {
                // 영화 제목
                const movieTitle = movie.title;
                // 영화 원래 제목
                const originalTitle = movie.original_title;
                // 이미지 경로
                const posterPath = movie.poster_path;
                // 이미지 전체 경로
                const posterUrl = `https://image.tmdb.org/t/p/w500${posterPath}`;
                // 줄거리
                const overview = movie.overview;
                // 평점
                const average = movie.vote_average;
                // 개봉일
                const releaseData = movie.release_date;
                // id
                const movieId = movie.id;
                // 이미지 태그 생성
                const posterElement = document.createElement("img");
                // 줄거리 p 태그 생성
                const overviewElement = document.createElement("p");
                // 평점 p 태그 생성
                const averageElement = document.createElement("p");
                averageElement.classList.add("movie_average");
                averageElement.innerHTML = `<span>평점</span> ${average}`;

                posterElement.classList.add("poster_img");
                posterElement.src = posterUrl;
                overviewElement.innerHTML = movie.overview
                    ? `<p>내용</p>${overview}`
                    : `<p>내용</p> 내용 요약이 없습니다.`;

                // console.log(releaseDate);

                // 페이지별로 인덱스 0부터 시작 수정
                allMovieTitles[index + (page - 1) * 20].innerHTML = movieTitle;
                allMovieTitlesOrigin[index + (page - 1) * 20].innerHTML = movie.original_title;
                allMovieCardImg[index + (page - 1) * 20].appendChild(posterElement);

                allMovieInfo[index + (page - 1) * 20].appendChild(overviewElement);
                allMovieTitles[index + (page - 1) * 20].parentNode.insertBefore(
                    averageElement,
                    allMovieTitles[index + (page - 1) * 20]
                );
                releaseDate[index + (page - 1) * 20].innerHTML = `${releaseData} <span>개봉</span>`;
            });
        })
        .catch((err) => console.error(err));
}

 

영화 검색 사이트 구현

평점, 제목, 원제목, 요약내용 등의

데이터를 불러와서 

영화 리스트로 만들어보았다

 

어려웠던 점

40개의 영화 데이터를 가져오기 위해서는 페이지 2개를 요청해야 했다(페이지 1개당 20개 제한)

그래서 for 반복문을 통해 원하는 페이지 만큼 반복했다

 

그리고 페이지마다 인덱스가 다시 0부터 시작해서 

[index + (page - 1) * 20]

이렇게 인덱스를 수정해야 했다