TMDB api 정리

하영·2024년 8월 1일

etc.

목록 보기

12/26

자꾸만 api만 쓰는 것 같은 요즘의 TIL
다른 사람들은 api가지고 이렇게 저렇게 잘 활용하는데 나는 아직 어렵게 느껴지고 겁이 났다.
모든 api 사이트가 똑같지 않지만 데이터를 읽는 시야를 넓혀보려고 간단하게 정리해보았다.

TMDB api

https://developer.themoviedb.org/docs/getting-started

국내외 영화 정보들의 api가 있는 사이트로 제공하는 api가 정말 많다.
이번 과제에서는 upcoming, popular 등 3개정도 사용했는데 연습하면서 다른 것도 활용해보면 좋을 것 같다.

01. api 종류

일부만 가져왔지만 사이트에 들어가보면 정말 정말 많다.
심지어 검색과 관련한 api도 있는데 이번에 팀플 과제에서 검색창 구현할 때 사용했었당

02. response 파악하기

쓰고 싶은 api를 선택해서 들어가보면 메뉴 옆에 response 가 있다.
response는 api가 성공적으로 불러와지면 우리가 받아올 수 있는 데이터들이 객체로 묶여 있다.
바로 사용할 수 없고 json 형태로 파싱해서 사용해줘야한다.

response가 200이면 성공적으로 불러와졌다는 얘기다.
주로 results 에 배열, 그 안에 객체로 들어있어서 results. 을 붙여서 쓰고 싶은 데이터를 가져와서 사용하면 된다.

정리된 글로 보면 이렇게 되어있다!
api마다 조금씩 다르니까 잘 살펴보고 사용하기!

03. fetch 사용하기

fetch는 뭘 반환한다?! promise를 반환한다!
그래서 1) .then으로 해당 api의 url을 가져와지면 위에서 본 response를 json형태로 변환한다.
2) 변환한 데이터를 콘솔로 확인해보고 그 안에서 어떤 데이터를 쓰면 좋을지 확인!
3) 만약에 성공적으로 받아오지 못했다면 error를 띄우도록 만든다.

04. fetch의 옵션

달리기반 강의에서 정리된 내용도 같이 기록하면 나중에 헷갈릴 때 참고하기 좋을 것 같아서 넣어보았다.

fetch("url", {
  method: "POST", // HTTP 메서드
  headers: {
    "Content-Type": "application/json" // 요청 헤더
  },
  body: JSON.stringify({
    title: "새 작업",
    completed: false
  }) // 요청 본문
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

method: HTTP 메서드를 설정 (예: GET, POST, PUT, DELETE)
headers: 요청 헤더를 설정 (예: Content-Type)
body: 요청 본문을 설정
주로 POST나 PUT 요청에서 사용된다.

04. fetch async/await으로 바꿔보기

강의에서 배운 코드방식과 팀원분들과 코드를 공유했을 때 본 방식이 달라서 이것도 기록해보려고 한다.

export const getTopRatedMoviesList = async (params) => {
  const url = `https://api.themoviedb.org/3/movie/top_rated?language=ko-KR&page=${params}`;
  const options = {
    method: "GET",
    headers: {
      accept: "application/json",
      Authorization:
        "Bearer eyJhbGciOiJIUzI1NiJ9GB3FA...AOuyBNdRJzzoRQWyt0FUY"
    }
  };