영화 API 사용해 보기

axios 설치하기

axios를 설치합니다. 터미널에 다음과 같이 입력하면 됩니다.

npm insall axios

 

YTS 영화 데이터 API 살펴보기

크롬 브라우저 주소 입력 창에 yts.lt/api라고 입력하면 YTS 영화 데이터 API 사이트에 접속할 수 있습니다.

 

위 표시한 API 주소를 사용할 것입니다.

 

이 주소는 최신 영화 20개에 대한 데이터를 기본으로 보내줍니다.

 

영화 목록 데이터 확인해보기

크롬 브라우저 주소 창에 있는 Endpoint의 주소 중 .json으로 끝나는 주소를 입력해주세요.

Endpoint 주소 : https://yts.mx/api/v2/list_movies.json

 

JSON Viewer 확장 도구 설치하기

 

크롬 웹 스토어에서 JSON Viewer를 검색한 다음 <Chrome에 추가>눌러 JSON Viewer를 설치합니다.

 

이 JSON Viewer를 설치하면 JSON 형식의 데이터가 깔끔하게 출력됩니다.

YTS에서 영화 토렌토 파일을 업로드하고 있습니다. 이것은 불법입니다. 그러다 보니 매번 접속해야 하는 주소가 변경됩니다.

그래서 노마더 코더 영화 API를 사용합니다.

 

노마드 코더 영화 API 사용하자

노마드 코더 영화 API 깃허브 코드 : https://github.com/serranoarevalo/yts-proxy

YTS의 endpoint /list_movies.json을 쓰려면 yts-proxy.now.sh에 /list_movies.json를 붙이면 됩니다.

endpoint	YTS API	노머드 코더 영화 API
list_movies	yts.mx/api/v2/list_movies.json	yts-proxy.now.sh/list_movies.json
movie_details	yts.mx/api/v2/movie_details.json	yts-proxy.now.sh/movie_details.json

 

https://yts.mx/api/v2/list_movies.json 을 입력하면 아래 사진과 같은 결과를 얻을 수 있습니다.

 

영화 정보 더 자세히 보기

영화 정보를 더 자세히 보여주는 노마드 코더 영화 API 사용해봅시다.

https://yts.mx/api/v2/movie_details.json를 입력해봅시다.

그런데 아무것도 안나옵니다. 왜냐하면 영화 정보를 더 자세히 보여주는 API가 movie_id라는 조건을 요구하기 때문입니다.

 

영화 정보룰 더 자세히 보기 위해 조건 추가하기

movie_details Endpoint는 movie_id가 필수입니다. 즉, movie_id를 yts-proxy.now.sh/movie_details.json에 추가합니다.

 

movie_id가 10인 영화 정보 살펴보기

yts-proxy.now.sh/movie_details.json을 입력한 다음 ?movie_id=10을 이어 붙이면 아이디가 10인 영화의 자세한 정보가 나타날 것입니다.

 

노머드 코더 영화 API를 영화 앱에서 호출하기

import axios from "axios";
import React from "react";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: [],
  };
  componentDidMount() {
    axios.get("https://yts-proxy.now.sh/list_movies.json");
  }

  render() {
    const { isLoading } = this.state;

    return <div>{isLoading ? "로딩중..." : "우리는 준비 됐어"}</div>;
  }
}

export default App;

 

axios의 동작 확인해보기

[Network] 탭을 열고 [Network] 탭의 내용 중 Name이라는 항목에 list_movies.json이라고 나온 부분이 있습니다. 이건 axios가 API를 호출하고 있기 때문에 생긴 것입니다.

 

 

axios는 네트워크를 사용하므로 느리게 동작합니다. 그래서 axios.get()이 반환한 영화 데이터를 잡으려면 자바스크립트에게 axios.get()을 포함하고 있는 함수의 실행이 끝날 때까지 시간이 걸릴 수 있다고 말해야 합니다.

그러니 axios.get()의 실행이 분리될 수 있도록 새 함수를 만듭시다.

 

getMovies() 함수 기다린 다음, axios.get() 함수가 반환한 데이터 잡기

import axios from "axios";
import React from "react";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: [],
  };
  getMovies = () => {
    const movies = axios.get("https://yts-proxy.now.sh/list_movies.json");
  };
  componentDidMount() {
    this.getMovies();
  }

  render() {
    const { isLoading } = this.state;

    return <div>{isLoading ? "로딩중..." : "우리는 준비 됐어"}</div>;
  }
}

export default App;

 

이제 componentDidMount() 함수가 실행되면 this.getMovies()가 실행될 것입니다.

이때 자바스크립트에게 'getMovies() 함수는 시간이 좀 필요해'라고 말해야만 axios.get()이 반환한 데이터를 제대로 잡을 수 있습니다.

 

getMovies()에 async 붙이고, axios.get()에 await 붙이기

자바 스크립트에게 'getMovies() 함수는 시간이 필요해'라고 말하면 async()를 붙이고 실제 시간이 필요한 대상인 axios.get() 앞에 await을 붙이면 됩니다.

import axios from "axios";
import React from "react";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: [],
  };
  getMovies = async () => {
    const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json");
  };
  componentDidMount() {
    this.getMovies();
  }

  render() {
    const { isLoading } = this.state;

    return <div>{isLoading ? "로딩중..." : "우리는 준비 됐어"}</div>;
  }
}

export default App;

 

API에서 데이터를 받아오는 axios.get()을 실행하려면 시간이 필요하고 그 사실을 자바스크립트에게 알려야만 데이터를 잡을 수 있으므로 async, await을 사용한 것입니다.