Introduction to web APIs - Learn web development | MDN

먼저, 우리는 고수준에서 API에 대해 살펴보겠다. API란 무엇이며 어떻게 작동하며 코드에서 어떻게 사용하며 어떻게 구성되는지에 대해 알아볼 것이다. 또한 다양한 주요 API 클래스와 그들이 가지는 사용 예시를 살펴볼 것이다.

What are APIs?

애플리케이션 프로그래밍 인터페이스(API)는 프로그래밍 언어에서 제공되는 구조로, 개발자가 더 쉽게 복잡한 기능을 만들 수 있도록 도와준다. API는 복잡한 코드를 추상화하여 더 간편한 구문을 제공하여 대신 사용할 수 있도록 한다.

실제 예를 들어, 집, 아파트 또는 기타 거주지의 전기 공급을 생각해보세요. 집에서 기기를 사용하려면 플러그를 콘센트에 연결하면 작동합니다. 직접 전원 공급에 직접 배선을 하려고 하지 않습니다. 그렇게 하면 효율이 매우 떨어지며, 전기 기술자가 아닌 경우에는 시도하기 어렵고 위험할 수 있습니다.

Image source: Overloaded plug socket by The Clear Communication People, on Flickr.

마찬가지로, 예를 들어 3D 그래픽을 프로그래밍하려면 JavaScript나 Python과 같은 고수준 언어로 작성된 API를 사용하는 것이 컴퓨터의 GPU나 다른 그래픽 기능을 직접 제어하는 저수준 코드(예: C 또는 C++)를 작성하는 것보다 훨씬 쉽다.

APIs in client-side JavaScript(클라이언트 사이드 JavaScript의 API)

특히 클라이언트 사이드 JavaScript에는 많은 API가 사용 가능하다. 이들은 JavaScript 언어 자체의 일부가 아니라 핵심 JavaScript 언어 위에 구축되어 JavaScript 코드에서 사용할 수 있는 추가 기능을 제공한다. 이 API들은 일반적으로 두 가지 범주로 나눌 수 있습니다:

• 브라우저 API는 웹 브라우저에 내장되어 있으며, 브라우저 및 주변 컴퓨터 환경에서 데이터를 노출시키고 유용한 복잡한 작업을 수행할 수 있다. 예를 들어, 웹 오디오 API는 브라우저에서 오디오를 조작하기 위한 JavaScript 구조를 제공한다. 오디오 트랙을 가져오고 볼륨을 조절하고 효과를 적용하는 등의 작업을 수행할 수 있다. 실제로 브라우저는 백그라운드에서 실제 오디오 처리를 위해 복잡한 저수준 코드(C++ 또는 Rust 등)를 사용하고 있다. 그러나 다시 한 번, 이 복잡성은 API에 의해 추상화되어 개발자로부터 숨겨진다.
• 서드파티 API는 기본적으로 브라우저에 내장되어 있지 않으며, 일반적으로 해당 코드와 정보를 웹의 어딘가에서 가져와야 한다. 예를 들어, Twitter API를 사용하면 웹사이트에서 최신 트윗을 표시하는 등의 작업을 수행할 수 있다. 이 API는 트위터 서비스에 쿼리를 보내고 특정 정보를 반환하는 데 사용할 수 있는 특별한 구조체를 제공한다.

Relationship between JavaScript, APIs, and other JavaScript tools(자바스크립트, API 및 기타 자바스크립트 툴 간의 관계)

앞서, 클라이언트 사이드 JavaScript API가 무엇이며 JavaScript 언어와의 관계에 대해 이야기했다. 이를 명확히 이해하기 위해 간단히 정리하고, 다른 JavaScript 도구들이 어디에 들어가는지 언급해보겠다.

• JavaScript는 브라우저에 내장된 고수준 스크립팅 언어로, 웹 페이지 및 앱에서 기능을 구현할 수 있도록 한다. JavaScript는 노드(Node)와 같은 다른 프로그래밍 환경에서도 사용할 수 있다.
• 브라우저 API는 브라우저에 내장된 구조체로, JavaScript 언어 위에 구축되어 기능을 보다 쉽게 구현할 수 있도록 한다. 이러한 API를 사용하여 웹 브라우저의 기능을 활용할 수 있다.