5주차 배운 내용

자바스크립트의 DOM에 대해서 공부하였습니다.

1. 노드(Node)란?

노드란 매듭, 절, 집합점, 또는 중심점이라는 사전적 의미를 가지고 있으며 여러 분야에서 넓게 이용되는 단어이다. 예를 들어, 컴퓨터의 네트워크 통신에서는 각 컴퓨터가 노드이며, 식물의 경우에는 줄기와 잎이 있을 때 잎들이 노드가 된다. 컴퓨터 과학에서는 장치나 데이터 지점(data point)을 의미하기도 하고, 인터넷 통신에서는 IP를 보유한 어떠한 장치도 다 노드이다.

중요하게 생각해야 할 부분은 노드는 다른 노드와 연결이 가능하고, 연결된 각 노드는 다른 노드를 가리키는 정확한 방향(목적지)이 존재한다.

위와 같이 이전 주소와 다음 주소를 가진 노드들이 연달아 있다고 해보자.

여기서 위의 노드의 이전 주소값을 없애버리거나(null), 시작점을 의미하는 포인터를 두고 그 주소값을 위의 노드의 이전 주소값을 가리키면, 위의 노드는 그 뒤로 연달아 가리키고 있는 노드들의 첫 시작점이 된다.

다음 주소값을 없앤다고 하면 이 노드는 앞선 이전 주소값을 가진 노드가 가리키는 마지막 노드가 될 것이다.

아래는 그 예시를 표현한 그림이다.

2. DOM Tree

1. DOM이란?
   DOM은 Documnet Object Model의 약자로 브라우저에서 문서(Document 또는 HTML, XML)를 구조화하는 방식이며, 노드와 객체로 이를 표현한다. DOM은 우리가 자바스크립트와 같은 스크립팅 언어로 이러한 문서에 접근하여 수정, 저장 및 조작을 할 수 있도록 해준다.
2. DOM Tree란?
   HTML의 요소를 하나의 노드로 보고 가지가 잎을 뻗어나가는 형태로 구조화 한 것을 DOM Tree라고 한다. 비슷한 형태의 예시로는 가계도 또는 족보가 있다.
   위의 그림은 기본적인 이진 트리의 모습을 표현한 그림이다. 각 노드는 데이터와 연결된 곳에 대한 주소값을 저장하며, 각 부모와 자식노드들이 연결되어 있기 때문에 순회(Iterate)가 가능하다.
   HTML내의 요소는 모두 노드의 하위 객체이며 DOM Tree도 위 그림의 이진 트리와 유사한 모습을 갖는다.
   
   위의 Live DOM Viewer의 DOM view와 같이 하위 요소는 상위 요소와 연결되어 있으며, 그 상위 요소의 최상에는 HTML이 있다. 이를 구조상의 root라고 부르고, 부모 요소를 parent, 자식 요소를 child 또는 children이라고 부르며, 형제요소를 siblings라고 부른다.

3. 브라우저 렌더링 과정

1. 작성한 HTML문서를 토대로 브라우저 엔진이 이를 분석(parsing)하여 토큰화 한 뒤 노드를 생성하여 이를 DOM Tree로 생성한다.

2. 작성한 CSS를 분석하여 인라인 스타일에 맞춰 CSSOM Tree를 생성한다.

3. DOM Tree와 CSSOM Tree를 통해 Render Tree를 생성한다.

4. 이 후 배치(Layout)과정에서 각 노드들이 위치할 좌표들이 정해진다.

5. 마지막으로 그리기(Painting)과정을 통해 화면에 표시한다.

자바스크립트를 통해 DOM을 조작할 때 변경사항이 생길 때마다, 변경 사항에 따라서 이 일련의 과정을 반복한다.

이전의 웹 개발에서는 SSR(Server Side Rendering)이 주를 이루었다. 웹페이지에서 변경사항이 자주 일어나지 않는 정적 환경 이었기 때문이다.

그러나, 요즘은 페이스북이나 트위터와 같이 상호작용이 많이 일어나는 동적인 웹페이지가 주를 이루면서 CSR(Client Side Rendering)의 동적인 개발이 필요해졌고, 그래서 생긴 것이 Virtual DOM이다.

4. Virtual DOM

DOM은 변경사항이 생길 때 일련의 과정을 다시 반복한다. 특히, DOM Tree를 업데이트 하는 과정보다도 렌더하는 과정에서 가장 비싼 비용이 발생한다. 이를 개선하기 위해 나온 것이 Virtual DOM이다. Virtual DOM은 메모리에 DOM Tree를 복제한 자바스크립트 객체이다.

작동 원리는,

1. 업데이트가 생길 때마다 새로운 가상 DOM Tree를 메모리에 생성한다.
2. 이전 상태와 지금 상태를 비교하여 변경된 부분을 확인한다.
3. 이를 실제 DOM Tree에 반영한다.

이렇게 변경사항이 생길때마다 DOM Tree 전체를 다시 렌더링 하는 과정을 반복하기보다 필요한 부분의 변경사항만 적용하여 한 번에 렌더링 하면서 최적화를 구축한다.

참고한 자료

1. 노드의 정의 - 위키피디아
2. DOM Tree - 모던 자바 튜토리얼
3. 10분 테코톡 체프의 브라우저 렌더링.youtube
4. 10분 테코톡 돔하디의 Virtual DOM.youtube

마치며

이론보다 실습을 더 좋아하는 편이라 이론은 대충 이해만 해보고 넘어간 뒤, 무턱대고 코딩부터 하다보니까 막히는 구간이 생기고, 다시 복습하면서 길을 다지는 기간이 된 것 같다.

DOM부분도 이름만 들어보고 브라우저에서 자바스크립트를 쓰려면 필요한 부분만 가져다 쓰다 보니 어떻게 구성되는지를 잘 몰라서 매번 console.dir()만 찍어댔는데 이렇게 넓게 살펴보니까 그림이 조금 그려져서 도움이 많이 된다.

이번에 공통과제를 하면서 제일 많이 느낀 점은, 구상 단계를 구체적으로 정하지 않으면 몸이 무척 고생한다는 것이다.

만들던 도중에 구상이 잘못 되어서 처음부터 다시 시작하기도 하고,
생각했던 기능을 구현할 때 필요한 방식을 잘못 구상해서 구조를 다시 바꿔야 할 때도 있었고,
만들던 도중에 기능을 추가하려다 모듈의 중요성도 깨달았다.

마지막으로, 다른 수강생들의 아름다운 코드를 리뷰할때면 내가 얼마나 지저분하고 이기적으로 코딩하는지도 낱낱이 느껴져서 좋았다.