2021-11-05 19:30 작성

API에 대한 개념

Table of contents

1. 도입

API(Application Programming Interfaces)는 개발자가 어려운 기능을 좀 더 쉽게 사용할 수 있도록 하는 구조체다. API는 복잡한 코드를 간단한 문법 구조로 압축하여 적절하게 활용할 수 있도록 돕는다.

2. 이해를 돕기 위한 예시

집이나, 아파트, 거주지에서 전기공급을 한다고 생각해보자. 만약 집에서 전자기기를 사용한다고 하면 소켓에 플러그를 꼽으면 바로 작동하는 것을 모두 알고 있을 것이다. 그러나 소켓이 없다면 어떡해야 할까? 전기에 대한 기본적 지식과 연결 방법 등을 알고 있어야 할 것이며 위험을 동반한 채 작업을 해야 할 것이다.

API는 마치 소켓과 같다. 진입장벽이 높은 기술적 어려움을 압축해 간단한 문법 구조체로 사용자에게 제공을 해준다는 점에서 그렇다고 할 수 있다.

3. Client-side JavaScript에서의 API

Client-side JavaScript는 많은 API를 가지고 있지만 이 API들은 JavaScript 언어 그 자체가 아닌 JavaScript 코어 위에 만들어졌다고 표현할 수 있다. 일반적으로 두 가지로 나뉘는데 Browser APIs와 Third-party APIs가 그것이다.

  • Browser APIs는 웹브라우저 상에서 동작하는 API로 복잡한 기능을 간편하게 구현할 수 있다. 예를 들어, Web Audio API는 오디오 정보를 받아 오거나 볼륨을 조절하거나 효과를 적용하는 등의 기능을 쉽게 구현할 수 있도록 돕는다. 만약 우리가 직접 이 기능을 구현하려면 Lower-level code(e.g. C++ 혹은 Rust를 사용하여 실제 오디오에 접근해야 하는데 API를 통해 우리는 이러한 복잡한 구현 과정을 생략할 수 있다.

  • Third-party APIs는 브라우저에서 구현하는 API가 아닌 웹 어플리케이션 등에서 정보 그리고 코드를 받아오는 API를 뜻한다. 예를 들어 내가 원하는 사이트에서 트위터의 게시물을 가져오고 싶다면 이것은 꽤 복잡한 일일 것이다. 트위터의 게시물 데이터를 가져오는 것이 전부가 아니라 보안 문제를 해결해야 하고 UI가 없다면 UI도 따로 구성해줘야 하기 때문이다. 트위터 API는 이럴 때 기능을 발휘한다. 많은 시간을 할애하지 않고도 위의 모든 사항을 충족하며 구현할 수 있기 때문이다.

4. JavaScript, APIs 그리고 그 외의 JavaScript tools

상기한 것처럼 API는 복잡한 구현과정을 생략할 수 있게 만드는 구조체다. 그러나 헷갈릴 수 있는 단어들이 있기에 정리해보려고 한다.

  • JavaScript - High-level(인간 친화적) 언어로 웹페이지나 웹어플리케이션의 기능을 구현하게끔 만들어 준다.(참고: Node환경에서도 기능)

  • Browser APIs - JavaScript 언어 위에 얹혀진 구조체로 기능을 좀 더 쉽게 구현할 수 있도록 돕는다.

  • Third-party APIs - Third-party platforms(e.g. 트위터 혹은 페이스북)에서 구현해놓은 구조체로 특정 플랫폼의 기능을 자신의 웹사이트 혹은 웹페이지에 쉽게 적용할 수 있게 한다.

  • JavaScript libraries - 하나 혹은 여러 개의 custom functions로 구성된 JavaScript 파일을 말한다. 이 Library를 통해 웹페이지에서 일반적 기능을 하는 것들을 더욱 빠르게 구성할 수 있도록 돕는다. 예를 들어, jQuery, Mootools 그리고 React가 속한다고 볼 수 있다.

  • JavaScript frameworks - Library보다 한 단계 더 나아가서 Frameworks(e.g. Angular, CRA 그리고 Next JS 등)는 HTML, CSS, JavaScript 그리고 다른 기술들을 한 번에 설치하고 그 안에서 관리될 수 있도록 한다. Library와 다르게 Framework는 개발자의 control(통제) 선 상에 있지 않고 Framework를 통해 개발자의 코드를 불러온다.

5. 참고

실제 API가 어떤 식으로 동작하는지 확인하고 싶다면 아래의 링크에서 AudioContext 예제를 확인하면 된다. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction

라이센스

크리에이티브 커먼즈 라이선스
이 저작물은 크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.