TMDB API 사용하기 1

과제개요

순수 바닐라 자바스크립트만으로 영화 리스트 조회 및 검색 UI 구현

학습해온 자바스크립트 문법을 최대한 활용

스타일링 작업하며 css 와 친해지기

 

---

이번 과제는 영화 검색 사이트를 제작한다.

 

오늘은 일단 html 뼈대와 css를 작성했다.

 

tmdb api도 가져와야 하는데 시키는 대로 해도 자꾸 오류가 떠서 조금 오래 붙잡고 있었다.

 

서치해보니 나와 같은 문제가 있는 사람들은 많이 보였는데 명확한 해결 방법이 안 나와서. . .

 

깝깝해 하는 중이었다.

 

{
  "status_code": 7,
  "status_message": "Invalid API key: You must be granted a valid key.",
  "success": false
}

 

 

 

++

이 문제는 팀 과제를 하면서 해결했는데

검색해서 이 글을 보신 분이 있길래

헉,,, 싶어서 추가해둔다.

 

글을 좀 더 추가해서 쓰고 싶었는데 내가 아직 잘은 모르기도 하고 해서,,,

 

일단 api키는 저렇게 쓰지 않고

async await를 사용하고, 

tmbd에서 고대로 복붙에서 사용하면 나온다.

 

const options = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    Authorization: '본인 것 넣기'
  }
};

fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

저 코드에서 async await로 바꾸면 나온다.

 

나 같은 경우엔 팀원분의 도움을 받아

const options = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    Authorization:
      '짠',
  },
};

export async function movie() {
  const url =
    'https://api.themoviedb.org/3/movie/top_rated?language=ko-KR&page=1';

  try {
    const response = await fetch(url, options);
    const data = await response.json();
    return data.results;
  } catch (error) {
    return alert(error);
  }
}

이렇게 수정했다.

 

------------

기본 뼈대 + css