TIL : TMDB API 키 발급받기

들어가며

 

 설치 (https://docs.themeluxury.com/movieasap/getting-started/how-to-get-a-tmdb-api-key/)
오늘 이용할 데이터(https://developer.themoviedb.org/reference/movie-details)

데이터 가져오는 코드 

---

API로부터 데이터 받아오기

1. 기본 틀을 붙여넣기 한다. 
2. 발급받은 `api키`를  url에 붙여넣기 한다.

const apikey = '당신의 api  키';

const url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=${apiKey}`;

3.  웹사이트를 실행한다. 
    다음에 의해 크롬 개발자 도구 창의 콘솔에 json형식의 데이터가 나온다.

    다음과 같이  json 형식의 데이터  받아오기 성공/실패  메세지를 다음과 같이 사진으로 나타내었습니다. 

// API서버로부터 응답받은 것을 json화 시킨다. 
  .then(response => response.json())

 

(1) 성공

 

 (2) 실패 

    id가 4인  영화 데이터를 불러오는데 실패한다. 

 

---

API의 데이터를 통해 카드 꾸미기

어떻게 할 것인지 1. 포스터 이미지 경로(poster_path) , 영화제목(original_title) , 영화요약(overview) , 영화평점(vote_average)  의 데이터가     포함 된  카드를 만들것이다. 2.  카드를 일일히  html페이지에 붙여넣기 하는것이 아니라 ,  javascript dom의 innerHTML을  이용해  카드를 붙여넣기     한다.

HTML 페이지 

    <div id="movieListView" class="movieMiddle">    
     <!-- 
        javascript DOM 을 통해  레이아웃(HTML) 을 가져와서 
        뿌려준다.
      -->
    </div>

 

JS 페이지 

response.json()	TMDB 로부터  전달받은  데이터를  응답받은 response 을  json으로 변환한다.
document,getElementById	웹 문서의  아이디 선택자로 접근한다.
innerHTML	` `(백틱,ES6 문법)을 이용해   HTML 요소를 붙여넣기 하였다.

const options = {
    method: 'GET',
    headers: {
        accept: 'application/json',
        Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIzODg4NzNiMWNiNDgxZjBjNjE0NTQ3MTIzM2NhNjAzNSIsInN1YiI6IjY1OGU1NDJkMTU5NTlmMzQ1YzAwMjcwNiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.hWABdCaRlYP2t3JYO8qd7Wq9SLXqjBJHgytGI6lnLIU'
    }
};
// API는 변함이 없으므로 상수로 고정
const apiKey = 'My_API키';
// movieIds 는  일단 존재하는 이미지 로 해서 붙여줌 
  const movieIds = [2,4,6,8];
  movieIds.forEach(movieId => {
  const url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=${apiKey}`;
// API 명세에 따라  options를  fetch()의 ()에 추가함
    fetch(url, options)
        .then(response => response.json())  // 응답받을 것을 json형식으로 변환
        .then(response => {
     //  console.log(response);
    // ( 순서대로 )
    
    /***
        영화 이미지 : poster_path
        
        영화 제목 : original_title
      
        영화 내용 : overview
      
        영화 평점 : vote_average
      
        (1)  document.getElementById('movieListView')
             해당 HTML 문서 ,index.html 의  movieListView  아이디선택자에 접근
     
        (2)  .innerHTML 
             요소내에  HTML을 가져오는 메소드인데 , 여기에서는 가져와서 붙여준다. 
     
           */
    document.getElementById('movieListView').innerHTML += 
    `
    <div class="movieCard">
    <img src="https://image.tmdb.org/t/p/original${response.poster_path} " alt="movie poster" class="mvImg" id="mv__img">
    
<div class="movieCarte">
    <p class="mvTitle"  id="mv__title">${response.original_title}</p>
    <p class="mvParam"  id="mv__param">${response.overview}</p>   
    

   <span class="mvRate"><small id="mv__Rate">${response.vote_average}</small></span>
</div>`;
        })
        // 크롬 브라우저 개발자 도구 console 창에 에러 출력 
        .catch(
            err => console.error(err)   
            );
    });

 

적용했을 때 웹페이지

 

 

TMDB 라는 영화  API를 다루는  법을  보았고
그것을 적용해보았습니다.