What are APIs?

API(Application Programming Interface)는 개발자가 복잡한 기능을 보다 쉽게 만들 수 있도록 프로그래밍 언어로 제공되는 구조이다.

복잡한 코드는 뒤로 숨긴채, 사용하기 쉬운 구문을 개발자에게 제공한다.

예를 들어, 만약 3차원 그래픽스를 프로그래밍하고 싶다고 가정하자.

컴퓨터의 GPU나 다른 그래픽 함수들을 직접 제어하는 저레벨의 코드(C나 C++)를 직접 작성하는 것보다 자바스크립트나 파이썬과 같은 고레벨의 언어로 작성된 API를 사용하는 것이 훨씬 더 쉽다.

APIs in client-side JavaScript

특히 client-side javascript는 자바스크립트 언어 자체의 일부가 아니라 핵심 자바스크립트 언어 위에 구축되어있으며, 자바스크립트 코드에서 사용할 수 있는 추가적인 능력을 제공한다.

일반적으로 두 가지로 분류된다.

• Browser API는 웹 브라우저에 내장되어 있으며 브라우저 및 컴퓨터 또는 주변 기기의 데이터를 노출하고 이를 통해 유용한 복잡한 작업을 수행할 수 있다.
  예를 들어, Web Audio API는 브라우저에서 오디오를 조작하기 위한 자바스크립트 구조를 제공한다.
  백그라운드에서 브라우저는 실제 오디오 처리를 수행하기 위해 복자반 하위 레벨 코드(C++ 또는 Rust)를 사용한다.
  그러나 다시 말하지만, 이러한 복잡한 과정은 API에 의해 추상화되고 개발자는 추상화된 API를 통해 개발한다.

• Third-party API는 기본적으로 브라우저에 내장되어 있지 않으며, 일반적으로 웹 어딘가에서 코드와 정보를 검색해야 한다.
  예를 들어, 트위터 API를 사용하면 웹 사이트에 최신 트윗을 표시하는 것과 같은 작업을 수행할 수 있다.
  
  

Relationship between JavaScript, APIs, and other JavaScript tools

• JavaScript libraries : 일반적으로 custom function들이 포함된 1개 이상의 JavaScript 파일을 사용하여 웹 페이지에 첨부하여 공통 기능을 빠르게 작성하거나 사용할 수 있다.
  예를 들어 jQuery, Mootools 및 React가 있다.

• JavaScript framework : 라이브러리의 다음 단계인 자바스크립트 프레임워크(Angular 및 Ember)는 HTML, CSS, 자바스크립트 및 기타 기술들의 패키지가 되는 경향이 있으며, 이를 설치한 다음 전체 웹 어플리케이션을 처음부터 작성하는 데 사용한다.
  라이브러리와 프레임워크의 주요 차이점은 "Inversion of Control(제어의 반전)"이다.

  Inversion of Control은 디자인 패턴 중 하나로, 프로그래머가 작성한 코드가 일반적인 프레임워크의 흐름 제어를 받게 되는 것을 말한다.
  라이브러리와 같은 전통적인 프로그래밍에서는 프로그래머가 작성한 코드가 재사용 가능한 라이브러리의 메소드를 호출하는 반면, Inversion of Control을 적용한 프레임워크에서는 재사용 가능한 라이브러리의 코드가 프로그래머가 작성한 코드를 호출한다.
  Inversion of Control의 예로는 콜백 함수, 이벤트 리스너, 의존성 주입이 있다.

  • 콜백 함수 : 프로그래머가 작성한 함수를 다른 함수의 인자로 전달하고, 필요할 때 호출하는 방식이다.
    예를 들어, setTimeout() 함수는 콜백 함수를 인자로 받아서 일정 시간 후에 실행한다. ( 즉, 개발자가 호출하는 것이 아니다. )
  • 이벤트 리스너 : 프로그래머가 작성한 함수를 특정 이벤트에 연결하고, 이벤트가 발생할 때 호출하는 방식이다. ( 즉, 개발자가 호출하는 것이 아니다. )
  • 의존성 주입 : 프로그래머가 작성한 클래스(또는 객체)가 필요로 하는 다른 클래스(또는 객체)를 외부에서 생성하고 주입하는 방식이다.
    예를 들어, Car 클래스가 Engine 클래스에 의존할 때, Car 클래스 내부에서 Engine 객체를 생성하지 않고 외부에서 생성해서 Car 객체에 주입하는 것과 같다.

    const engine = 외부에서 받아옴;
    class Car{
      engine;
      function constructor(engine){...};
    }
    const car = new Car(engine);

    의존성 주입을 사용하면, 프로그래머가 작성한 코드는 자신이 필요로 하는 객체를 받아서 사용하기만 하면 된다. 즉, 흐름제어는 외부에서 객체를 생성하고 주입하는 코드에 있다.
    따라서 의존성 주입은 흐름 제어를 프로그래머가 작성한 코드에서 외부로 넘기는 것으로 Inversion of Control의 한 예이다.

What can APIs do?

최신 브라우저에는 코드에서 다양한 작업을 수행할 수 있는 수 많은 API가 있다.

MDN APIs index page➡️

Common browser APIs

가장 일반적으로 사용하는 브라우저 API의 카테고리는 다음과 같다.

• APIs for manipulating documents
  가장 명확한 예는 DOM API이다.

• APIs that fetch data from the server
  이는 사이트의 성능과 동작에 큰 영향을 미친다.
  작은 부분만을 수정하고자 할 때, 서버에서 전체 페이지를 다시 로드할 필요 없이 즉시 업데이트 하면 사이트나 앱이 훨씬 더 반응성이 좋고 "snappy(날렵한)"느낌을 받을 수 있다.
  이러한 기술을 Ajax라고 부른다.
  이를 위해 사용되는 주요 API는 Fetch API 이지만, 레거시로는 XMLHttpRequest API를 사용한다.

• APIs for drawing and manipulating graphics
  가장 인기 있는 것은 Canvas와 WebGL로, HTML <canvas> 엘리먼트에 포함된 픽셀 데이터를 프로그래밍 방식으로 업데이트하여 2D 및 3D 장면을 만들 수 있다.

• Audio and Video APIs
  HTML MediaElement, Web Audio API 및 WebRTC와 같은 API를 사용하면 오디오 및 비디오 재생을 위한 사용자 지정 UI 컨트롤 만들기, 동영상과 함께 캡션 및 자막과 같은 텍스트 트랙 표시, 웹 카메라에서 비디오를 가져와 canvas를 통해 조작하는 등 멀티미디어로 정말 흥미로운 작업을 수행할 수 있다.

• Device APIs
  장치 하드웨어와 상호 작용할 수 있다.
  예를 들어 Geolocation API를 사용하면 장치 GPS에 액세스하여 사용자의 위치를 찾을 수 있다.

• Client-side storage APIs
  클라이언트 측에 데이터를 저장할 수 있게 해준다.
  따라서 페이지 로드 간 상태를 저장하고 장치가 오프라인 상태일 때도 작동하는 앱을 만들 수 있다.
  단순한 name/value 을 이용한 Web Storage API, 보다 복잡한 데이터베이스 스토리지인 IndexedDB API가 있다.

Common third-party APIs

서드파티 API는 너무 다양하다.

그 중 유명한 몇개만 소개한다.

• Twitter API

• Google Maps API

• Facebook suite of APIs

• Telegram APIs

• YouTube API

How do APIs work?

They are based on objects

코드는 하나 이상의 JavaScript 객체를 사용하여 API와 상호 작용한다.

이 객체는 API가 사용하는 데이터(객체 속성)와 API가 사용할 수 있는 기능(객체 메서드)을 위한 컨테이너 역할을 한다.

They have recognizable entry points

API를 사용할 때는 API의 진입점이 어디에 있는지 확인해야 한다.

Web Audio API에서는 AudioContext 객체이다.

DOM API에서는 Document 객체 또는 HTML 엘리먼트의 인스턴스이다.

Canvas API에서는 HTMLCanvasElement.getContext() 메서드를 호출해서 생성되는 인스턴스이다.

They often use events to handle changes in state

일부 웹 API는 이벤트를 포함하지 않지만, 대부분은 최소한 몇 개를 포함한다.

이벤트 발생 시 함수를 실행할 수 있는 핸들러 속성은 일반적으로 "Event handler" 라는 레퍼런스 섹션에 정리되어 있다.

They have additional security mechanisms where appropriate

웹 API 기능은 자바스크립트 및 기타 웹 기술(예를 들어 same-origin policy)과 동일한 보안 고려사항을 따르지만, 때때로 추가적인 보안 메커니즘을 갖추고 있다.

예를 들어, 최신 웹 API 중 일부(예를 들어 Service Workers 및 Push)는 잠재적으로 중요한 데이터를 전송하기 때문에 HTTPS를 통해 제공되는 페이지에서만 작동한다.

또한 일부 웹 API는 코드에서 호출이 발생하면 사용자로부터 사용 권한을 요청한다.
예를 들어, Notifications API는 팝업 대화 상자를 사용하여 사용 권한을 요청한다.

Web Audio API와 HTMLMediaElement API는 autoplay policy 정책이라는 보안 메커니즘의 적용을 받는다.

이는 페이지가 로드될 때 브라우저가 오디오를 자동으로 재생시키면 안되고 사용자의 액션을 통해 재생되어야 한다는 것을 의미한다.

[참고] : MDN