영화 정보를 가져 올 수 있다.

Query String

주소?속성=값&속성=값&속성=값
<http://www.omdbapi.com/?apikey=[yourkey]&> (apikey 값은 별도로 받아야 한다.)

이렇게 써볼 수 있다.
<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":"The> Frozen North","Year":"1922","imdbID":"tt0013158","Type":"movie","Poster":"<https://m.media-amazon.com/images/M/MV5BOTUwNzljYmMtZjY2Ni00YjNhLWFkMTUtM2VlNjg5YzQyMjU1XkEyXkFqcGdeQXVyNDE5MTU2MDE@._V1_SX300.jpg"}],"totalResults":"288","Response":"True>"}

이 데이터는 main.js 에서 사용할 수는 없으니까 사용하기 위해서 활용할 패키지가 있다.
axois 패키지를 사용해 볼 것이다.

<https://github.com/axios/axios>

// 설치
$ npm i axios

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