javaScript(OMDb API-The Open Movie Database)

OMDb API-The Open Movie Database

---

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

사용방법

API key 받는 사이트

모든 데이터 요청을 다음으로 보냄
http://www.omdbapi.com/?apikey=[yourkey]&

포스터 API 요청
http://img.omdbapi.com/?apikey=[yourkey]&

매개변수

By Search

매개변수	필수	유효한 옵션	기본값	설명
s	yes		<empty>	검색할 영화 제목
type	no	movie, series, episode	<empty>	반환할 결과 유형
y	no		<empty>	출시 연도
r	no	json, xml	json	반환할 데이터 형식
page	no	1-100	1	반환할 페이지 번호
callback	no		<empty>	JSONP 콜백 이름
v	no		1	API 버전(나중에 사용하기 위해 예약됨)

Query String

특정한 웹의 주소부분에 ?로 시작하는 속성과 값에 어떠한 모음이 Query String이라고 부른다.
특정한 주소로 접속을 할때 그 페이지에 대한 기본적인 옵션을 명시하는 용도로 활용되는 문자이다.

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

http://www.omdbapi.com/ = 주소
?apikey = 속성
=7035c60c = 키값
&s=frozen = 속성(영화제목)

주소를 검색창에 입력하면 JSON포멧 방식으로 데이터가 추출된다.

이 방식으로는 js파일로 사용할 수 없기 때문에 js파일에서 사용할 수 있는 방법을 예제로 만들어본다.

axios

---

브라우저 및 node.js를 위한 Promise 기반 HTTP 패키지

영화정보를 받아서 영화 제목과 포스터이미지 출력 예제

1. npm 사용하여 axios 설치
   $ npm install axios

2. 데이터 가져와서 console창에 출력하기

import axios from 'axios'

function fetchMovies() {
  axios
    .get('https://www.omdbapi.com/?apikey=7035c60c&s=frozen')
    // 메소드 체이닝 위 내용을 얻어서 then()메소드에서 처리 후 활용
    .then((res) => {
      // res = response의 약어 통상적으로 결과 혹은 응답을 의미함
      console.log(res)
    })
}
fetchMovies()

결과

3. 영화 제목과 포스터이미지 출력하기

html

  <img src="" alt="" width="200">
  <h1></h1>

JS

import axios from 'axios'

function fetchMovies() {
  axios
    .get('https://www.omdbapi.com/?apikey=7035c60c&s=frozen')
    // 메소드 체이닝 위 내용을 얻어서 then()메소드에서 처리 후 활용
    .then(res => {
      // res = response의 약어 통상적으로 결과 혹은 응답을 의미함
      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()

결과