14 - 영화 앱 만들기

1. 영화 API 사용해 보기

- axios 설치하기

npm install axios

터미널에서 코드 블록에 있는 명령어를 입력하고 설치한다.

 

 

- YTS 영화 데이터 API 살펴보기

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

 

여기서 List Movies API라는 기능을 사용한다.

List Movies 를 클릭.

 

 

위 사진에 보이는 Endpoint를 사용한다.

20개에 대한 최신 영화 데이터를 보내준다.

 

 

해당 주소를 크롬에 붙여넣으면 코드들이 굉장히 지저분하다.

 

json데이터를 정리하기 위해선 크롬 웹스토어에서 JSON Viewer를 설치한다.

 

설치하고 다시 Endpoint를 주소창에 넣으면

****************

깔끔하게 정리되서 나온다.

 

코드를 보면

"status": "ok" 는 응답 상태가 정상이란 뜻

"movie_count": 12345  는 영화 데이터 개수를 뜻함

"limit": 20 는 보내준 데이터의 개수를 뜻함

"movies" [      movies(배열)는 API에서 보내준 영화 데이터 알맹이
  {
     id, url, imdb_code, title, ...
  }
]

 

 

- 노마드 코더 영화 API를 사용한다

github.com/serranoarevalo/yts-proxy

노마드 코더 영화 API를 쓸려면 yts-proxy.now.sh 에 endpoint 를 붙이기만 하면 된다.

 

다음 표를 보고 어떻게 써야할지 참고하자.

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

 

 

- 주소창에 yts-proxy.now.sh/list_movies.json 입력

위쪽 **부분의 사진과 같은  결과를 얻는다. (ctrl + F를 눌러 ** 검색)

 

- 영화 정보 더 자세히 살펴보기

주소창에 yts-proxy.now.sh/movie_details.json 입력해보면

아무것도 나타나지 않는데,

이유는 영화 정보를 더 자세히 보여주는 API가 movie_id를 요구하기 때문.

 

 

- 조건 추가하기

yts.mx/api#movie_details 에 접속하자.

 

접속하면 parameter 이라는 곳에  movie_id 가 보이고

URL 첫번째에 movie_id 추가 예시가 있다.

 

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

 

노마드 코더 영화 API를 사용한다고 했으니까 위 사진의 주소 말고

yts-proxy.now.sh로 시작하는 주소 사용한다.

yts-proxy.now.sh/movie_details.json?movie_id=10

yts-proxy.now.sh/movie_details.json 에다가 ?movie_id=10  를 이어 붙인다.

 

 

2번 줄에 입력한 API URL이 보인다.

그리고 year, rating, runtime, genres.. 등 영화 정보로 보인다.

 

 

- 영화 API를 영화 앱에서 호출하기

영화앱에 API 사용하는 법은

1. App.js 파일 젤 위에 axios를 import 한다.
2. 다음 componentDidMount() 함수에서 axios로 API 호출한다.

App.js 파일 실행해서 수정한다.

import React from 'react';
import axios from 'axios';

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 ? 'Loading...' : 'We are ready'}</div>;
  }
}

export default App;

가장 위쪽에 import axios 추가

componentDidMount() 에 있던 코드들은 지우고 axios.get(...) 추가

앱을 실행해봐도 Loading만 뜨지만 axios는 동작하고 있다.

 

 

- axios 동작 확인하기

 

리액트 앱이 실행되고 있는 브라우저에서 f12를 눌러 개발자 도구를 열고,

Network 탭으로 간다.

list_movies.json이 있다면 axios가 API를 호출하고 있기 때문에 생긴 것.

 

혹시 console 탭에 오류가 났다며 앞으로 진행하면서 고쳐진다.

 

※ axios는 네트워크를 사용하므로 느리다.

그래서 axios.get() 이 반환한 데이터를 잡으려면 자바스크립트에게

axios.get()을 포함한 함수의 실행이 끝날 때까지 시간이 걸린다고 말해줘야 한다.

즉 axios.get() 의 실행이 분리될 수 있게 새 함수를 만든다.

 

 

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

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();
  }

1. state 아래쪽에 getMovies() 를 추가해준다.
2. componentDidMount() 안에 있는 기존 코드 삭제하고 this.getMovies(); 를 추가해줌.

 

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

getMovies = async () => {
    const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json");
  }

getMovies() 함수는 시간이 필요하다고 말하려면 async를 () 앞에 붙임

실제 시간이 필요한 axios.get() 에는 await을 붙인다.

movies에 값이 궁금하면 console.log()로 확인해보면 된다. (안 해도 됨)

 

async는 자바스크립트에게 함수가 비동기라고 말해주는 것이다.

await은 getMovies() 함수 내부의 axios.get() 실행 완료를 기다렸다가 끝나면 계속 진행하라는 것이다.

 

API에서 데이터를 가져오는데 axios.get() 을 실행하려면 시간이 필요하기 때문에

async와 await을 사용한다.

 

 

---

지금 까지 종합

 

1. 리액트 앱이 실행되면 최초로 render() 함수가 실행.
2. 최초의 state에는 isLoading, movies가 있다.
3. isLoading은 true고 movies는 빈 배열임.
4. 그래서 최초 화면에는 Loading이 표시됨.
5. 이어 App 컴포넌트가 마운트 되면 componentDidMount() 함수가 실행되면서 getMovies() 함수 실행.
6. getMovies() 함수에 async 사용.
7. axios.get() 함수에 await 사용.
8. async 와 await 은 한 세트임으로 동시에 사용해야 함.