클론코딩 - 영화 API 사용해보기

# 이 글은 책 "Do it! 클론 코딩 영화 평점 웹서비스"를 바탕으로 쓴 글입니다.

 

드디어 본격적인 영화 web을 클론 코딩한다.

 

이 Web을 만들 때의 데이터는 영화들의 정보에 대한 API를 받아와 사용할 것이다.

 

여기서 API란 뭘까?

 

책에 나와있진 않지만 평소에도 궁금했었고 자주 들었지만 실제로 접해본 적은 없었기에 한번 찾아보았다.

 

위키백과에는 다음과 같이 정의되어있다.

 

"API란 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다."

 

넹...?

 

응용 프로그램, 운영 체제, 프로그래밍 언어, 인터페이스 이 단어들 모두 아는 단어들인데 조합해 놓으니까 뭔 소린지 잘 모르겠넼ㅋㅋㅋ

 

뭐.. 어쨌든 그렇다고 한다.

 

궁금증을 안고 위키백과의 스크롤을 살짝 내려보니 Web API에 대한 설명이 있었다.

 

"웹 API는 웹 애플리케이션 개발에서 다른 서비스에 요청을 보내고 응답을 받기 위해 정의된 명세를 일컫는다.

예를 들어 블로그 API를 이용하면 블로그에 접속하지 않고도 다른 방법으로 글을 올릴 수 있다.

그 외에 우체국의 우편번호 API, 구글과 네이버의 지도 API 등 유용한 API들이 많으므로, 요즘은 홈페이지 구축이나 추가 개편 시 따로 추가로 개발하지 않고 이런 오픈 API를 가져와 사용하는 추세다."

 

오.. 이제 조금 감이 잡힌다.

 

간단하게 조잡한 내 머리로 요약해보자면 

"이미 개발된 다른 서비스를 사용하기 위한 도구" 정도 아닐까 싶다.

(뇌피셜입니다!)

 

어쨌든 오늘 중요한 점은 이 부분이 아니기 때문에 넘어가 보자.

 

내가 클론 코딩하려는 web은 영화 데이터가 필요하다.

 

그래서 axios를 사용하여 데이터를 불러올 것이다.

 

axios도 처음 보는 개념이기 때문에 찾아보았는데 JavaScript의 라이브러리로 http 통신에 사용된다고 한다.

(이 정도만 알고 넘어가자. 아직 나한텐 과한 수준..)

 

책에 나온 데로 어찌 저치 영화 API를 가져왔다.

 

사진을 첨부하고 싶은데 뭔가.. 하면 안 될 것 같은 것들이라 못했다ㅠ

 

어쨌든 이렇게 API를 가져왔기 때문에 이제 사용해보자.

 

다음 코드를 보자.

get_movies = async() => {
    const movies = await axios.get('https://yts-proxy.now.sh/list_movies.json');  
    // axios로 API 호출, 반환된 데이터를 movies에 저장
  }

이 코드는 movies 배열에 가지고 온 데이터를 저장하는 코드이다.

 

이때 확인해야 할 점은 async와 await이다.

 

책에서는 "자바스크립트에게 get_movies 함수는 시간이 필요하다고 말해야 된다"라고 적혀 있다.

 

음...

그니까 이 함수를 실행하려면, 즉 API를 불러오려면 시간이 걸린다는 얘기인 것 같다.

 

구글링을 해보니 "비동기식 처리와 콜백 처리"에 대해 공부해야 할 것 같다.

 

이 포스팅에 다 쓰기는 어려울 것 같으니 간단히 설명하면

 

어떠한 데이터를 받아올 때 시간이 걸린다.

많은 데이터일수록 더욱 오래 걸릴 것이다.

 

만약 아래와 같은 코드가 있다고 가정해보자.

 

1. 데이터를 받아와 배열에 저장

2. 해당 데이터들을 출력

 

그럼 나에게 누군가 "당신은 2번이 실행되기 전에 모든 데이터를 받아온다고 확신할 수 있나요?"라고 물어본다면?

 

나는 아마도 아니요..라고 대답할 것이다.

 

즉, async와 await를 통해 코드의 실행 순서를 보장받는다!

 

이 정도로 이해하고 넘어가면 될 것 같다.

 

 

더 나아가기 앞서 구조 분해 할당에 대해서 미리 공부하면 좋을 것 같다.

 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN

자세히 읽어보니 많은 도움이 되었다.

 

왜 뜬금없이 구조 분해 할당을 공부했는지는 아래 코드에 나온다.

 

get_movies = async() => {
    const {
      data: {
        data : { movies },
      },
    } = await axios.get('https://yts-proxy.now.sh/list_movies.json'); 
    // axios로 API 호출, 반환된 데이터를 movies에 저장
  }

원래라면, movies.data.data.movies를 통해 원하는 데이터에 접근할 수 있다.

 

나는 개인적으로 '.'을 사용하는 코드를 선호해왔는데.. 이쪽 분야에서는 그렇지 않은 것 같다.

 

구조 분해 할당은 말 그대로 구조를 분해해서 할당하겠다 이런 말이므로 이해가 어렵지는 않았다.

 

어쨌든 이제 불러온 데이터를 state에 저장해줘야 하므로 다음과 같이 작성한다.

this.setState({movies : movies});

왼쪽의 movies는 state의 movies 배열이고 오른쪽의 movies는 영화 데이터가 들어있는 변수이다.

 

여기서 또 특이한 문법이 등장하는데 객체의 키와 대입할 변수의 이름이 같다면 코드를 축약할 수 있다고 한다.

this.setState({movies});

 

 

이제 위의 코드들을 합치면 다음과 같다.

 

get_movies = async() => {
    const {
      data: {
        data : { movies },
      },
    } = await axios.get('https://yts-proxy.now.sh/list_movies.json');  
    // axios로 API 호출, 반환된 데이터를 movies에 저장
    this.state({movies, isLoading : false}); // 데이터를 다 받아왔으니 준비가 됨!
  }

 

this.state() 함수에서 isLoading을 false로 바꿔준다.

 

이 뜻은 앞에서 말했지만 이제 준비가 끝났다는 신호를 보내주는 것이다.

 

이게 가능한 이유는 바로 async와 await 구문이다.

 

즉 데이터를 전부 받아왔으니 이제 Web을 실행시켜도 된다는 의미이다.

 

 

 

슬슬.. 뇌의 과부하가 오기 시작한다.

 

컴포넌트를 만들고 화면에 띄우는 작업은 또다시 내일의 나에게...