1. API란?
Application Programming Interface. 프로그램이 동작하는 환경을 제어하기 위해 환경에서 제공되는 조작 장치이다. 이는 프로그래밍 언어를 통해 조작할 수 있다.
2. UI와 API의 차이점
둘 다 인터페이스라는 점은 동일하다. 그럼 둘의 차이점에 대해 살펴보자.
UI
컴퓨터 시스템과 컴퓨터를 사용하는 사람 사이의 접점에 존재하면서, 사람이 생각하는 바를 컴퓨터에게 전달하는 입력 장치들 혹은 시스템의 상태를 사용자에게 알려주는 출력 장치들에 해당되는 그 접점, 중계자에 해당되는 것을 User Interface라고 한다. 즉 사용자를 대면하는 접점이 되는 지점을 포괄적으로 일컫는다.
웹 사이트에 접속하면 메뉴, 댓글기능, 게시판 등 많은 기능들이 있다. 이들도 UI이다. 노트북에 있는 UI를 물리적인 기계 조작 장치가 있는 하드웨어적인 것이라고 한다면 웹 사이트에서 본 UI는 소프트웨어적으로 구현된, 사용자의 의중을 시스템에게 전달하고 시스템의 상태를 사용자에게 전달하는 것이다.
API
주소창에 javascript:alert("Hello world"); 를 입력하고 엔터를 쳐보자. 그럼 웹 페이지 메시지가 뜬다.
코드를 웹 브라우저에게 제출하면 브라우저는 우리가 작성한 명령어에 따라서 위의 그림과 같은 UI 화면인 경고창을 출력한다.
화면에 출력된 이 경고창은 우리가 만든 것일까? 경고창은 브라우저 화면의 가운데에 놓이고, '확인' 버튼을 누르면 경고창이 닫힌다. 실제로 브라우저 화면의 가운데에 놓으려면 수직, 수평적으로 가운데에 놓고 경고창 크기의 절반만큼 수직, 수평으로 back 해야 한다. 이 경고창도 사실 복잡한 애플리케이션인 것이다. 이 내용들을 우리가 기술한 바가 있는가? 없다. 그러니 경고창은 우리가 만든 것이 아니다. 하지만 동시에 우리가 alert라는 명령어를 브라우저에게 전달했기 때문에 경고창에 우리가 작성한 텍스트가 뜬다. 따라서 경고창은 우리가 만들지 않은 것이면서도 우리가 만든 것이 된다.
우리가 alert 명령어를 브라우저에게 전달하면 브라우저가 경고창이 출력되도록 명령한다. 그런 점에서 alert 명령어는 우리가 웹 브라우저를 제어하는 일종의 인터페이스라고 할 수 있다. 하지만 이 인터페이스는 경고창 내에 있는 완료 버튼과 같은 형태가 아닌, 코드의 형태를 띄고 있다. 우리는 웹 브라우저가 제공하고 있는 이러한 코드들을 다양한 방법으로 결합하여 애플리케이션을 만든다. 그런 점에서 alert와 같은 인터페이스를 사용자가 사용하는 인터페이스(UI)와 구분하기 위해서 우리는 Application Programming Interface, API라고 부른다. 이러한 웹 브라우저를 기반하는 시스템이 우리에게 제공하는 alert과 같은 것들을 우리가 응용하여 만든 것이 바로 소프트웨어 혹은 프로그램이다.
기반 시스템과 응용 프로그램
그럼 이 경고창 API는 누가 미리 만들어 놓은 것일까? 웹 브라우저 개발자에 소속된 개발자들이다. 이 개발자들 덕분에 우리는 alert만 입력하면 복잡한 프로그램을 적은 노력을 소요하여 사용할 수 있다. 여기서 일반 사용자와 개발자들의 차이점도 알 수 있다. 일반 사용자들이 사용하는 UI를 통해 시스템을 제어하고 지휘한다면, 개발자들은 alert과 같은 API를 통해 소프트웨어(웹 브라우저)를 제어한다. 즉 개발자가 아닌 사람들은 UI를 통해 시스템을 제어하고, 개발자는 UI도 사용하지만 API를 이용하여 자신의 맥락에 맞게 응용하여 애플리케이션(웹 브라우저) 플랫폼을 제어한다.
그렇다고 개발자가 애플리케이션의 모든 동작 방법을 처음부터 끝까지 만드는 것은 아니다. 경고창에 있는 버튼은 마이크로소프트 윈도우즈 개발자들이 미리 만들어서 제공되는 버튼을 사용한 것이다. 웹 브라우저 개발자는 미리 만들어진 버튼을 호출하고 조합하여 경고창을 만들 수 있도록 준비해 놓은 것이다. 웹 브라우저 개발자들도 마찬가지로 운영체제가 미리 제공해놓은 API를 이용하여 웹 브라우저를 만든다.
운영체제 플랫폼(기반 시스템)이 제공하는 API를 이용하여 브라우저(응용 프로그램)을 만든 웹 브라우저 개발자들은 응용 프로그램 개발자이다. 이와 동일한 맥락으로, 브라우저에 코드를 제출하여 경고창이 출력된 상황을 다시 보면 브라우저는 우리에게 기반 시스템 즉 플랫폼이며 우리는 이 플랫폼이 제공하는 API를 이용하여 응용 프로그램을 만든 것이므로 우리는 응용 프로그램 개발자가 된다.
UI와 API의 계층적 관계
이처럼 UI와 API는 계층적인 관계로 나타낼 수 있다. API가 개발되어야 UI로 나타낼 수 있기 때문이다. 그리고 이 둘의 접점이 바로 interface이다.
사용자와 개발자
더 나아가 사용자와 개발자를 그림3으로 나타낼 수 있다. 개발로는 웹, 앱, .. 등 다양하지만 아래는 웹을 예로 든 것이다.
더 나아가 사용자와 개발자 사이는 UI로 연결되어 있다.
각 층은 인터페이스로 연결이 된다. 아래로 내려갈수록 소프트웨어의 심연을 의미하며, 더 적은 사람들이 종사하고 있다. 또한 이들은 위에 있는 것들에게 기반이 되는 인프라를 제공한다. 기반 시스템과 응용 프로그램에서 설명한 것과 동일하게 이해하면 된다.
3. API 문서
앞에서 우리는 개발자는 소프트웨어 환경이 제공하는 API(조작장치)를 통해서 소프트웨어를 제어한다는 것을 알게 되었다. 그러므로 우리는 우리가 제어하고자 하는 환경이 제공하는 API는 무엇이 있으며, 각 API의 특성과 사용법에 대한 지식이 필요하다. 하지만 항상 이 지식을 알고 있을 순 없으므로 결국 우리는 우리가 필요한 것을 찾아내고자하는 능력을 스스로 기르는 것이 프로그램을 주체적으로 작성하는 핵심이다.
레퍼런스와 튜토리얼
프로그래밍을 공부하기 위한 자료로 크게 레퍼런스와 튜토리얼이 있다. 튜토리얼은 언어의 문법을 제공하고, 레퍼런스는 명령어의 사전을 의미한다.
자바스크립트의 API
자바스크립트의 레퍼런스는 두 가지로 나뉘어진다. 하나는 자바스크립트 언어 자체의 API이며, 또 하나는 자바스크립트가 동작하는 호스트 환경(웹 브라우저, Node.js, Google Apps Script, ...)의 API이다.
따라서 우리는 자바스크립트 API 뿐만 아니라 호스트 환경이 제공하는 API도 익혀야 한다.
자바스크립트 API 문서
호스트 환경의 API 문서
'Front-End: Web > JavaScript' 카테고리의 다른 글
| for in & for of (0) | 2021.06.11 |
|---|---|
| 정규표현식 (0) | 2021.05.28 |
| 라이브러리(Library) (0) | 2021.05.26 |
| 모듈(Module) (0) | 2021.05.26 |
| 객체(Object) (0) | 2021.05.26 |
