[JavaScript] JavaScript 데이터 실습 - OMDb API

오늘은 OMDb API를 이용하여 영화 데이터를 요청하고 받아서 출력해보고자 한다!

OMDb API - The Open Movie Database

 

아래는 영화 정보를 요청할 수 있는 주소다.

기본적인 사용자 인증을 거쳐야지만 사용할 수 있는 key값이 있으며 이것이 apikey이다.

이메일과 이름을 적고 제출을 했더니 이메일로 apikey를 발급받을 수 있었다.

 

- Query String

문자를 가지고서 검색하는 개념

주소?속성=값&속성=값&속성=값

 

영화의 제목은 필수로 주소에 적어야 함!

 

위의 주소를 적고 s 파라미터를 사용해 frozen을 검색해봤다.

 

📌 axios

Promise 객체 기반의 http 요청을 처리해주는 자바스크립트 패키지

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

 

📌 axios 모듈 설치

실제로 브라우저에서 http 요청을 처리할 수 있어야 하기 때문에 개발 의존성 모드(-D)로 설치하면 안 된다.

package.json 파일을 보면 axios가 설치된 것을 확인할 수 있다. 

npm install axios

 

📌 get 메서드

http에 omdbapi 접근을 하는데 s라는 파라미터를 통해 겨울왕국에 해당하는 것을 불러온다.

데이터를 요청할 때 https로 요청해야 문제가 안 생긴다.

 

📌 then 메서드

get 메서드에서 내용을 얻어 then 메서드에서 처리한다.

익명의 함수를 화살표 함수로 만들어 서버로 요청이 들어가고 나온 결과를 응답이라는 결과로 반환된다.

response 매개변수 콜백 함수 내부에서 활용 가능!

 

콘솔 창 data 속성의 Serach 배열 데이터를 확인해보면 영화 내역을 확인할 수 있다.

 

axios라는 패키지의 도움을 받아 특정한 주소로 사용자를 인증하고, 검색하고 싶은 내용을 검색해서 데이터를 요청한다. 요청된 데이터를 서버에서 처리하여 응답을 해주게 되는데 axios라는 패키지가 내부적으로 처리한다.

 

자바스크립트는 모든 내용이 사실상 데이터로 처리된다!