JavaScript 데이터 실습 - OMDb API

영화 정보를 다루는 API.

 

OMDb API - The Open Movie Database

OMDb API - The Open Movie Database

 

Parameters는 명령어를 뜻한다.

 

Usage

 

사용하는 방법은 Usage에 나와있다.

yourkey 에는 사용자 인증을 받은 key를 사용하면 된다.

(ex) 7035c60c

& 뒤에는 parameter를 적고 검색하고 싶은 제목을 입력하는 식으로 사용한다.

 

Query String

- 특정한 웹사이트의 주소에서 ?로 싯작하고 &로 구분하는 형태의 문자열.

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

 

사용 예시

브라우저에 다음과 같은 주소 입력

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

결과

큰 따옴표로 묶인 JSON 스트링이 출력된다.

 

이렇게 웹페이지 자체에 뜨는 정보는 JavaScript 파일에서는 처리하기 어렵다.

이럴때 활용하는 것이 'Axios'

 

axios/axios: Promise based HTTP client for the browser and node.js (github.com)

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

Promise 기반의 HTTP요청을 처리하는 JavaScript 패키지. 브라우저 및 node.js에서 사용 가능

 

Axios 설치 및 활용 실습

1. VS code에서 다음의 명령어 실행.

npm i axios

2. package.json의 "dependencies"항목에서 axios가 추가된 것을 확인

3. main.js 에서 다음의 코드 입력

import axios from 'axios'

function fetchMovies() {
  axios
  .get('https://www.omdbapi.com/?apikey=7035c60c&s=frozen') //가급적 https 사용 권장
  .then((response)=>{
    console.log(response)
  })
}
fetchMovies()

4. 브라우저 콘솔의 결과에서 원하는 영화 정보 확인

5. index.html의 body 부분에 img태그 삽입

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

6. main.js에 다음의 코드 삽입.

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

7. 결과