[JavaScript 개인과제_기초 주차] 1일차: TMDB API 연동 및 데이터 가져오기

캠프 기초 주차 개인 과제로 영화 검색 사이트 제작이 제시되었다. 세계적인 영화 DB인 TMDB의 오픈 API를 사용하여 영화 검색 사이트를 만들어 볼 것이다.

개발 환경 / 기술	Visual Studio Code / HTML, CSS, JS
외부 API	TMDB API
주요 기능	영화 검색, 영화 정보 조회

 

---

오늘의 학습내용 :  실시간 데이터를 사용하는 법

 

1일차 목표

TMDB API에서 인기 영화 데이터 가져오기

가져온 데이터를 콘솔에 출력하여 확인하기

 

 

◆ TMDB 알아보기

The Movie Database (TMDB)

 

데이터를 가져올 사이트가 어떤 곳인지부터 알아보았다. TMDB는 영화와 각종 TV프로그램을 수집하여 데이터베이스화하고 영상물에 대한 각종 정보를 제공한다. 포스터 이미지와 함께 인기 영화, 상영 중인 영화, 개봉 예정작, 각종 애니메이션 정보 등 다양한 호출 url을 제공하여 최신 정보를 쉽게 찾아볼 수 있다. 평점 기능도 있는데, 로튼토마토처럼 긍정적 평가와 부정적 평가를 분류하여 표시하고 있다. 2011년부터는 세계 대부분의 언어를 지원할 정도로 로컬라이징에도 적극적이어서, 한국어 사용자도 어렵지 않게 이용할 수 있었다. 오픈 API를 통한 영화 사이트 제작에 적합한 용도로 사용할 수 있다. 다시말해 영화 전문 나무위키와 왓챠 사이의 그 어딘가

 

 

◆ TMDB API key 받기

TMDB에서 정보를 작성하거나 데이터를 제공받고 싶다면 회원가입을 통해 접근할 수 있다. API 키를 등록하기 위해 적용할 어플리케이션의 정보, 개요, 연락처 등을 적고 키를 발급받았다. 기본적으로는 오픈 API이지만, 만약 영리 목적으로 서비스를 개발하기 위해 사용한다면 TMDB의 별도 검수를 받아야 한다. 이 경우에는 개인 과제용이기 때문에 간단하게 작성해도 문제없었다.

 

 

◆ 데이터를 fetch API 로 가져오기

Fetch API는 ES6의 비동기 통신 방법으로, 웹 API URL로 요청을 보내고 응답을 받기 위해 사용하는 자바스크립트 함수이다. fetch 함수는 2개의 매개변수를 받는데, ① 요청을 보낼 URL (필수 매개변수) ② 요청에 설정할 옵션 (선택적 매개변수) 이다. fetch는 자체로 Promise를 반환하기 때문에 .then()과 .catch() 메서드를 추가해야 한다. 요청이 응답을 반환하면 then() 메서드가 호출되고, 오류가 생기면 catch() 메서드가 실행된다.

fetch('<URL>', {})
  .then(response => {
    // Fetch 응답을 처리한다.
  })
  .catch(error => {
    // 오류가 있을 경우 처리한다.
  })

 

TMDB API Reference 페이지

 

fetch API 를 통해 TMDB에서 데이터를 가져왔다.

// TMDB 영화 정보 api 호출하기
const options = {
    method: 'GET',
    headers: {
        accept: 'application/json',
        Authorization: 'Bearer 나의 API key'
    }
};

// fetch로 데이터 가져오기
fetch('https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=1&sort_by=popularity.desc', options)
    .then(response => response.json())
    .then(response => console.log(response))
    .catch(err => console.error(err));

 

브라우저 콘솔에서 확인