영화 데이터 요청하기

OMDb API를 이용하여 영화 데이터를 요청하고 받아서 프로젝트에서 출력하는 방법에 대해 공부해보았습니다.

1. Query String

주소?속성=값&속성=값&속성=값

특정한 웹의 주소부분에 ?시작하는 어떤 속성과 값의 모음을 query string이라고 합니다.
(속성과 값이 끝나면 & 기호를 통해 또다른 속성과 값을 작성할 수 있습니다.)

결국, 쿼리스트링은 특정한 주소로 접근을 할 때 기본적인 그페이지에 대한 옵션을 명시하는 용도로 활용되는 어떠한 문자라고 할 수 있습니다.

예시

아래는 OMDb API에서 제공되는 Usage로, ? 이하가 쿼리스트링입니다.

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

해당하는 페이지에 요청을 날린 후 실제로 그 값을 받아오면, json포맷형식으로 받아올 수 있습니다. 따라서 받아온 정보를 바로 프로젝트에서 활용을 하기는 어렵기 때문에 이러한 요청사항을 처리해줄 수 있는 자바스크립트의 axios라는 패키지를 활용합니다.

2. axios

구글 검색창에 axios를 검색해 github사이트에 들어가 확인해보면 axios란 Node.js에서도 사용할 수 있고, 브라우저에서도 사용할 수 있는 Promise 기반의 HTTP 클라이언트라고 정의된 것을 확인할 수 있습니다.

즉, axios란 ode.js에서도 사용할 수 있고, 브라우저에서도 사용할 수 있는 http요청을 처리해주는 자바스크립트 패키지입니다.

또한 Promise를 기반으로하여 async/await문법을 사용하여 XHR요청을 매우 쉽게 할 수 있다는 장점이 있습니다. 더불어 IE8이상을 포함한 모든 최신 브라우저를 지원합니다.

※Fetch API보다 Axios가 더 좋은 장점※

• 구형브라우저를 지원합니다.(Fetch API의 경우는 폴리필이 필요합니다.)
• 요청을 중단시킬 수 있습니다.
• 응답 시간 초과를 설정하는 방법이 있습니다.
• CSRF 보호 기능이 내장되어있다.
• JSON 데이터 자동변환해줍니다.
• Node.js에서의 사용 가능합니다.

2-1 axios 설치

$ npm i axios

npm을 이용해 axios패키지를 설치한 후 package.json에 정상적으로 설치가 되었는지를 확인합니다. (dependencies부분에 axios 모듈에 버전이 정상적으로 적혀 있는지를 확인해보면 됩니다.)

2-2 요청 코드 작성

설치가 완료되면, main.js에 이 모듈을 불러와서, 실제로 해당하는 OMDb API라는 서버에 영
화정보를 요청하는 코드를 작성합니다.

main.js

import axios from 'axios'

function fetchMovies() {
  axios
    .get('http://www.omdbapi.com/?apikey=7035c60c&s=frozen').
    .then(response => console.log(response)
}
          
fetchMovies()          

• get메소드
  • 요청을 보낼 URL를 적어줍니다.
  • get요청시 http로 사용을 하는 경우 문제가 생기는 경우가 있기에 https로 명시를 하는 것을 권장합니다.
• then메소드
  • get메소드에서 반환된 정보를 response라는 매개변수로 받아 활용을 합니다.
  • 위 코드의 실행 결과, 콘솔창에 찍힌 response객체를 확인해보면 아래와 같습니다.

확인된 response객체를 바탕으로 영화의 제목과 포스터를 출력해보도록 하겠습니다.

index.html

  <h1></h1> //영화 제목 출력 예정
  <img src="" alt="" width="200"> //영화포스터 출력예정

main.js

import axios from 'axios'

function fetchMovies() {
  axios
    .get('http://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()

위와 같이 웹브라우저 상에 영화의 이름과 포스터가 정상적으로 출력되는 것을 확인할 수 있습니다.