Third-party APIs

김동현·2023년 3월 13일

자바스크립트

목록 보기

19/22

What are third party APIs?

Third party API는 일반적으로 페이스북, 트위터 또는 구글과 같은 기업에서 제공하는 API로, 자바스크립트를 통해 해당 기능에 액세스하여 사용할 수 있다.

가장 일반적인 예로 매핑 API를 들 수 있다.

매핑 API는 사용자가 위치를 지정하여 지도를 페이지에 표시하는 것이다.

그 중 Mapquest API를 살펴보고 third party API가 브라우저 API와 어떻게 다른지 살펴보자.

They are found on third-party servers

브라우저 API는 브라우저에 내장되어 있다.

그러므로 자바스크립트에서 즉시 액세스할 수 있다.

예를들어 AudoiContext API를 사용하고자 한다면 다음과 같이 사용하면 된다.

const audioCtx = new AudioContext();
// …
const audioElement = document.querySelector('audio');
// …
const audioSource = audioCtx.createMediaElementSource(audioElement);
// etc.

반면에 third party API는 third party server에 있다.

자바스크립트에서 액세스하려면 먼저 API 기능에 연결해야 한다.

다음 예제에서 볼 수 있듯이 먼저 HTML 엘리먼트를 통해 서버에서 사용할 수 있는 자바스크립트 라이브러리에 연결해야 한다.

<script
  src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"
  defer></script>
<link
  rel="stylesheet"
  href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css" />

그런 다음 해당 라이브러리에서 정의된 객체를 사용할 수 있다.

const map = L.mapquest.map('map', {
  center: [53.480759, -2.242631],
  layers: L.mapquest.tileLayer('map'),
  zoom: 12
});

ID가 "map"인 <div> 엘리먼트와 표시하고자 할 특정 지도의 세부 정보를 포함하는 옵션 객체를 매개 변수로 하는 mapquest.map() 메서드를 사용하여 새 지도를 만들었다.

They usually require API keys

브라우저 API의 보안은 프롬프트를 사용하여 사용자에게 권한을 요청하고 그에 따라 처리되는 경향이 있다.

이러한 목적은 웹사이트에서 무슨 일이 일어나고 있는지 사용자에게 알려 주고, 타인이 악의적인 방식으로 API를 몰래 사용하는 것을 막아주는 데 있다.

third party API의 권한 시스템은 약간 다르다.

thrid party API는 API기능에 접근할 수 있도록 개발자 키를 사용하는 경향이 있는데, 이는 사용자보다 API 공급 업체를 보호하기 위함이다.

위의 mapquest API를 사용하려면 사용자 키를 정의해야 한다.

L.mapquest.key = 'YOUR-API-KEY-HERE';

개발자는 키를 얻기 위해 공급 업체 홈페이지에서 신청해야 하며, API의 기능에 대한 접근이 허용되도록 코드에 포함시켜야 한다.

다른 API에서는 약간 다른 방식으로 키를 포함해야 할 수도 있지만 패턴은 대부분 유사하다.

API 공급 업체는 API 사용자에게 악의적인 작업에 대한 책임을 물을 수 있다.

개발자가 키를 만들면 API 공급 업체에게 알려지므로 해당 개발자의 API를 사용하여 권한을 취소하는 것과 같이 조치를 취할 수 있다.

Extending the Mapquest example

mapquest API를 더 자세히 알고 싶다면 해당 API를 제공해주는 업체 홈페이지를 참고한다.
MapQuest Developer➡️

예를들어 tileLayer() 메서드의 동작을 알고싶다면 해당 레퍼런스 페이지➡️에서 자세히 살펴 볼 수 있다.
레퍼런스 스크린샷1
해당 메서드에 포함된 이벤트도 알려준다.
레퍼런스 스크린샷2

A RESTful API — NYTimes

또 다른 API의 예인 뉴욕 타임즈 API를 살펴보자.

이 API를 사용하면 뉴욕 타임즈 뉴스 기사 정보를 검색하여 사이트에 표시할 수 있다.

이러한 유형의 API는 RESTful API로 알려져 있는데, maqquest와 같이 자바스크립트 라이브러리 기능을 사용하여 데이터를 얻는 대신 특정 URL(검색어 및 기타 속성을 인코딩한 URL)에 HTTP요청을 함으로써 데이터를 얻는다.

이는 API에서 흔히 볼 수 있는 패턴이다.

An approach for using third-party APIs

아래에서는 RESTful API를 사용하는 방법을 뉴욕 타임즈 API로 예를 들어 설명한다.

Find the documentation

Third party API를 사용하고자 할 때는 설명서가 어디에 있는지 파악하는 것이 필수적이다.

설명서를 통해 API에 어떤 기능이 있는지, 어떻게 사용하는지 등을 파악할 수 있다.

뉴욕 타임즈 API 설명서는 https://developer.nytimes.com/➡️에 있다.

Get a developer key

대부분의 API는 보안과 책임을 이유로 개발자 key를 사용한다.

다음 지침에 따라 key를 생성한다.

https://developer.nytimes.com/get-started➡️

Connect the API to your app

먼저 API와 앱을 연결해야 한다.

이 API의 경우 HTTP GET 요청으로 데이터를 받아오는데, 요청 할때마다 URL의 파라미터에 API 키를 포함시켜야 한다.

다음은 폼 버튼을 누르면 자동으로 GET 요청을 하는 코드이다.

searchForm.addEventListener("submit", submitSearch);
function submitSearch(e) {
  pageNumber = 0;
  fetchResults(e);
}

function fetchResults(e) {
  // Use preventDefault() to stop the form submitting
  e.preventDefault();

  // Assemble the full URL
  let url = `${baseURL}?api-key=${key}&page=${pageNumber}&q=${searchTerm.value}&fq=document_type:("article")`;

  if (startDate.value !== "") {
    url = `${url}&begin_date=${startDate.value}`;
  }

  if (endDate.value !== "") {
    url = `${url}&end_date=${endDate.value}`;
  }
  // Use fetch() to make the request to the API
  fetch(url)
    .then((response) => response.json())
    .then((json) => displayResults(json))
    .catch((error) => console.error(`Error fetching data: ${error.message}`));
}

전체 URL은 다음과 같이 표시된다.

https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=YOUR-API-KEY-HERE&page=0&q=cats&fq=document_type:("article")&begin_date=20170301&end_date=20170312

> 뉴욕 타임즈 개발자 문서에서 URL에 포함될 수 있는 매개 변수에 대한 자세한 내용을 확인할 수 있다.

displayResuls(json) 함수는 json 데이터에 따라 개발자가 원하는 대로 DOM에 표시하는 함수이다.

DOM API를 다루는 코드이므로 여기서는 생략하도록 한다.

Wiring up the pagination buttons

기사는 한 번에 10개씩만 가져올 수 있다.

따라서 웹 페이지에 "prev" 버튼과 "next" 버튼 기능을 만들고자 한다.

버튼을 누를때마다 요청을 다시 해야한다.

nextBtn.addEventListener('click', nextPage);
previousBtn.addEventListener('click', previousPage);
function nextPage(e) {
  pageNumber++;
  fetchResults(e);
};

function previousPage(e) {
  if (pageNumber > 0) {
    pageNumber--;
  } else {
    return;
  }
  fetchResults(e);
};

pageNumber 변수가 수정됨에 따라 URL의 파라미터도 수정된다.

그러므로 이전과는 다른 데이터를 요청하는 셈이다.

YouTube example

유튜브 API는 독특하게 RESTful API와 자바스크립트 버전의 API를 같이 사용해야 한다.

YouTube Data API➡️ 는 동영상을 검색하고 결과를 반환한다.(RESTful API)
YouTube IFrame Player API➡️는 반환된 비디오 예제를 IFrame 비디오 플레이어 내부에 표시하여 사용자가 볼 수 있도록 한다.(mapquest API와 유사한 API)

[참고] : MDN