DOM이 뭘까요?
프론트엔드의 개발의 기본에 대하여
* 프론트엔드의 기본 개념에 대한 질문에, 대답을 얼만큼 할 수 있을까? 스스로 기초부터 점검해보며 정리한 글입니다. 잘못된 정보에 대한 피드백은 언제나 환영입니다. :)
브라우저의 기본, DOM 에 대해 알아보자
DOM이란 Document Object Model의 줄임말이다. 그래서 Document Object Model이 도대체 뭐길래?
DOM이 나오게 된 배경
Document의 뜻은 '문서'이다. 이것은 html 파일을 의미한다. (html '문서'라고도 이야기하잖아용?) 처음 웹이 등장했을 때 html 파일은 정적인 모습이었다. 정적인 모습이었다는 건 '그저 밋밋한 텍스트였을 뿐' 이라는 것이다. txt 파일이나 다름 없다. 지금도 컴퓨터에서 메모장을 열어서 글씨를 적으면 html 파일로 저장할 수 있다. 그것도 곧 페이지이자 문서라고 할 수 있다. 초창기 웹은 오로지 그런 모습 뿐이었다.
하지만, 인간의 욕심은 끝이 없고,,, 정적인건 지루했다. 텍스트만 떡하니 보여주는건 책이나 다름 없지 않겠는가. 모름지기 웹사이트란 버튼도 누를 수 있고, 애니메이션도 좀 있고 그래야되지 않을까, 라고 사람들은 생각하기 시작했다.
html문서는 그냥 텍스트가 아니었다. 마크업 언어로 작성된 '고급' 문서다. 마크업 언어란, 간단히 말해 <태그> 들로 구조화된 규칙을 가진 언어를 말한다. 그래서 사람들은 생각했다. "아, 이거 구조가 있네! 이걸 javascript가 갖고 놀 수 있게 Object(객체) 형태로 구조화 시켜버리자! 그러면 자바스크립트로 이리 저리 조작해볼 수 있지 않을까?" 라고 말이다.
당시에 유명한 브라우저 회사가 마이크로소프트(익스프로러)와 넷스케이프였는데, 이들은 고민하기 시작했다. 자기네 회사의 경쟁력을 높이려면 동적 페이지 구현 기능을 도입해야만 했다. 그래서 결국 각자만의 방식으로 동적 페이지를 지원하기 시작했다. 그 결과, 각각의 브라우저마다 각기 다른 형태의 DOM을 탑재하게 됐다. 이 격변의 시기의 개발자들은 브라우저마다 다른 코드를 짜야만 했다고 한다..... (-_-)
하지만, 다행히도 W3C가 주도하여 'DOM(Document Object Model)'이라는 개념을 공식화하기 시작했다. (그전까지는 DOM이라는 단어조차 없었다.) 여러 표준화의 과정을 거쳐 지금의 DOM에 이르게 된 것이다.
대통일의 과정이 없었다면 우리는 아직도 브라우저마다 다르게 코드를 짜고 있었을지도 모른다.....
DOM의 모습
와, 서론이 너무 길었나.
본격적으로 설명을 해보자. 먼저 우리가 알고 있는 html 구조를 살펴보자.
<!DOCTYPE html>
<html>
<head>
<title>간단한 웹페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
</body>
</html>
개발자가 이런 html 문서를 개발해서 호스팅을 했다고 치자. 사용자가 브라우저로 접속하는 순간, 호스팅서버는 브라우저로 저 html 파일을 보낸다. 브라우저는 저 파일을 받자 마자 파싱한다. 즉, Object로 만들기 작업에 돌입한다. 이 과정에서 html의 특정 태그과 텍스트 등의 내용들은 노드로 변환되며, 각 노드들간에는 계층관계가 성립된다.
변환된 DOM 노드의 예시
요약하자면 아래와 같이 정리할 수 있다.
정리하자면
즉, 웹페이지를 동적으로 콘트롤하기 위해서 페이지의 요소들을 node의 형태로 구조화시킨 것을 DOM이라고 한다. DOM은 태그들간의 계층 관계를 가지며 계층 관계를 트리 구조라고도 한다.
그럼, 가상의 DOM은 뭘까?
React같은 프론트엔드 라이브러리르 공부하다 보면, React에서는 화면을 렌더링할때 가상의 DOM을 사용한다고 설명한다. 그럼 이 가상의 DOM은 뭘까?
간단히 설명하면, 실제 브라우저에서 만든 DOM을 복사하여 메모리에 '가상의 DOM'을 갖고 있는 것이다. 화면이 동적으로 변화가 일어나면 그 '가상의 DOM'을 먼저 변경시킨다. 그래서 '실제 DOM'과 '가상의 DOM'을 비교했을 때 변경사항이 있을 때만 실제 DOM을 변경한다.
왜 이렇게 하냐면, 성능 향상을 위해서이다. 예를 들어보자.
javascript로 html을 동적으로 변동시킬 수 있는 것은 축복이기도 하지만 웹페이지를 느리게 만들 수도 있는 재앙이 될 수도 있다. 전화번호부처럼 10,000개의 리스트가 넘는 리스트가 있다고 생각해보자. 이걸 자바스크립트로 동적으로 코딩한다고 해서 아래와 같이 코딩했다고 가정해보자.
for (let i = 0; i < 10000; i++) {
let li = document.createElement('li');
li.textContent = `이것은 ${i}번째 리스트입니다`;
document.querySelector('#myList').appendChild(li);
}
document에서 id가 myList인 것을 찾아서 for문을 돌때마다 <li></li> 태그를 주입해준다. 이과정에서 다음과 같은 문제가 발생할 수 있다.
1. 10,000번의 DOM 조작이 일어나므로 브라우저에 큰 부하를 줄 수 있다.
2. 극단적인 경우, 사용자는 리스트가 한개씩 추가되는 것을 보게 될 수도 있어서 원활한 사용자 경험에 방해를 준다.
3. 로딩이 완료되기 전에 사용자가 불완전한 리스트를 보게 될 수도 있다.
가상의 DOM은 이러한 문제를 해결하기 위해 도입되었다. 가상의 DOM을 사용하면 :
1. 변경사항을 메모리의 가상의 DOM에 먼저 적용한다.
2. 모든 변경이 완료되면, 실제 DOM과 가상의 DOM의 차이를 계산한다.
3. 차이만큼 실제 DOM을 한번에 업데이트한다.
이렇게 하면 사용자 경험이 개선되고 브라우저의 성능을 개선시킬 수 있다.
