[JS] JavaScript | Axios | OMDB API로 영화데이터 가져오기

📒 OMDB API란?

• OMDb API는 영화 정보를 얻기 위한 RESTful 웹 서비스이며
• 사이트의 모든 콘텐츠와 이미지는 사용자가 제공하고 유지 관리합니다.

 

📒 사용방법

Usage

• Send all data requests to :
• http://www.omdbapi.com/?apikey=[yourkey]&
• Poster API requests:
• http://img.omdbapi.com/?apikey=[yourkey]&

 

📒 Query String

• Query : 검색
• String : 문자 데이터
• 주소?속성=값&속성=값&속성=값

 

📒 Axios로 가져오기

• Promise based HTTP client for the browser and node.js
• ⇒ HTTP요청을 처리해주는 JS 패키지

OMDb API - The Open Movie Database

• 설치

npm install axios

 

• 영화 Frozen 정보가져오기

import axios from 'axios'

function fetchMovies() {
  // apikey =  발급받은 키, s = 영화제목
  // https로 요청하기.
  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[1].Title
      imgEl.src = res.data.Search[1].Poster
    })
}
fetchMovies()