OMDb API 영화데이터 요청&응답(axios)&처리

 

🌲 Open Movie Database API

OMDb API - The Open Movie Database

 

 

🚨 주소 사용법

*yourkey : 사용자키 필요. 무료 발급

*Parameter: 명령 / Required : 필수

 

 

🚨 주소 구조 (쿼리스트링)

 

🚨 예시 : frozen검색하기

s=frozen

http://www.omdbapi.com/?apikey=7035c60c&s=frozen

주소창에서 바로 실행하면 아래와 같이 JSON포맷으로 출력됨

{"Search":[{"Title":"Frozen","Year":"2013","imdbID":"tt2294629","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMTQ1MjQwMTE5OF5BMl5BanBnXkFtZTgwNjk3MTcyMDE@._V1_SX300.jpg"},{"Title":"Frozen II","Year":"2019","imdbID":"tt4520988","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMjA0YjYyZGMtN2U0Ni00YmY4LWJkZTItYTMyMjY3NGYyMTJkXkEyXkFqcGdeQXVyNDg4NjY5OTQ@._V1_SX300.jpg"},{"Title":"Frozen","Year":"2010","imdbID":"tt1323045","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMTc5MTg0ODgxMF5BMl5BanBnXkFtZTcwODEzOTYwMw@@._V1_SX300.jpg"},{"Title":"The Frozen Ground","Year":"2013","imdbID":"tt2005374","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BYzM3Mjc1ZDItMTE1OC00ODk0LWFmZjctYzgxZmYwNzliMTdkXkEyXkFqcGdeQXVyMTAxNDE3MTE5._V1_SX300.jpg"},{"Title":"Frozen Planet","Year":"2011–2012","imdbID":"tt2092588","Type":"series","Poster":"https://m.media-amazon.com/images/M/MV5BOGM5YWU2N2QtYjVhZi00MzYyLTk0ODctYmVlNDZlMjU5N2Q5XkEyXkFqcGdeQXVyMzU3MTc5OTE@._V1_SX300.jpg"},{"Title":"Frozen River","Year":"2008","imdbID":"tt0978759","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMTk2NjMwMDgzNF5BMl5BanBnXkFtZTcwMDY0NDY3MQ@@._V1_SX300.jpg"},{"Title":"Frozen Fever","Year":"2015","imdbID":"tt4007502","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMjY3YTk5MjUtODBjOC00NzAwLTgyYjYtMzFmMzAxOTZmOWRlXkEyXkFqcGdeQXVyNDgyODgxNjE@._V1_SX300.jpg"},{"Title":"Olaf's Frozen Adventure","Year":"2017","imdbID":"tt5452780","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BOWQ1NjNiZTEtYzc3Zi00Nzk4LTg5MTYtNzc5NmJjYTg1MGQ4XkEyXkFqcGdeQXVyMTA4NDI1NTQx._V1_SX300.jpg"},{"Title":"Warcraft III: The Frozen Throne","Year":"2003","imdbID":"tt0372023","Type":"game","Poster":"https://m.media-amazon.com/images/M/MV5BNTMwOGQzYjMtYTQ5MS00NjNmLTk4OTktMDljZDYzNjgwMjUzXkEyXkFqcGdeQXVyNjExODE1MDc@._V1_SX300.jpg"},{"Title":"Howard Lovecraft and the Frozen Kingdom","Year":"2016","imdbID":"tt4768656","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BNTAyYTAzMTktZTNkNC00NDI3LTllMTgtMmU4NDFlMzc0NTkyXkEyXkFqcGdeQXVyNDUxMzY1Mw@@._V1_SX300.jpg"}],"totalResults":"300","Response":"True"}

 

 

 

 

---

🌲 OMDb API 서버에 영화정보 요청&응답&처리

 

🚨 axios 패키지

Promise based HTTP client for the browser and node.js

: 브라우저와 nodejs환경에서 사용할 수 있는 (js에서 사용되는) promise객체 기반의 HTTP 요청을 처리해주는 js 패키지

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

📍 axios 패키지 설치

$ npm install axios

📍 axios 패키지 import

import axios from 'axios'

 

 

🚨 frozen검색어 요청

axios.get().then 메소드 체이닝형식

ㄴ 요청하면 응답을 axios 패키지가 내부적으로 처리하여 then메소드에 콜백에서 처리하는 로직

*요청할 때는 https로

import axios from 'axios'

function fetchMovies () {
  axios
    .get('https://www.omdbapi.com/?apikey=7035c60c&s=frozen')
    .then(res => {	// 화살표 콜백함수
      console.log(res)
    })
}

fetchMovies()

 

 

🚨  html에 타이틀과 포스터 이미지 가져오기

<h1></h1>
<img src="" alt="" width="200">

import axios from 'axios'

function fetchMovies () {
  axios
    .get('https://www.omdbapi.com/?apikey=7035c60c&s=frozen')
    .then(res => {
      console.log(res)
      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()