[Level up] 데이터 실습(5) - OMDb API

01.OMDB API (The Open Movie Database)

  • 영화 관련 데이터 정보를 불러올 수 있는 API입니다.

02.Usage

  • 영화 요청을 받아올 수 있는 주소입니다.
  • http://www.omdbapi.com/?apikey=[yourkey]&
  • 해당 주소에서 yourkey에 들어가는 key 값은 OMDB 웹사이트에서 API Key메뉴바에서 API Key를 무료로 발급받아 사용할 수 있습니다.

03.Parameters

  • Parameters는 by title과 by search으로 구분 됩니다.
  • by search에서는 s라는 Parameters명령으로 영화의 제목으로 찾고자 하는 영화를 검색하게 해줍니다.

04.Query String

  • URL 뒤에 데이터를 입력하여 전달하는 방법입니다.
  • 특정한 주소로 접근할 때 기본적인 페이지에 대한 옵션을 명시하는 용도로 활용되는 문자입니다.

  • Usage query string: 주소 ? 속성 = 값 & 속성 = 값 & 속성 = 값
  • 요청이 가능한 주소 ? apiKey = 키 값 & S = 검색하고 싶은 영화 제목
  • 겨울왕국 영화 데이터 요청하기: https://www.omdbapi.com/?apikey=7035c60c&s=frozen

05.겨울왕국 데이터 요청하기

  • 위에서 확인한 Usage 주소를 통해 겨울왕국 영화 정보에 대한 데이터를 API에 요청합니다.
  • 그러면 새로운 페이지로 이동을 하며 JSON 포맷으로 되어 있는 정보임을 확인할 수 있습니다.

06.axios 패키지

  • OMDb API에서 받아온 JSON 포맷을 이용하여 main.js에 활용하기 위한 패키지로 axios 패키지가 있습니다.
  • 이는 node.js와 브라우저 환경에서 모두 사용 가능한 HTTP 요청을 처리해주는 JavaScript 패키지입니다.
  • GitHub 저장소: https://github.com/axios/axios

07.axios 패키지 설치

  • $ npm i axios
  • VS Code의 터미널을 열고 위 명령어를 통해 axios 패키지를 설치합니다.

08.프로젝트에서 출력하기

8-1.main.js에서 활용하기

import axios from 'axios';

function fetcMovies () {
axios
.get("https://www.omdbapi.com/?apikey=7035c60c&s=frozen")
.then(res => { // 메소드 체이닝
	console.log(res);
	});
}
  • axios.get(): 서버에서 어떤 데이터를 가져와서 보여주기 위해 URL주소에 있는 쿼리스트링을 활용해서 정보를 전달합니다.

8-2.개발 서버 실행

  • $ npm run dev

8-3.영화 제목과 포스터 출력하기

<body>
<h1>Hello world!</h1>
<img src="" alt="" width="200px">
</body>
import axios from 'axios';

function fetcMovies () {
	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; // h1태그 text에 배열 데이터의 0번째 index에서 Title을 가져와서 저장 
      imgEl.src = res.data.Search[0].Poster; // img.src속성에 배열 데이터의 0번째 index에서 Poster(이미지 주소)를 저장 
    });
}
fetcMovies();
FrontEnd - HTML(2)
OS - 12번 darkknight

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage