OMDb API

1. 영화 데이터 요청하기

이번에는 OMDb API를 이용하여 영화 데이터를 요청하고 받아서 프로젝트에서 출력하는 방법에 대해 배워봅시다.

1.1 USAGE

영화 요청을 받아올 수 있는 주소입니다.
http://www.omdbapi.com/?apikey=[yourkey]&
해당 주소에서 yourkey에 들어가는 key 값은 OBDb 웹사이트에서 API Key를 무료로 발급받아 사용할 수 있습니다.

1.2 Parameters

하나의 명령으로 예를 들어 s라는 기본적으로 사용해야 하는 명령으로 찾고자 하는 영화의 제목을 검색하게 해줍니다.

1.3 Query String

특정한 주소로 접근할 때 기본적인 페이지에 대한 옵션을 명시하는 용도로 활용되는 문자입니다.

USAGE query string: 주소 ? 속성 = 값 & 속성 = 값 & 속성 = 값
요청이 가능한 주소 ? apiKey = 키 값 & S = 검색하고 싶은 영화 제목
E.g. 겨울왕국 영화 데이터 요청하기
http://www.omdbapi.com/?apikey=2181d79b&s=frozen

1.4 겨울왕국 데이터 요청하기

위에서 확인한 USAGE 주소를 통해 겨울왕국 영화 정보에 대한 데이터를 API에 요청합니다. 그러면 새로운 페이지로 이동을 하며 JSON 포맷으로 되어 있는 정보임을 확인할 수 있습니다.

2. axios 패키지 설치

위 OMDb API에서 받아온 JSON 포맷을 이용하여 main.js에 활용하기 위한 패키지로 axios 패키지가 있습니다. 이는 node.js와 브라우저 환경에서 모두 사용 가능한 HTTP 요청을 처리해주는 JavaScript 패키지입니다.
GitHub 저장소: https://github.com/axios/axios

2.1 $ npm i axios

터미널을 열고 위 명령어를 통해 axios 패키지를 설치합니다.

3. 프로젝트에서 출력하기

이번엔 위에서 배운 두 가지를 모두 활용하여 프로젝트 내에서 출력하는 방법에 대해 알아봅시다.

3.1 main.js에서 활용하기

import axios from 'axios'

function fetchMovies () {
  axios
  .get('http://www.omdbapi.com/?apikey=2181d79b&s=frozen')
  .then((response) => {
    console.log(response)
  })
}

3.2 $ npm run dev

개발 서버를 열어봅니다.

3.3 영화 제목과 포스터 출력하기

function fetchMovies () {
  axios
  .get('http://www.omdbapi.com/?apikey=2181d79b&s=frozen')
  .then(response => {
    console.log(response)
    const h1El = document.querySelector('h1')
    const imgEl = document.querySelector('img')
    h1El.textContent = res.data.Search[0].Title
    imgEl.src = res.data.Search[0].Poster
  })
}
fetchMovies()

위와 같이 OMDb API에서 받아온 데이터를 활용하여 axios 패키지를 설치하고 영화 제목과 포스터를 출력하는 코딩을 진행할 수 있습니다.
이렇게 간단히 영화 정보와 같은 JavaScript 데이터가 어떠한 방식으로 처리가 되는지 알아보았습니다. JavaScript는 모든 내용이 데이터로 처리되며, 데이터가 갖고 있는 정보를 여러 처리 방식으로 HTML과 CSS를 다루어 웹페이지나 화면에 출력할 수 있는 것입니다.