API와 브라우저의 객체 구조

UI (User Interface)

UI라는 용어는 개발을 공부하지 않더라도 한 번쯤은 접해볼 용어라고 생각한다. 넓은 의미가 아닌 컴퓨터 과학 분야에 한정한 의미로 생각했을 때, 사람과 컴퓨터 사이에서 일어나는 일을 통해 그 컴퓨터가 내부적으로 어떤 동작을 수행하고 있는지는 알 수 없지만 컴퓨터를 통해 하고자 하는 기능을 수행할 수 있다. UI는 이 내부적으로 수행하는 동작을 컴퓨터과 사람 사이에서 소통할 수 있도록 도와주는 매개체라고 보면 된다.

예를들어 우리가 음료 자판기를 통해 음료를 마시려고 할 때, 자판기가 내부적으로 어떻게 동작해서 동전을 받고 음료를 제공하는지 모르더라도 자판기의 표면에서 제공되는 동전 투입구와 메뉴 선택 버튼을 통해 원하는 기능을 이용할 수 있는 것과 같다.

API (Application Programming Interface)

응용 프로그램과 컴퓨터가 소통할 수 있도록 도와주는 매개체로 위의 UI를 이해하고 봤을 때, API는 그 사용자라는 대상이 응용 프로그램으로 바뀐 것이다. 컴퓨터 간에도 서로 사용하는 운영체제와 프로그래밍 언어가 달라서 내부적으로 어떤 동작을 수행하는지 알 수 없지만 그것을 소통할 수 있도록 도와줌으로써 하고자 하는 기능을 수행할 수 있다.

그래서 각 애플리케이션에서 제공해주는 API를 통해 개발자는 그 기능을 일일히 개발하지 않더라도 보다 쉽게 원하는 기능을 만들수 있다.

---

Web APIs

브라우저 자체에서 공통적으로 제공하기로 규약된 API를 말하며,
아래와 같이 다양한 API가 존재한다.

• DOM APIs : 웹페이지의 요소 조작 기능
• Network APIs : 서버와 통신 기능
• Graphics ApIs : 그래픽 관련
• Audio/Video APIs : 멀티미디어 관련
• Device APIs : 사용자 장치 관련
• File APIs : 파일 관련
• Storage APIs : 저장소 관련

이외에도 수 많은 API가 있으며, 나머지는 필요할 때마다 MDN 사이트에 가서 찾아 적용하면 된다.

[ MDN - Web API ] https://developer.mozilla.org/ko/docs/Web/API

Web API | MDN

---

웹 브라우저의 객체 구조

window : 브라우저에서 현재 열려있는 전체적인 창을 의미한다. DOM, BOM, JavaScript를 모두 포함하는 브라우저의 최상위 Object이며, 이것 때문에 브라우저는 this를 사용하는 경우 기본적으로 window 객체를 가리키고 있다. ( 이 부분에 대해서는 실행 컨텍스트의 this binding에 대해 공부하면 이해하는데, 도움이 된다.)

document : window 안에 페이지가 표기 되는 부분으로 HTML이 작성되어 구조화되는 부분을 말한다.

navigator : 전체적으로 브라우저 관련된 정보를 담고 있는 객체로 읽기 전용 속성으로 접근할 수 있다.

---

window 구성 요소

DOM (Document Object Model) : 문서의 구조화된 표현을 제공하고, 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서의 구조를 변경할 수 있도록 돕는 역할을 수행하는 window 하위 객체 중 하나이다.

BOM (Browser Object Model) : 브라우저에서 제공하는 메서드와 속성을 담은 내장객체로 공식 표준은 없지만  window 객체의 하위에서 특정 객체들을 상위 계층 순서대로 .(온점)을 통해서 구분되어지며 모든 브라우저의 객체들은 window 아래에서 작동하는 객체이기 때문에 루트(root)인 window는 생략이 가능하다.

JavaScript : 자바스크립트가 가지고 있는 내장객체로 Array, Map, Data 등이 있다.

전반적으로 이렇게 구성요소를 이루고 있기 때문에 자바스크립트를 이용해 DOM과 BOM 등의 Web API를 다룰 수 있게 된다.

브라우저에서 기본적으로 제공되어지는 APIs (...)