OMDb API 사용하기

OMDb API를 활용하는 방법에 대해 알아보겠습니다.
https://www.omdbapi.com/

📍 쿼리스트링

쿼리스트링이란 URL의 뒤에 입력 데이터를 함께 제공하는 가장 단순한 데이터 전달 방법입니다.
프로토콜과 도메인 다음에 작성되며, ?로 시작하고 key=value 형태로 작성됩니다.
예) 프로토콜 + 도메인 + ?k=v&k=v&k=v

📍 fetch() 함수에 URL 넣기

fetch() 함수는 외부의 데이터를 가져올 때 사용하는 자바스크립트 함수이고, 브라우저에서 제공하는 함수입니다. fetch() 함수의 첫 번째 인수는 데이터를 요청할 URL이 들어갑니다.

OMDb 데이터 요청하는 주소
https://www.omdbapi.com/?apikey=[yourkey]&

📍 Parameters 확인

OMDb API를 사용하기 위한 주소 뒤에 속성 값의 필수 속성 값을 확인합니다.
필수 속성으로는 검색을 위한 s가 있습니다.

📍 fetch() 함수 사용방법

• 패턴 1

fetch('URL');
	.then(res => res.json());
	.then(res => {
    	// res is result!
    });

fetch() 함수에서 .then()이라는 메소드를 사용할 수 있습니다.
.then() 메소드에서 콜백함수로 결과를 json로 반환합니다.
다음 .then() 메소드로 출력합니다.
이 패턴을 사용하다보면 콜백 지옥이 될 위험이 있습니다.

• 패턴 2

const res = await fetch('URL');
const json = await res.json()
// res is result!

await fetch()를 사용하면 promise 인스턴스가 res로 반환됩니다.
await 키워드를 사용하려면 아래와 같이 async로 묶어서 사용해야합니다.

;(async () => {
const res = await fetch('URL');
const json = await res.json();
})()

📍 async 함수

function 앞에 async를 붙이면 해당 함수는 항상 promise를 반환합니다. promise가 아닌 값을 반환하더라도 이행 상태의 promise(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 합니다.

await는 코드를 비동기로 실행하게 하는 키워드입니다. await 키워드가 붙어있는 코드의 promise가 끝날 때 까지 기다리게합니다. async 함수 내에서만 사용할 수 있습니다.

📍 원하는 데이터 사용하기

• 객체 구조분해 할당으로 원하는 데이터를 꺼냅니다.

;(async () => {
const res = await fetch('URL');
const { Search : movies } = await res.json(); // Search 데이터를 movies라는 이름으로 변경
console.log(movies) // 원하는 데이터가 콘솔에 출력됩니다.
})()

• 객체 요소만큼 반복하여 화면에 출력시킵니다.

;(async () => {
    const res = await fetch('https://omdbapi.com/?apikey=7035c60c&s=frozen')
    const { Search: movies } = await res.json()
    console.log(movies)

    for (const movie of movies) {
      //  메모리 상의 div 생성 (화면에 넣는 코드 꼭 필요!)
      const el = document.createElement('div')
      const titleEl = document.createElement('div')
      titleEl.textContent = movie.Title
      // <div>movie.Title</div>
      const imgEl = document.createElement('img')
      imgEl.src = movie.Poster
      // <img src="movie.Poster" />
      el.append(titleEl, imgEl)
      // document.querySelector('body')
      document.body.append(el)
    }
  })()
})()