09.API 활용 - OMDB API

---

API 활용

• 유명한 OMDB API 를 활용하여 Js에서 외부에 저장된 데이터를 불러오는것을 확인해 보겠습니다.

• OMDB API

Query String

• API 의 값을 쓰기 위해서 알아 두어야 하는 규칙입니다.

• 형태

• 예) frozon 을 검색해보기

` http://www.omdbapi.com/?apikey=3642c31f&s=frozen`

위에 주소에서 발급받은 apikey 값을 넣고 &로 끝났음을 알린다.

s=frozoen 은 parameter 값으로 search frozen 하게 되면 다음과 같은 JSON 형식이 데이터가 출력 됩니다.

axios

• HTTP 요청을 처리해주는 JS package 입니다.

• axios

• 설치

  npm install axios

import axios from "axios";

function fetchMovies() {
  axios
    .get("https://www.omdbapi.com/?apikey=3642c31f&s=frozen") // https 로해야 불러올때 보안상 문제가 되지 않음
    .then((response) => {
      // get 으로 가져온 결과 값이 response 로 콜백 되는것임
      console.log(response);
    });
}

fetchMovies();

• frozen 영화 title , poster 불러와서 출력하기

import axios from "axios";

function fetchMovies() {
  axios
    .get("https://www.omdbapi.com/?apikey=3642c31f&s=frozen") // https 로해야 불러올때 보안상 문제가 되지 않음
    .then((res) => {
      // get 으로 가져온 결과 값이 response 로 콜백 되는것임, 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();

Reference

• fastcampus - https://fastcampus.co.kr/dev_online_frontend

• OMDB - http://www.omdbapi.com/