TIL #4 | 23.10.18

API로 데이터 가져오기

API란?

Application Programming Interface
즉, 데이터베이스와 같은 사용할 값을 가져오기 위한 출입구 같은 역할이다.

API를 사용하는 과정

1. 가져올 API 페이지의 개인 API KEY를 생성한다.
2. 주소에 자신의 API KEY를 대입해서 데이터에 접근한다 ex) ?api_key={API_KEY}
3. API 주소에 접근하여 데이터를 가져오는 코드를 작성한다. (fetch 사용)

const options = {
  method: "GET",
  headers: {
    accept: "application/json",
    Authorization:
      "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI3ZWE1YTQ0ODBmNmUzNGExZjhmODdlNzI0MTkyNGRkMiIsInN1YiI6IjY1MmY5MzY3MDI0ZWM4MDEwMTU0NDFjOCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.nz9d2XK3u_dsHdjY7ScL6O4qMGn95lPDXk30MmeelLo",
  },
};

fetch(
  `https://api.themoviedb.org/3/movie/top_rated?api_key=${API_KEY}`,
  options
)
  .then((response) => response.json())
  .then((response) => console.log(reponse)  ) // 값을 사용하는 코드 작성
  .catch((err) => console.error(err));

• fetch로 링크에 접근할 때 HTTP GET이 디폴트로 작동한다.
• .than을 통해 원하는 데이터를 가져올 수 있다.

• 데이터 안에서 원하는 영화 리스트 데이터를 추출하여 가져왔다.

.then((data) => {
  
  const title = document.querySelector(".movie_info .movie_title");
  const movies = data.results;
  const rndMovie = movies[Math.floor(Math.random() * movies.length)];

  title.innerText = rndMovie.title;
  
  const movieImg = document.createElement("img");
  const backdropPath = `https://image.tmdb.org/t/p/w500/${rndMovie.backdrop_path}`;
  const posterPath = `https://image.tmdb.org/t/p/w500/${rndMovie.poster_path}`;
  movieImg.src = posterPath;
  image.appendChild(movieImg);
  header.style.backgroundImage = `url(${backdropPath})`;

• Math.random()을 사용하여 랜덤으로 데이터를 가져오게 설정하였다.
• Math.floor() 함수를 사용하여 배열의 길이를 초과하지 않도록 했다.
• 원하는 요소에 가져온 랜덤 영화 타이틀 값과, 영화 이미지 소스를 대입해주었다.
• .style.backgroundImage 속성을 사용하여 가져온 url로 배경을 설정하였다.

---

회고

오늘은 API를 실제 어떻게 사용하고 가져온 데이터를 어떤 방식으로 사용해야 하는지 알아보고 반영해보는 시간을 가졌다.
아직 헤매는 부분이 많아서 모르는 단어가 나오면 바로바로 공부하고 JS 개념에 대한 정리를 더 해봐야 할 것 같다.
또한 좀 더 나은 방식의 API 활용법을 알아보면 좋을 것 같다.