[JavaScript] API = DOM + JavaScript

Hyewon·2024년 4월 4일

JavaScript 개념 정리

목록 보기

1/3

MDN에서 DOM에 관해 찾다보면 API = DOM + JavaScript라는 식을 볼 수 있다. 이 식의 의미를 어떻게 이해하면 좋을까? 이 글에서는 먼저 API, DOM, JavaScript 각각에 관해 알아보고, 이들의 관계를 보여주는 위 식을 이해해 볼 것이다.

세 요소 간단히 이해하기

API가 무엇일까?

API(Application Programming Interface)는 소프트웨어 인터페이스로, 흔히 함수(function), 메서드(method), 연산(operation) 등으로 불린다. 다만, API는 구체적인 구현이 아니라 추상적인 사양을 정의한다. 입력값, 동작, 출력값 등의 사양을 정의하며, API를 만족하는 실제 구현은 다양할 수 있다는 의미다. API의 대표적인 예시로 유닉스의 POSIX 표준, 윈도우의 MFC나 Win32, C++의 표준 템플릿 라이브러리(STL), Java SE API 등이 있다. 웹 개발자에게 익숙할 만한 예시로는 아래에서 얘기할 DOM API나, 웹 통신에서 사용되는 Web API, 기업에서 제공하는 서드파티 API 등이 있다.

간단한 예시인 JavaScript의 console API로 API의 개념과 장점에 대해 알아보자. 사용자가 브라우저 콘솔에 "string"이라는 글자를 출력하고 싶다고 가정하자. console API를 확인하고 console.log('string');이라고 입력하면, 원하는 대로 "string"이라는 출력을 받을 수 있다. 이때, console API는 log 메서드가 어떤 값을 받아 어떤 기능을 수행하는지만 명시해준다. 실제 console.log 메서드의 세부 구현은 브라우저마다 다양하다. API를 사용했을 때의 장점은, 사용자가 구체적인 구현에 대해서 고민하지 않아도, API에 명세된 내용을 참고하여 원하는 기능을 사용할 수 있다는 것이다. 다시 말해, 다른 사람이 개발한 기능이 어떤 것인지 알고 사용하는 데 드는 비용을 줄일 수 있다. 또, 서로 다른 OS, 컴파일러, 브라우저 간에도 호환성을 유지할 수 있게 해준다. 세부 구현은 다르더라도 같은 API 명세를 지키면, console.log('string');를 어느 브라우저에서 실행해도 브라우저 콘솔에 "string"이 출력될 것을 기대할 수 있다.

그럼 DOM은 무엇일까?

DOM(Document Object Model, 문서 객체 모델)은 웹 페이지의 객체 지향 표현이자 HTML, XML 문서의 프로그래밍 인터페이스이다. DOM은 스크립트 언어에게 웹 페이지 및 요소들과 관련된 모델이나 개념에 관한 정보를 제공한다. 문서를 표현, 저장, 조작하는 방법을 제공하므로, 스크립트 언어는 DOM 구조에 접근하여 문서 구조, 스타일, 내용 등을 변경할 수 있다.

DOM 트리 구조도

DOM은 위의 그림처럼 트리의 형태로 문서의 구조를 표현하며, 이를 DOM 트리라고 한다. 트리의 최상단에는 문서 노드(Document Node)가 있고, 그 아래로 요소 노드(Element Node)와 텍스트 노드(Text Node)가 계층 구조를 이루고 있다. 문서의 모든 요소는 문서를 위한 DOM의 한 부분이다.

JavaScript도 간단하게 알아보자.

JavaScript는 브라우저에서 실행 가능한 스크립트 언어로, 웹 페이지에 동적 기능을 추가하기 위해 고안되었다. 서버와 통신 없이 사용자에게 입력받은 데이터를 검증하고, 사용자의 입력에 따라 동적으로 UI를 변경할 수 있게 해준다. 등장 이래 계속해서 발전한 결과, 비동기 처리나 크로스 플랫폼 지원을 돕는 등 유용한 기능을 제공하며, V8 엔진의 등장 이후 성능이 비약적으로 향상되었다. Node.js가 등장하면서 브라우저에만 국한되지 않고 다양한 환경에서 사용할 수 있게 되었다.

JavaScript의 역사와 특징에 관한 세부적인 내용은 추후에 다른 게시글로 작성할 예정이다.

API = DOM + JavaScript 이해하기

드디어 제목에 등장했던 API = DOM + JavaScript가 어떤 뜻인지 이해할 준비가 되었다.

DOM과 스크립트 언어가 합쳐져 웹 페이지를 조작할 수 있는 API를 이룬다. 앞서 살펴보았듯이, DOM은 웹 페이지의 객체 지향 표현이며, 스크립트 언어에게 페이지 및 페이지의 요소들과 관련된 정보를 제공한다. 스크립팅 언어는 DOM에게 얻은 정보를 바탕으로 각 요소에 접근하거나 조작할 수 있다. 초기에는 DOM과 JavaScript가 밀접하게 연결되었지만, 점점 분리되어 각자의 역할을 하고 있다. 때문에 스크립트 언어로 꼭 JavaScript를 써야 하는 것은 아니지만(Python 등 사용 가능), JavaScript가 가장 자주 사용된다.

DOM과 스크립트 언어가 결합된 API 예시가 바로 document.createElement(name), document.getElementById(id), element.innerText 등이다.

[참고]

Hyewon

눈이 반짝거리는 사람이고 싶다.

다음 포스트