#4.0 Fetching Movies from API

#4.0 Fetching Movies from API

🌼 이번시간에는 axios를 이용해서 API로부터 데이터를 fetch해올 것이다.

일반적으로 사람들이 자바스크립트에서 데이터를 fetch하는 방법은 fetch를 사용하는 것이다.

니콜라스는 fetch를 좋아하지는 않는다. 왜냐하면 더 좋은 방법이 있기 때문이다. Axios를 사용할 것이다.

Axios는 니콜라스가 많이 사용했고 좋아한다. axios가 어떻게 동작하는지 궁금하다면, 이건 매우 쉽다. axios는 마치 fetch 위에 있는 작은 layer 이다.

 

axios 설치 : npm install axios

 

🌼YTS의 API를 이용하기

우리가 쓸 API에 대해서 이야기하겠다. 우리는 YTS에서 만든 API를 사용할 것이다.

불법적인 토렌트 영화를 업로드 하는 사람들이 있다. 토렌트에서 인터넷으로,

 

YTS 홈페이지에 들어가서 API를 누르고 JSON 파일을 보면

이런 식으로 JSON 파일을 볼 수가 있다. (이건 list movies json인 것이다. 영화 목록)

 원래 raw 데이터는 되게 다닥다닥 붙어있고 보기 힘든데, JSON viewer라는 크롬 확장 프로그램을 설치해서 보기 편하게 되었다.

 

🌼니콜라스가 만들어 놓은 yts-proxy 이용하기

YTS는 뭔가 불법적인 일을 하고 있고 불법적인 영화를 업로드하고 있다. 그래서 그들의 API는 항상 변한다. 매번 URL이 변경된다. 그래서 니콜라스가 yts-proxy라는 것을 만들어놓았다. 그래서 우리는 저 길고 긴 주소를 사용하는 대신에 니콜라스가 만든 것을 사용하면 된다.

https://github.com/serranoarevalo/yts-proxy <<여길 들어와보면,

https://yts-proxy.now.sh/list_movies.json <<으로 사용하면 된다고 한다. 뒷 부분은 내가 원하는 것을 쓰면 된다.

(https://yts.mx/api 여기서 보면 list movies / movie details 등등이 있는데 만약 movie details를 원한다면 https://yts-proxy.now.sh/movie_details.json 이렇게 쓰는 것이다.)

 

니콜라스가 이걸 만든 이유는 이 코스를 많은 사람이 듣는데 URL이 바뀌면 에러가 계속 발생한다. 왜냐면 URL이 바뀌거든 이건 굉장히 짜증나는 일이야.

---

🌼본격적으로 axios 사용하여 코드 작성하기

import axios from "axios";

이제 axios를 import해온다.

 

import React from "react";

import axios from "axios";



class App extends React.Component{

  state = {

    isLoading: true,

    movies: []

  };

  componentDidMount(){

    const movies = axios.get("https://yts-proxy.now.sh/list_movies.json");

  }

  render(){

    const {isLoading} = this.state;

    return (

    <div>

      {isLoading? "Loading..." : "We are ready"}

    </div>

  );

  }

}

export default App;

그리고 componentDidMount에 다음과 같이 axios 코드를 작성한다. axios를 통해 얻어온 데이터를 잡아야 활용할 수 있기 때문에 movies라는 데이터를 만들어서 거기에 집어 넣는다고 생각하면 된다.

 

그런데, axios를 통해서 데이터를 가져오는 작업은 시간이 걸릴 것이다. 그러므로 우린 javascript에게 componentDidMount 함수가 끝날 때까지 약간 시간이 걸릴 수 있다고 말해야 한다. → 비동기

componentDidMount 앞에 async를 붙여서 그 자체를 비동기로 만들 수도 있지만, getMovies 라는 함수를 따로 만들겠다.

 

import React from "react";

import axios from "axios";

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? "Loading..." : "We are ready"}

    </div>

  );

  }

}

export default App;

✅App.js

그러니깐 getMovies 라는 이름의 함수를 만들어서 async와 await으로 비동기 함수를 만들고 그것을 componentDidMount에서 호출하는 것이다.

다음 시간에 이것을 이용해서 다루는 것을 해보겠다.