오늘은 TMDB API 발급부터 콘솔창에 출력하는 것까지 성공적으로 완료했다.
API Key 발급
우선 TMDB API를 사용하기 위해선 API 키를 발급받아야 한다.
사이트에 접속하면 위와 같은 화면이 나온다. 나는 자바스크립트를 사용할 예정이어서 자바스크립트 언어를 선택했고 Get API Key 버튼을 눌러주면 된다. 회원가입을 완료한 후 API 읽기 액세스 토큰과 API 키를 확인할 수 있다.
원하는 API 선택
TMDB에서 제공하는 API 종류는 굉장히 많다. 나는 인기 영화 데이터를 가져오기 위해 MOVIE LISTS에서 Popular을 선택해주었다.
API 페이지 우측에는 하단의 사진처럼 코드를 실행시켜볼 수 있는 공간이 있다. Header부분에 API 토큰을 넣어주고 Try It!을 누르면 밑에 있는 창에서 출력 결과를 확인해볼 수 있다.
⚠️주의할 점⚠️
Header부분에 API 키가 아닌 API 읽기 액세스 토큰을 입력해야 한다.
또한, 나는 한국어로 영화 제목을 받아오고 싶어서 QUERY PARAMS 부분의 language를 ko-KR로 설정해주었다.
이제 코드를 그대로 복사해 붙여넣으면 되기 때문에 준비는 모두 끝났다!!!
콘솔 출력
TMDB API를 통해 받아온 JSON 파일은 아래와 같다. 이런식으로 results 배열에 총 20개의 영화 정보가 들어있다.
{
"page": 1,
"results": [
{
"adult": false,
"backdrop_path": "/euYIwmwkmz95mnXvufEmbL6ovhZ.jpg",
"genre_ids": [
28,
12,
18
],
"id": 558449,
"original_language": "en",
"original_title": "Gladiator II",
"overview": "로마의 영웅이자 최고의 검투사였던 막시무스가 콜로세움에서 죽음을 맞이한 뒤 20여 년이 흐른 후. 쌍둥이 황제 게타와 카라칼라의 폭압 아래 시민을 위한 자유로운 나라 로마의 꿈은 잊힌 지 오래다. 한편 아카시우스 장군이 이끄는 로마군에 대패한 후 모든 것을 잃고 노예로 전락한 루시우스는 강한 권력욕을 지닌 마크리누스의 눈에 띄어 검투사로 발탁된다. 로마를 향한 걷잡을 수 없는 분노, 타고난 투사의 기질로 콜로세움에 입성하게 된 루시우스는 결투를 거듭하며 자신이 진짜 누구인지 알게 되고 마침내 로마의 운명을 건 결전을 준비하게 되는데...!",
"popularity": 4201.992,
"poster_path": "/b5UXjzW5cLZhprMnlAmsVAA3G4t.jpg",
"release_date": "2024-11-05",
"title": "글래디에이터 II",
"video": false,
"vote_average": 6.776,
"vote_count": 2100
}
],
"total_pages": 48052,
"total_results": 961025
}나에게 필요한 건 영화 제목, 이미지 주소, 평점이기 때문에 poster_path, title, vote_average를 사용해주었다. 이를 콘솔에 출력하기 위해 TMDB에서 제공하는 코드를 약간 수정했다.
const options = {
method: 'GET',
headers: {
accept: 'application/json',
Authorization: 'API 읽기 액세스 토큰'
}
};
fetch('https://api.themoviedb.org/3/movie/popular?language=ko-KR&page=1', options)
.then(res => res.json())
.then((data) => {
console.log(elem["title"], elem["vote_average"], elem["poster_path"]);
})
.catch(err => console.error(err));콘솔창에서 제대로 출력되는 것을 확인한 후, throw를 사용하여 에러 처리를 추가해보았다.
에러 처리 추가
fetch(
"https://api.themoviedb.org/3/movie/popular?language=ko-KR&page=1",
options
)
.then((res) => {
if (!res.ok) {
throw new Error("에러 발생!");
}
return res.json();
})
.then((data) => {
data["results"].forEach((elem) => {
console.log(elem["title"], elem["vote_average"], elem["poster_path"]);
});
})
.catch((err) => console.error(err));콘솔창에 데이터가 제대로 출력되는 것을 확인할 수 있었다.
느낀점
아직 에러 처리 코드의 의미를 완전히 이해하지 못해서 간단하게 구현해봤다. 내일 더 찾아보고 보완할 예정이다. 맨날 강의만 듣다가 실제로 코드를 작성해보니 시간이 정말 빨리 갔다. 너무 재미있었다ㅎㅎ 나중에 비동기 처리에 대해 더 공부하고 async와 await를 활용해 리팩터링하는 것도 꼭 도전해보고 싶다..!!
