📑 이번에 다룬 공식문서:

Mdn web docs 의
Introduction to web APIs
✅ 작성자 편한대로, 이해한 대로, 기억하고 싶은 부분만 chat-gpt 와 함께 번역하며 재구성했습니다. 되도록이면 위의 원문을 봐주세요.
⚡️ 해당 이모지가 있는 부분은 원문에 없는 작성자의 사족입니다.

✨ 세 줄 요약

API 는 복잡한 코드를 추상화하여 단순화한 구문을 제공해 개발자가 더욱 쉽게 기능을 구현할 수 있도록 해주는, 프로그래밍 언어로 제공된 구조이다.
마치 직접 전원공급장치에 연결하지 않아도 콘센트만 꽂으면 전자기기에서 전기를 사용할 수 있는 것과 같다.

✒️ 느낀 점

금융권에서 리서치 관련 업무를 하는 친구를 오랜만에 만나게 되었다. 그러다 본인이 결제 api 를 통한 결제 지원에 대해서 요즘 조사를 하고 있는 중이라며 도대체 api 가 뭐냐고 물었다. 나는 api 라는 결국 하나의 다양한 일을 처리하는 묶음이자 주어진 일을 처리하는 서비스 묶음이라고 했는데, 친구가 그럼 관문이라는 말이야? 라고 물었고, 2번 정도 더 부연 설명을 했지만, 여전히 그럼 내가 관문이라고 한게 맞는거 아니야? 라고 같은 얘기를 했었다. 여기서 2가지를 깨달았는데, 일단 1) 내 정보전달 능력의 처참함과 2) api 가 무엇인지에 대해 맘에 쏙 드는 설명을 못한다는 점이었다. 그래서 이번 글을 쓰게 되었다.

APIs 가 뭔데?

Application Programming Interfaces 의 줄임말이다. 이는 프로그래밍 언어로 제공된 구조로 개발자가 복잡한 기능을 쉽게 만들 수 있도록 하는 것이다. 복잡한 코드를 추상화하여 더 간편한 구문을 제공한다.

현실 세계의 예시를 들어보자면, 집이나 회사에서 기기를 사용할 때 꽂는 콘센트를 생각해보자. 사용하고 싶은 기기의 플러그를 꼽기만 하면 전기가 바로 들어온다. 전기를 연결하기 위해 직접 전원공급장치에 연결할 필요가 없는 것이다. 만약 전기를 쓸 때마다 직접 전원공급장치에 연결해야 된다면 전기기사가 아닌 이상 매우 어렵고 복잡하며 위험하고 비효율적일 것이다.
⚡️ 여기서 무릎을 쳤다! 콘센트! 아주 맘에 드는 비유였다.

같은 맥락에서 만약 3D 그래픽을 프로그래밍하고 싶다면 자바스크립트나 파이썬과 같은 고수준 언어로 작성된 API 를 사용하는 것이 C나 C++과 같은 저수준 언어를 사용해 직접 컴퓨터의 GPU 를 조절하고 그래픽 관련 기능을 사용하는 것보다 훨씬 쉬울 것이다.

자바스크립트 클라이언트 측의 API

클라이언트 측의 자바스크립트는 다양한 API 를 사용할 수 있다. 이 API 들은 자바스크립트 언어자체의 일부가 아니라 자바스크립트의 핵심 언어 위에 구축된 것이다. 이를 통해 자바스크립트 코드에서 추가적인 슈퍼파워를 쓸 수 있다. 이 API 는 크게 2가지로 나뉜다.

• 브라우저 API는 웹 브라우저에 내장되어 있으며 브라우저와 주변 컴퓨터 환경에서 데이터를 노출시킬 수 있으며 유용한 복잡한 작업을 수행할 수 있다. 예를 들어, Web Audio API는 브라우저 내에서 오디오를 조작하기 위한 JavaScript 구조를 제공한다. 오디오 트랙을 가져오고 볼륨을 조절하며 효과를 적용하는 등의 작업이 포함된다. 실제로 브라우저는 백그라운드에서 복잡한 하위 수준 코드(C++이나 Rust 등)를 사용하여 실제 오디오 처리를 수행한다. 그러나 이러한 복잡성은 API에 의해 추상화되어 사용자로부터 숨겨져있다.

• 제3자 API는 기본적으로 브라우저에 내장되어 있지 않으며 일반적으로 웹에서 해당 코드와 정보를 얻어와야 한다. 예를 들어 Twitter API는 웹사이트에서 최신 트윗을 표시하는 등의 작업을 수행할 수 있게 해주는데 이는 Twitter 서비스를 쿼리하고 특정 정보를 반환하는 데 사용할 수 있는 특별한 구조를 제공해주고 있기 때문이다.

자바스크립트, API, 다른 자바스크립트 툴 간의 관계 정리

• 자바스크립트: 브라우저에 내장된 고수준 스크립트 언어로서 웹페이지나 앱에서 기능을 구현할 수 있도록 해준다. 자바스크립트는 브라우저 뿐만이 아니라 Node 라는 다른 프로그래밍 환경에서도 사용할 수 이싿.
• 브라우저 API: 자바스크립트 언어를 근간으로 하여 브라우저에 내장된 구조로 기능구현을 더욱 쉽게 할 수 있도록 도와준다.
• 제 3자 API: 트위터나 페이스북과 같은 다른 플랫폼에서 만들어진 구조로 해당 플랫폼의 기능을 내 웹페이지에 적용할 수 있도록 해준다.
• 자바스크립트 라이브러리: 웹페이지에 적용하거나 속도를 빠르게 개선시키기 위한 커스텀 기능을 하나 또는 여러개를 가지고 있는 자바스크립트 파일이다. jQuery 나 리액트가 예시이다.
• 자바스크립트 프레임워크: 라이브러리보다 한 단계 위에 있는 것으로 (Angular 등) HTML, CSS, 자바스크립트와 여러 기술의 패키지 형태이다. 이를 설치하고 나면 전체 어플리케이션을 작성하는데 사용된다. 라이브러리와 프레임워크의 가장 큰 차이는 제어의 역전(Inversion of Control) 이다. 라이브러리에서 개발자가 메소드를 호출하면 개발자에게 제어권이 있지만 프레임워크에서는 반대로 프레임워크 자체가 개발자의 코드를 호출한다.
  ⚡️ 즉, 애플리케이션의 흐름을 라이브러리에서는 직접 제어하기 때문에 원하는 기능이 있을 경우 여기에 사용될 라이브러리를 직접 호출하여 사용하고 필요하다면 기존의 함수와 코드를 직접 불러와야 합니다. 하지만 프레임워크, 대표적으로 스프링을 생각해보면 정확한 위치에, 정확한 방식으로 작성해놓고 연결만 해놓으면 알아서 필요한 코드를 호출해 기능을 만들어줍니다. 이것을 제어의 역전이라고 설명합니다.

그래서 API 가 뭘 할 수 있는데?

일반적인 브라우저 API

• 브라우저에서 로드된 document(페이지) 를 관리할 수 있도록 해주는 API: 가장 대표적인 API 는 DOM (Document Object Model) API 이다. HTML과 css 를 수정할 수 있도록 해준다. HTML 을 새로 만들거나 지우거나 수정하고 스타일을 동적으로 수정할 수 있도록 해준다.
  ⚡️개발자 도구 열고 elements 탭에서 태그를 지우면 없어지는 걸 말하는거다
  
• 서버에서 데이터를 가져와 웹페이지의 작은 섹션을 자체적으로 업데이트하는 API: 웹페이지의 작은 부분의 데이터를 fetch 하는 것은 매우 자주 쓰인다. 이 사소해보이는 디테일이 때론 사이트의 성능과 동작에 큰 영향을 끼칠 수 있다. 쇼핑리스트를 업데이트해야될 때 전체 페이지를 새로 로드할 필요없이 즉시 해당부분만 업데이트를 한다면 사이트나 앱이 훨씬 빠르고 반응적으로 보일 수 있다. 이 기법을 설명할 때 Ajax 라는 용어를 사용하기도 한다.
  ⚡️이렇게 일부 데이터만 바꾸면 될 때 여기만 바꿀 수 있도록 해주는 것이다!
  
• 그림그리기와 그래픽을 관리하는 API: 이 기능도 정말 다양하게 일반적으로 사용된다. 가장 유명한 것은 Canvas(⚡️맞아 이거 재밌었지 ㅋㅋㅋ) 와 WebGL 이 있다. 이를 활용하면 HTML 의 <canvas> 요소안을 픽셀 단위로 개발에서 관리하여 2D(Canvas)와 3D(WebGL)를 씬을 만들 수 있도록 해준다. ⚡️Canvas 에서는 심지어 컴퓨터의 GPU를 활용해서 그려준다!
• 오디오와 비디오 API: HTMLMediaElement, the Web Audio API, 그리고 WebRTC 를 활용해서 음악이나 비디오를 재생하거나 자막을 비디오에 넣어준다는다, 웹카메라로 영상을 찍는다던가 하는 커스텀 멀티미디어 UI 를 만들 수 있도록 해준다.
• 기기(Device) API: GPS 와 같은 기기의 하드웨어를 사용할 수 있도록 해준다.
• 클라이언트 측 저장소 API: 클라이언트 측에 데이터를 저장할 수 있게 해주어 앱을 만들 수 있다. 페이지 로드 사이에 상태를 저장하고, 기기가 오프라인 상태일 때에도 작동할 수 있는 앱을 만들 수 있다. 예를 들어 Web Storage API를 사용한 간단한 이름/값 저장 및 IndexedDB API를 사용한 더 복잡한 데이터베이스 저장 등이 있다. (⚡️로컬, 세션 스터리지 같은거!)
  

일반적인 제 3자 API

제 3자 API 는 매우 다양하기 때문에 가장 유명한 일부를 여기에 소개하도록 하겠다.
⚡️ 정말 목록을 적어둔거라 여기선 2가지만 적겠습니다. 나머진 여기서 봐주세여

• 트위터 API: 웹사이트에 최신 트윗을 표시하는 등의 작업을 수행할 수 있는 API
• 지도 API: Google Maps API와 같은 API는 웹 페이지에서 지도와 관련된 다양한 작업을 수행할 수 있게 해준다.