OMDb API를 이용해서 영화데이터를 요청하고, 그것을 받아서 출력을 해보려고 합니다.
OMDb api

• api요청 주소

Query String

axios 패키지

api요청을 처리해주는 package입니다.

Node.js와 browser에서 사용할 수 있는 Promise 기반의 HTTP client 입니다.

axios

install

npm

$ npm install axios

• 실제 브라우저에서도 사용되어야하기 때문에 개발의존성이 아닌 일반의존성으로 설치해야 합니다.

활용

import axios from 'axios';

function fetchMovies() {
  axios
    .get('https://www.omdbapi.com/?apikey=12345678&s=frozen') // axios가 실제로 이 주소로 접근해서 정보를 가지고 옵니다.
    .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();