[JS] Web APIs에 대해

1. APIs란

API(Application Programming Interfaces)란 프로그래밍 언어로 만들어진 일종의 데이터와 기능들의 모음, 구성정도로 생각하면 이해하기 쉽다. API는 특정 기능에 대한 복잡한 코드를 추상화해서 사용하기 쉬운 문법으로 제공한다는 것이 가장 큰 특징이다. 이를 사용하여 개발자들은 복잡한 기능을 쉽게 구현할 수 있다.

웹앱에서 3D 그래픽 개발을 하려면 어떻게 할 수 있을까? GPU를 직접적으로 다루는 C나 C++과 같은 low-level 프로그래밍 언어로 구현할 수도 있을 것이다. 하지만 저런 것들을 알지 못해도 괜찮다. 자바스크립트나 파이썬과 같은 high-level 프로그래밍 언어로 작성된 API를 사용하여 쉽게 개발할 수도 있다.

자바스크립트에서의 APIs

클라이언트단의 언어 자바스크립트는 아주 많은 APIs를 가지고 있다. 이는 언어 자체에 내장된 것은 아니며, 아래 두 가지 카테고리로 분류할 수 있다.

1. Broswer APIs
2. Third-party APIs

Broswer APIs는 웹 브라우저에 내장되어 있는 API로, 브라우저와 컴퓨터 환경에 관련된 데이터들을 가지고 유용한 일들을 해낸다. 예를 들어, Web Audio API는 트랙을 가져오거나, 볼륨을 조정하는 등의 브라우저 오디오를 조작하는 기능을 자바스크립트 코드로 제공한다. 백그라운드에서는 복잡한 low-level 코드를 통해 실제 오디오를 조작하고 있겠지만, 우리는 그런 과정을 신경 쓸 필요 없이 간편하게 추상화된 API를 적시 적소에 사용하기만 하면 되는 것이다.

Third-party APIs는 브라우저에 기본적으로 내장되어 있는 것이 아니라 다른 플랫폼에서 제공되는 데이터와 코드로 구성된 API이다. 대표적으로는 Youtube API가 있습니다.

2. Browser APIs가 하는 일

굉장히 많은 API들이 있지만 그 중에서도 모던 브라우저에서 흔히 사용되는 API들은 아래와 같다.

• documents 조작
• 데이터 가져오기
• 그래픽 조작
• 오디오, 비디오 조작
• 기기 조작
• 클라이언트단 저장소

documents 조작

DOM API는 HTML과 CSS를 조작할 수 있는 기능을 제공한다. 이를 통해 동적으로 HTML 구조를 변경하고, 새로운 스타일을 적용할 수 있다.

데이터 가져오기

XMLHttpRequest 나 Fetch API 를 사용하여 웹페이지의 일부분만을 업데이트할 수 있다. 전체 페이지를 리로드하지 않고도 빠르고 가볍게 기존 데이터의 업데이트가 가능하다.

그래픽 조작

Canvas나 WebGL은 HTML의 <canvas>요소에 픽셀 데이터를 업데이트 해 2D나 3D를 그릴 수 있는 기능을 제공한다. 예를 들면, Canvas API를 사용해 사각형이나 원을 그릴 수 있고 이미지를 입힐 수도 있으며, 세피아나 흑백 필터를 적용할 수도 있다. 혹은 WebGL을 사용해 텍스쳐를 입힌 복잡한 3D를 만들 수도 있다.

이런 그래픽 API들은 window.requestAnimationFrame()와 같은 반복 실행되는 애니메이션을 생성하는 API와 함께 쓰여 만화나 게임처럼 지속적으로 움직이는 그림을 그리는데 사용되기도 한다.

오디오, 비디오 조작

HTMLMediaElement, Web Audio API, WebRTC와 같은 API들을 사용해서 멀티미디어와 관련된 재밌는 일들을 할 수 있다. 오디오와 비디오의 재생 목록을 커스텀할 수 있고, 비디오에 캡션과 부제와 같은 텍스트를 표시할 수도 있고, canvas를 통해 웹 카메라를 조작하여 비디오를 만들어낼 수도 있고, 또 오디오 트랙에 패닝 기법등을 더할 수도 있다.

기기 조작

웹앱을 사용하고 있는 기기를 조작하거나 그로부터 데이터를 가져올 수 있는 API들이 있다. 대표적으로는 시스템 알림을 통해 사용자에게 가능한 업데이트가 있음을 알려주는 Notifications API, Vibration API가 있다.

클라이언트단 저장소

클라이언트단에서 데이터를 저장하고, 오프라인에서도 이를 사용할 수 있는 기능을 제공하는 API들이 있다. 간단한 key-value 형식의 데이터를 저장할 때는 Web Storage API를, 복잡한 데이터를 저장할 때는 IndexedDB API를 사용한다.

3. APIs가 동작하는 원리

기본적으로 자바스크립트 APIs는 object가 컨테이너로써 properties에 API 사용에 관련된 데이터가 포함되어 있고, method에 API를 작동시키는 실제 기능이 포함되어 있다.

아래는 플레이 버튼에 이벤트 리스너를 등록해 버튼을 누를 때마다 HTMLMediaElement API를 통해 음악을 재생하고, 멈추는 코드이다. <audio> 요소의 play(), pause() 메서드를 호출해 기능을 구현한다.

const audioElement = document.querySelector('audio');
const playBtn = document.querySelector('button');

playBtn.addEventListener('click', function() {
  // 중지 상태라면 재생시킵니다
    if (this.getAttribute('class') === 'paused') {
        audioElement.play();
        this.setAttribute('class', 'playing');
        this.textContent = 'Pause'
    // 재생 중이라면 중지시킵니다
} else if (this.getAttribute('class') === 'playing') {
        audioElement.pause();
        this.setAttribute('class', 'paused');
        this.textContent = 'Play';
    }
});