DOM(DOM API), Browser API

DOM 이란?

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.
DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
DOM 이란? - MDN web docs

javascript 를 통해 웹 콘텐츠를 동적으로 제어할 수 있는 이유는 DOM 이 중간에서 interface 역할을 해주기 때문입니다.

DOM 에 대한 표준 스펙은 W3C DOM 에서 확인할 수 있으며, 표준 스펙 이외에도 웹 브라우저마다 추가적인 기능을 제공하므로 브라우저 환경에 따라 다르게 동작할 수 있습니다.

Browser API 란?

Browser API 는 웹 브라우저에 내장되어 있으며, 브라우저 및 주변 컴퓨터 환경에서 데이터를 제공하거나 복잡한 작업을 수행 할 수 있습니다. 예를 들어, Web Audio API 는 브라우저에서 오디오를 조작하기 위한 Javascript 구성을 제공합니다.
웹 API 소개 - MDN web docs

Browser API 종류는 웹 브라우저마다 차이가 있으므로 브라우저 환경에 따라 다르게 동작할 수 있습니다.

대표적인 Browser API 종류는 아래와 같습니다.

• 웹 콘텐츠 조작을 위한 DOM

• 서버에서 데이터를 가져오기 위한 XMLHttpRequest 및 Fetch

• 그래픽 그리기 및 조작을 위한 Canvas 및 WebGL

• 오디오 및 비디오 조작을 위한 Web Audio 및 WebRTC

• 웹 브라우저에 데이터를 저장하기 위한 Web Storage

동기와 비동기의 차이

비유를 통한 쉬운 설명

해야할 일(task)가 빨래, 설거지, 청소 세 가지가 있다고 가정한다. 이 일들을 동기적으로 처리한다면 빨래를 하고 설거지를 하고 청소를 한다. 비동기적으로 일을 처리한다면 빨래하는 업체에게 빨래를 시킨다. 설거지 대행 업체에 설거지를 시킨다. 청소 대행 업체에 청소를 시킨다. 셋 중 어떤 것이 먼저 완료될지는 알 수 없다. 일을 모두 마친 업체는 나에게 알려주기로 했으니 나는 다른 작업을 할 수 있다. 이 때는 백그라운드 스레드에서 해당 작업을 처리하는 경우의 비동기를 의미한다.

Sync vs Async

일반적으로 동기와 비동기의 차이는 메소드를 실행시킴과 동시에 반환 값이 기대되는 경우를 동기 라고 표현하고 그렇지 않은 경우에 대해서 비동기 라고 표현한다. 동시에라는 말은 실행되었을 때 값이 반환되기 전까지는 blocking되어 있다는 것을 의미한다. 비동기의 경우, blocking되지 않고 이벤트 큐에 넣거나 백그라운드 스레드에게 해당 task 를 위임하고 바로 다음 코드를 실행하기 때문에 기대되는 값이 바로 반환되지 않는다.