개인 공부를 할 때도, 회사에서 작업을 할 때도 숨 쉬듯 사용하고 있는 웹 api에 대한 정리를 MDN 문서를 읽어보며 중요하게 생각되는 부분들을 따로 정리해 봅니다.
API란?
Application Programming Interfaces란 한국어로 번역하면 응용프로그래밍 인터페이스를 의미합니다.
개발자가 복잡한 기능을 쉽게 개발할 수 있도록 프로그래밍 언어로 코드를 제공하는 것으로 개발자(사용자) 입장에서는 내부에서 코드가 어떻게 생겼는지 신경 쓰지 않아도 쉽게 기능을 가져다 쓸 수 있도록 도와줍니다.
일상 생활에서의 예시를 들자면 컴퓨터를 우리집에 연결해서 사용하고 싶을 때 우리는 플러그인을 콘센트에 꼽아서 바로 사용합니다. 플러그인의 회로가 어디로 연결되고 콘센트의 구조가 어떻게 생겼는지 신경쓰지 않아도 사용자는 플러그인을 꼽기만 하면 컴퓨터를 사용할 수 있습니다. :) API란 이 예시에서는 플러그인을 의미합니다.
클라이언트 사이드에서 사용하는 API
(feat. javascript로 사용 가능)
| 브라우저 API |
|---|
| 브라우저에 내장되어 있는 API로 브라우저를 이용해 복잡한 작업들을 쉽게 구현할 수 있도록 도와주는 녀석들 입니다. 🙂 비디오 플레이를 시키거나 오디오 소리가 나도록 동작하는 것은 실제로는 백그라운드에서 C++언어와 같은 로우한 언어로 구현이 되어 있지만 사용자가 쉽게 자바스크립트로 사용할 수 있도록 처리가 되어있습니다. |
| 써드파티 API |
|---|
| 써드파티 API는 브라우저에 내장되어있는 API가 아닌, 외부에서 가져다 쓰는 API입니다. 트위터나 유튜브와 같이 최근 목록 가져오기 기능을 사용하고 싶을 때 해당 서비스에서 제공하는 API를 말합니다. |
웹 API가 하는 일
- 브라우저에 로드된 문서를 조작하는데 도움을 줍니다. (HTML을 생성하고 삭제하고 CSS로 HTML의 스타일을 적용하는 등)
- 웹 페이지의 일부를 업데이트 해 주는데 도움을 줍니다. (XMLHttpRequest)
- 그래픽 요소들을 웹 페이지에 그리는데 도움을 줍니다. (canvas)
- 오디오와 비디오 작업을 웹 페이지에서 가능하도록 도와줍니다.
- 클라이언트 측 저장소를 사용할 수 있게 도와줍니다. (local storage, session storage)
웹 API가 동작하는 방식
웹에서 사용하는 API들은 제각각 다양한 방식으로 동작하지만 공통적인 부분이 존재합니다.
객체 기반으로 동작 ✨
웹에서 사용하는 API들은 하나 이상의 자바스크립트 객체를 이용해서 동작하도록 합니다.
웹 페이지에서 오디오를 동작시키는 아주아주 추상적인 예시에서 보자면
AudioContext 객체를 사용해 오디오를 조작하는데 사용하는 여러 메서드와 속성을 사용하고
MediaElementAudioSourceNode 객체를 사용해 AudioContext 안에서 사용하는 사운드 요소인 <audio>태그를 구현합니다.
그리고 AudioDestinationNode 객체를 사용해 실제로 소리를 출력해주는 컴퓨터 장치와 연결시켜줍니다.
엔트리 포인트가 항상 존재 ✨
웹 API의 어떤 것을 사용하든 진입점을 확인해야 합니다.
웹 페이지에서 오디오를 동작시키기 위해선 AudioContext 객체부터 접근해야 합니다.
웹 페이지에서 돔 요소를 변경하고 싶다면 document 객체부터 접근해야 합니다.
이벤트를 사용해 상태를 변경
XMLHttpRequest 객체와 같이 HTTP 요청을 서버로 보내서 새로운 리소스를 제공하는 녀석들은 onload, open, send와 같은 많은 이벤트를 가지고 있습니다.
경우에 따라 보안 설정
웹 API 기능들은 자바스크립트 및 다른 웹 기술과 동일한 보안 정책을 가져가지만 경우에 따라선 민감한 데이터를 보내야할 수도 있기 때문에 몇몇의 Web API들은 HTTPS 에서만 동작합니다.
그 외 용어 정리
| 자바스크립트 라이브러리 |
|---|
| 웹 페이지에 추가해서 공통 기능 작성 속도를 높여주거나 사용자 정의 함수가 포함된 하나 이상의 자바스크립트 파일들을 의미합니다. 리액트와 제이쿼리에 여기에 속합니다. 단순 도구의 개념이기 때문에 코드를 제어할 수 있는 주도권을 사용자가 가지고 있습니다. (이것을 가지고 내가 사용하는 느낌) |
| 자바스크립트 프레임워크 |
|---|
| HTML, CSS, JS 및 개발에 필요한 기술들을 패키지로 묶어서 한 번에 제공해줍니다. 사용자는 이런 환경에서 개발을 하기 때문에 코드를 제어할 수 있는 주도권은 사용자가 아닌 프레임워크가 가지고 있습니다. (거기 있는 걸 사용하는 느낌) |
정리
✔ 웹 API란 개발자가 브라우저 상에 쉽게 개발할 수 있도록 도와주는 객체 모음들입니다.
✔ 웹 API를 이용해서 돔요소를 조작하거나 일부 영역을 업데이트 시키거나 비디오나 오디오나 그래픽 요소를 사용할 수 있습니다.
✔ 웹 API는 객체 기반으로 동작하고 엔트리 포인트가 존재합니다.
