🤔 취업이라는 뚜렷한 목적으로 웹개발을 배우기에, 언어들을 공부하는 방식의 많은 부분이 기술적, 실용적인 면에 치우쳐져 있다는 생각이 많았다. 그래서 한편으론 이론적인 부분에서 HTML이 어떤 원리로 브라우저에 구현되며, 자바스크립트는 어떻게 HTML로 구현된 웹페이지를 수정하는지 등 원론적인 부분, 특정 언어를 사용하는 본질적인 의의에 대한 물음이 존재하였다.
DOM에 대한 개념을 다지는 것은 이러한 물음의 답이 될 수 있다고 생각했다. 웹개발을 공부하며 배우게될 언어들의 본질과 그것을 배우는 의의를 DOM의 이해를 통해 찾을 수 있다고 생각한다.
지금도 DOM을 완벽하게 이해하지는 못했지만, 웹개발을 공부하는데 반드시 짚고 넘어가야할 개념임은 틀림없기에 내가 이해한 수준에서 기록해보려고 한다.
1️⃣ DOM(Document Object Model)
DOM을 이론적으로 정의하기 전에, HTML - 브라우저 - DOM 간의 역할과 관계를 비유적으로 살펴보자.
🏠 웹 페이지를 만드는것을 인테리어 작업에 비유해보면 각 요소들은 다음과 같이 표현할 수 있다.
- HTML: 각 종 가구들의 배치 및 설치를 요청하는 주문서
- DOM: 각 종 가구들이 전체 구조에서 어떻게 배치되고, 어떤 기능을 하는지 알려주는 설명서(+주문서 내용을 변경할 수도 있다.)
- 브라우저: 가구들의 배치, 설치한 모습을 보여주는 공간
즉, DOM은 HTML의 요소들이 브라우저라는 공간에 맞춰 어떻게 배치되어 화면에 나타내고, 어떤 기능을 하며, 이벤트에는 어떤 모습으로 반응하는지 등의 기능들을 수행하며 더 나아가 조작할 수 있는 개체들로 실체화된 형태라 할 수 있다.
2️⃣ 자바스크립트와 DOM
자바스크립트를 통해 HTML을 구성하는 각종 요소들을 수정하고, 조작하게 된다. 이것은 엄밀히 말하면 자바스크립트를 통해 DOM을 조작하여 HTML의 많은 요소들에 변화를 주는 것이라 할 수 있다.
그럼 DOM이 자바스크립트에 포함되는 개념일까? 🙅♀️🙅🏽♂️
DOM은 특정언어에 종속되지 않으며, 단지 자바스크립트로 제어 할 수 있는 대상일뿐이다. 이것은 자바스크립트는 DOM을 통해 웹페이지의 요소들에 접근이 가능하고 정보를 얻을 수 있는 것이라 볼 수도 있다.(DOM이 없으면 불가능하다!)
앞서 말한것처럼 DOM은 특정언어에 종속되지 않기 때문에 어떤 언어든 라이브러리만 갖추면 DOM을 조작할 수 있다. (파이썬으로 DOM을 조작하기도 한다.) 이것이 가능한 이유는 DOM은 API로 구성되어 있기 때문이다. (API를 간단하게 설명하자면 명령을 내리면 기능을 수행할 수 있도록 하는 버튼 개념이라고 생각하면된다.) 이 버튼은 어떤 언어로든 (라이브러리만 갖춰진다면) 작동시킬 수 있는 것이다.
DOM을 사용하는 API목록들은 다음과 같다.
(출처: MDN페이지 - DOM소개)
3️⃣ 노드와 트리
- 노드: HTML을 구성하는 정보의 단위. HTML의 모든 요소 볼수 있으며, HTML의 대부분은 노드의 속성 및 기능이라 할 수 있다.
- 트리: 노드의 상위개념 및 집합체
(트리는 노드로 이루어진 자료구조이며, 자식노드를 갖는다.)
노드와 트리개념을 다루는 이유는 DOM의 모든 요소들이 노드로부터 상속받기 때문이다. 즉 DOM이 HTML로 접근하는 방식은 노드가 가진 기능에 기반하기 때문에, DOM은 노드로 구성되어 있다고 볼 수도 있다.
😐 개발공부를 하며, 각종 개념들을 내것으로 만들기 위해서는 나만의 언어로 생각하고 적어보는 것이 중요하다고 생각한다. 지금은 몇몇 웹페이지와 영상자료의 내용들을 적절히 섞어 옮겨적은 수준에 불과하지만, 같은 비유와 설명이라도 나만의 언어로 바꾸려고 노력했다. (이것이 더 오래 기억할 수 있는 방법이라고 생각한다.) 나만의 언어로 표현하는 것은 결국 개념에 대한 이해가 따라주지 않으면 불가능하다. 개념에 대해 최대한 이해하고 나만의 언어로 남들에게 설명해준다는 목표로 포스팅을 계속 이어가자.
출처
- MDN ('DOM 소개')
- 유튜브채널 <얇은코딩사전>- DOM은 뭐고 가상 DOM은 뭔가요? (+ Svelte와 React의 차이)
