JS. OMDB API

OMDB API

아래 사이트에 들어가서 영화 데이터를 요청하고 받아오는 작업을 할 것이다.

http://www.omdbapi.com/

OMDb API - The Open Movie Database

Query String

주소?속성=값&속성=값&속성=값
주소 ? apiKey = 키 값 & S = 영화 제목
E.g. 겨울왕국 영화 데이터 요청하기
http://www.omdbapi.com/?apikey=######&s=frozen

axios

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.

 

아래 사이트에 들어가서 axios 설치를 완료한다.

https://github.com/axios/axios

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

$ npm install axios

설치가 완료되면 package.json에 axios가 생긴 것을 볼 수 있다.

"dependencies": {
"axios": "^0.26.0",
"lodash": "^4.17.21"
}

영화 데이터 api 받아오기

겨울왕국의 영화 데이터를 받아올 것이다.

데이터의 종류에는 영화 제목, 포스터 등등 여러가지 데이터가 있다.

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

• res는 response, resert의 의미를 가지고 있다.
• h1 태그에는 Title를 받아오면 Frozen이 나온다.
• img 태그에는 Poster를 받아온다.