알고 있다고 생각했지만 까놓고보면 하나도 모르는 DOM 에 대해 알아봤다. 정의를 파려니 이름이 걸리고, 이름을 파려니 역사가 걸려서 이것저것 다 적어봤다.
DOM 의 역사 - 탄생과 표준화
The first DOM specification (Level 0) was developed at the same time as JavaScript and early browsers. It is supported by Netscape 2 onward.
최초의 DOM 은 Netscape 2 라는 browser 가 나올 때 만들어졌다. 그러다 1990년대, 2000년대에 Netscape Navigator 와 Internet Explorer 라는 두 browser 가 유명했는데, 이들이 다른 DOM 을 가지고 있어서 개발자들과 사용자들이 불편했다.
이런 문제를 해결하기 위해 W3C(World Wide Web Consortium) 에서 DOM 을 표준화했다.
DOM 이 뭔데 표준화를 할 필요가 있는걸까? 그리고 DOM 이 다르면 왜 개발자와 사용자가 불편한걸까?
DOM 이 무슨 뜻? - 이름의 의미
이름이 왜 DOM 인지를 보자. Document Object Model 에서 한 글자씩을 따서 DOM 이다. Document 는 뭐고 Object 는 뭐고 Model 은 뭘까?
Document 는 문서, 말그대로 웹 문서인 HTML 파일(들)을 말한다. Web Document 라고도 한다.
Object 는 JavaScript 의 Object 를 말한다. 즉 JavaScript 를 말한다고 보면 된다.
예전에 딥러닝 모델을 만들던 남자친구에게 Model 이 무슨 의미인지 물어본적이 있다. "이렇게 작동할 것" 이라는 의미 라고 했다.
예를들어 패션모델은 이 옷을 입으면 이렇게 보인다 는 것(직업) 이고, 프라모델은 플라스틱 조립 모형 을 말한다. 딥러닝 모델은 X 를 넣었을 때 Y 가 나올 것 이라는 것이다
즉 DOM 에서의 Model 은 Document 가 Object 가 된 것을 말한다. 물론 좀 더 정확하게 말하면 JavaScript 코드가 되는것이 아니라, JavaScript 코드가 이해할 수 있는 객체가 된다. 여담이지만, 이처럼 DOM 이 JavaScript 와 Document 의 중간이다보니, interface 라는 설명도 많이 보였다.
DOM 은 함수일까? - DOM 은 객체이다
즉 DOM 에서의 Model 은 Document 가 Object 가 된 것을 말한다.
DOM 이 바꿔주는걸까? DOM 은 함수인걸까? 아니다. DOM 이 바꾸는게 아니라, DOM 은 결과물이다. Browser 가 Document 를 가지고 DOM 을 만들어낸다. (아래에 내용이 더 있다)
따라서 DOM 은 HTML 파일을 browser 가 이해할 수 있도록 만들어진 결과물이고, 객체이다.
DOM Tree, DOM, Document Tree 는 모두 같은말이다.
Browser 와 DOM - Document 를 JavaScript 코드가 이해할 수 있어야 하는 이유
Browser 는 왜 HTML 파일을 JavaScript 가 이해할 수 있는 DOM 으로 바꿔야 할까? 왜냐하면 Browser 는 JavaScript 를 이해할 수 있지, HTML 은 이해하지 못하기 때문이다.
이렇게 만들어진 (HTML 이었던) DOM 에 대해서 browser 가 화면에 띄울 수 있도록 한다. 즉 DOM 이란 "webpage" 라는 것을 만들기 위해서, browser 에게 HTML/CSS/JS 로 무엇을 해야 하는지 정의해둔 표준 집합 (set of standards) 이다.
여담이지만, browser 가 이해할 수 있도록 HTML 파일을 DOM 으로 바꾼 것이기 때문에, DOM 은 브라우저에 따라 의존적이다. 그래서 간혹 browser 마다 안되는 코드가 있는 이유는 해당 browser 가 그 코드를 DOM 으로 제대로 변환하지 못하기 때문이다.
브라우저 호환성
그렇다면 어떻게 해야 다양한 브라우저에서 잘 작동되게 할 수 있을까?
여러 프론트엔드 라이브러리 및 프레임워크 (jQuery, React, Angular, Vuew, ...) 들이 관리를 더 쉽게 할 수 있도록 도와준다. 또한 Babel 로 JavaScript 코드를 변환할 수도 있다. 참고로 CSS 의 경우 Autoprefixer 를 사용하여 변환할 수 있다. https://autoprefixer.github.io/
마무리
- 즉 DOM 은 browser 가 HTML 을 이해할 수 있도록 바꿔진 것을 말한다. Browser 가 바꾼다. JavaScript 와 Document (HTML) 의 중간이어서 interface 라고도 한다.
- JavaScript 코드로 바뀌는 것은 아니고, JavaScript 코드가 이해할 수 있는 것이 된다.
- 또한 DOM 은 Document Tree, DOM Tree 라고도 불린다.
참고자료
'막개발글' 카테고리의 다른 글
| 시간 및 날짜를 다루는 방법 (1) - GMT 와 UTC, Timezone 과 Offset, 차이 및 비교 (6) | 2024.01.09 |
|---|---|
| CSR, SSR, Rendering (0) | 2023.06.17 |
| [아티클 정리] 사용자 경험은 어떻게 측정할까요? - 오의택 (0) | 2023.04.09 |
| 서버의 부하를 줄이는 법 (feat. 로드밸런싱) (0) | 2023.04.07 |
| 상태관리 라이브러리 비교 (Redux Toolkit, Zustand, Recoil) (0) | 2023.04.02 |