10. 16. 11일차 TIL - TMDB API 사용법

개인과제에 대한 일정을 안내받았다. 이번 과제의 목표는 진짜 영화 정보를 제공하는 검색 사이트를 만드는 것이다. 이번 과제의 진행 일정은 아래와 같다. 일정을 보았을 때 이번 과제에서 가장 중요한 것은 API 연동이라 생각한다. 그렇다고 다른 일정이 쉬워보이는 것도 아니다.. 화이팅!! 그래서 오늘은 TMDB에서 AIP키를 사용하는 방법에 대해 알아보았다.

1일 : TMDB API 연동 및 데이터 가져오기

2일 : 영화 카드 리스트 UI 구현하기

3일 : 영화 검색 기능 고도화하기

4일 : 이벤트 위임 적용하기

5일 : 로컬 저장소 활용한 북마크 기능 구현하기

6일 : ansyc / await로 API 호출 리펙터링하기

7일 : 디버깅 및 최종 제출 준비하기

---

1. TMDB API 사용법

TMDB란? The Movie Databas API는 영화, TV 프로그램, 배우, 그리고 이미지 API 등에 대한 메서드들을 제공한다. 앞서 말했 듯 이번 개인과제는 이 TMDB에서 API key를 발급받아 원하는 데이터를 내 마음대로 사용할 수 있게 되는 것이 가장 중요한 목표인 것 같다. 그렇다면 TMDB에서 API 키를 어떻게 하면 발급받고 사용할 수 있을까?

 https://www.themoviedb.org/

The Movie Database (TMDB)

1) 먼저 TMDB 링크에 접속한다. API KEY는 사이트에 접속하여 회원가입을 한 후 발급받을 수 있다고 한다.

 

2) 회원 가입을 한 후 계정 설정 페이지에 들어갔더니 왼쪽 메뉴창에서 API 설정을 쉽게 찾을 수 있었다.

 

3) API 메뉴에서 키 요청 섹션 아래에 있는 링크를 클릭한다.

 

4) API 키를 개발자로 등록한다.

 

5) 사용 약관에 동의하고 필요한 정보를 입력한다.

 

6) 정보를 다 입력하면 아래처럼 API 키와 베어러 토큰이 발급된다.

 

 

7) 발급된 API key를 복사한 후 아래 footer에서 API로 들어가면 Guides와 API Reference를 찾을 수 있다.     Guides 메뉴에서는 사이트 사용 가이드를, API Reference에서는 API를 선별하여 가져올 수 있다.

왼쪽 메뉴에서는 내가 원하는 정보를 선택할 수 있다.

오른쪽 빨간색 부분에서는 어떤 용어로 API Data를 가지고 갈지,

어떤 방법을 통해 API 데이터를 가져갈 것인지 선택할 수 있다. 

 

8) Library에서 axics, fetch, jQuerym XMLHttpRequest 중 어떤 것으로 가지고 갈 것인지 선택할 수 있고 나는 fetch로 연동하기 위해 fetch를 선택하였다. 

 

이 때, 베어러 토큰으로 선택할 경우에는 FETCH REQUEST에 작성된 코드를 그대로 복사해도 데이터가 잘 불러와지지만,  발급키의 경우는 발급키가 등록되지 않았다고 말하는 것 같은 메세지와 함께 오류가 발생하였다.

 

즉, API를 발급키로 가지고 오려면 REQUEST에 적힌 내용을 수정하여 나의 발급키를 등록하는 과정이 추가적으로 필요한 것 같다. 이후 한참을 고민하다 아, 맞다 가이드가 있었지하고 가이드 페이지를 확인해보았다.

 

401 오류는 "인증 실패 : 서비스에 엑세스할 수 있는 권한이 없다"는 것을 의미했다. 내 예상이 맞았다. 코드의 한 부분을 수정하여 내가 발급받은 키를 입력해주어야 API Data를 가지고 올 수 있는 것이다. 그렇다면 발급받은 API 키는 코드 어디 추가해주어야 연동이 될까? 이 또한 가이드페이지를 통해 알 수 있었다.

가이드 예시 코드)

'https://api.themoviedb.org/3/movie/11?api_key=26210aab61f4aae375801820bae82a65'

예시 코드를 보니 메뉴 이후 api_key를 입력해주어야 하는 것 같다. 그럼 request 코드를 확인해보자.

 

request 코드)

'https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=1&sort_by=popularity.desc'

request 코드를 보니 메뉴 이후 api_key가 아닌 분류조건? 설정? 같은 것들이 기재되어 있음을 확인하였다. 즉 내가 발급받은 api_key를 저 사이에 입력해준다면 오류없이 잘 작동할 것 같다. 그럼 바로 콘솔로 확인해보자!

 

아주 잘 작동하고 있음을 확인할 수 있다!! 🎉🎉

---

★ 11일차 소감

이번 과제를 시작하기 전 튜터님께서는 원래 api 를 가져오고 연동하는 것은 어려운 것이라고 노파심에 누누히 말씀해주셨다. 잘 되지 않더라도 자괴감을 갖지 않았으면 한다고 걱정까지 해주셨다. 실제로 나 또한 잘하고 싶은 마음과 달리 제대로 작동하지 않았고 연동하는 과정에서 발생한 오류에 대한 고민으로 오늘 하루의 대부분을 허비하게 되었다. 가장 허무했던 것은 결국 해답이 TMBD 사이트에 있었다는 사실이었다. 한국인 특.. 사용설명서를 제대로 읽지 않음..

다음부터는 처음 이용하는 것이 있다면 사용 설명서 또는 가이드를 꼭 읽어야겠다.. 😂 그래도 연동은 잘 됐으니 기분은 좋다 ㅎㅎ