[Node.js] TMDB 에서 영화 정보들 받아오기

TMDB

---

TMDB (The Movie Database) 는 TV 와 영화에 대한 정보를 저장한 커뮤니티 기반의 데이터베이스이다. 수많은 정보들을 저장하고 있으며 보통 API 를 제공하는 회사들은 유료거나 하루 최대 요청 수를 제한하는 방식을 갖고 있지만 TMDB는 요청에 제한이 없고 상업적으로 사용할 의도가 아니라면 API를 무료로 제공하는 장점이 있어 선택하게 되었다.

TMDB 서비스를 이용하여, 프로젝트를 제작하면서 무료로 다양한 API 요청을 사용할 수 있어서 만족감은 좋았지만 전세계적 영화 정보들을 수집하여 저장한 데이터베이스이다 보니 영화 정보(인기 영화, 상영 예정작 등)가 오잉? 하는 것들이 가끔씩 나올 때가 있다.

이번 프로젝트는 실제 운영할 서비스가 아닌 구현을 목적으로 둔 프로젝트였기 때문에 그런 부분은 감안하고 사용하였다.

TMDB 설정 및 API

---

1. 회원가입 및 API 키 발급 요청

회원 가입 > 오른쪽 상단 프로필 클릭 > 설정 > API > API 키 발급

2. API 요청

기본적으로 TMDB에서는 영화와 TV와 관련된 다양한 API를 제공해준다.

다른 API 요청과 다르게 poster나 backdrop 같은 이미지 관련 API의 Endpoint가 달라 유의해야 한다.

• 기본 API Endpoint : https://api.themoviedb.org/3/{API_path}
• 이미지 API Endpoint: https://image.tmdb.org/t/p/w500/{image_path}

아래는 이번 프로젝트에서 사용한 API 리스트이다.

1. discover/movie : 장르별, 평점별, 추천 수 별 영화들을 불러온다.

2. /movie/{movie_id}/credits : 영화 출연진, 감독, 스태프 등을 불러온다.

3. /movie/{movie_id} : 영화 상세정보를 불러온다.

4. /movie/upcoming : 개봉 예정작을 불러온다.

5. /movie/now_playing : 현재 상영작을 불러온다.

6. /trending/{movie}/{time_window} : 일별, 주차별 인기작을 불러온다.

7. /search/movie : 영화 검색 결과를 불러온다.

TMDB API 참고 >> TMDB API DOCS

실제 프로젝트 적용

---

API를 요청하고 응답값을 받아오는 것을 어렵지 않다.

하지만 프로젝트를 만들며 대부분의 시간을 투자했던 곳은 그 응답값을 프로젝트에서, Front-End에서 사용하기 편하게 변환해주는 작업이었다.

예를 들어, 상영 예정작 정보들 불러오기 위해서 API 요청을 보냈을 때 TMDB에서 받을 수 있는 응답값은 다음과 같다.

 {
   "dates": {
       "maximum": "2023-03-01",
       "minimum": "2023-02-08"
   },
   "page": 1,
   "results": [
       {
           "adult": false,
           "backdrop_path": "/zGoZB4CboMzY1z4G3nU6BWnMDB2.jpg",
           "genre_ids": [
               28,
               10749,
               35
           ],
           "id": 758009,
           "original_language": "en",
           "original_title": "Shotgun Wedding",
           "overview": "",
           "popularity": 856.822,
           "poster_path": "/t79ozwWnwekO0ADIzsFP1E5SkvR.jpg",
           "release_date": "2022-12-28",
           "title": "샷건 웨딩",
           "video": false,
           "vote_average": 6.3,
           "vote_count": 167
       },
 ,,,
 		}
 	]	
 }

하지만 우리는 이 방대한 양의 정보가 필요하지 않다.
필요한 부분만 추출하여 활용하기 위해 새로운 객체를 생성하여 반복문을 통해 담아주었다.

let resultArray: Array<MovieResultArrayType> = [] //새롭게 담아줄 객체
  
const { page, results, total_pages, total_results } = response.data //위 요청에 대한 응답값
  
results.forEach((objects: TmdbResultArrayType) => {
  // 내가 사용할 key 값들
    resultArray.push({
        id: objects.id,
        genre: objects.genre_ids,
        title: objects.title,
        poster_path: objects.poster_path,
        release_date: objects.release_date,
        popularity: objects.popularity,
   })
})
  
  convertGenreIdtoName(resultArray)

하지만 genre_ids부분을 보면 장르의 이름이 들어간 것이 아닌 숫자로 표현되어 있는 것을 알 수 있다. TMDB에서 공식적으로 제공하는 genre_ids 에 대한 한국어 이름 리스트를 반환받을 수 있는 리스트이다.

/genre/movie/list >> https://api.themoviedb.org/3/genre/movie/list?api_key={{API_KEY}}&language=ko

제공받은 장르 리스트와 내가 만든 resultsArray의 장르와 대조하여 동일한 genre_ids일 경우, 한국어 이름으로 변환시키는 함수를 작성하여 적용시켜주었다.

export const convertGenreIdtoName = (tmdbArray: any) => {
for (let i = 0; i < tmdbArray.length; i++) {
  let { genre } = tmdbArray[i];
  for (let j = 0; j < genre.length; j++) {
    for (let k = 0; k < genreId.length; k++) {
      if (genre[j] === genreId[k].id) {
        genre[j] = genreId[k].name;
      }
    }
  }
}
};

반복문이 세 번 중복되어 작성되니 보기도 불편하고 효율도 최악이라 생각한다..

    "resultArray": [
      {
          "id": 758009,
          "genre": [
              "액션",
              "로맨스",
              "코미디"
          ],
          "title": "샷건 웨딩",
          "poster_path": "/t79ozwWnwekO0ADIzsFP1E5SkvR.jpg",
          "release_date": "2022-12-28",
          "popularity": 856.822
      },,,
	 ]

이 뿐만 아니라 객체를 입맛에 맞게 변환하는 여러 작업들이 있었고, 위 부분은 일부분일 뿐이었다. 복잡하고 생각할 것도 많긴 했지만 나름 고민하는 즐거움이 있었고 그게 코딩의 묘미지 않을까 싶다.