[데브코스 Day8] 2022.10.26

📖오늘 배운  것

 

DOM(Document Object Model)

---

DOM이란?

:문서 객체 모델은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

 

 

DOM 특징

-DOM은 html 문서로부터 생성되지만 동일한 것은 아니다.

 > 원본 html이 유효하지 않아도 생성된 DOM 트리에는 교정되어 나타난다.

 > 자바스크립트를 통해 DOM을 수정하는 경우 DOM에는 업데이트되지만 HTML 문서의 내용이 변경되는 것은 아니다.

 

-DOM은 key 와 value로 이루어져 있는데 이것은 웹 UI의 상태, 기능, 속성을 객체로 만든 것이다.

 

 

DOM Tree

:DOM은 트리구조로 이루어져있는데 문서 노드, 요소 노드, 속성 노드, 텍스트 노드로 구성되어있다.

-문서 노드(document)

 :최상위 노드로 모든 노드에 접근하려면 문서 노드를 거쳐야 한다.

 

-요소 노드

 :html의 구조를 나타내며 속성 노드나 텍스트 노드에 접근하려면 요소 노드에 접근해야 한다.

 

-속성 노드

:요소 노드에 붙어있는 노드로 자식이 아니다.

 

- 텍스트 노드

: 요소의 텍스트를 표현하는 노드로 자식 노드를 가질 수 없다.

 

 

DOM Tree에서 <li> 태그를 찾는 과정

: DOM Tree 순회는 PreOrder(전위 순회)로 이루어진다.

 

 

 

 

 

DOM이 동작되는 과정

 

1. HTML을 파싱하여 DOM Tree를 만든다.

2. style Sheets를 파싱하여 Style Rules를 만든다

3. 만든 Style Rules를 DOM Tree에 입힌다. - Attachment

4. 렌더 트리가 생성되고 레이아웃 과정을 통해 DOM의 위치를 정하고 이후 화면이 출력된다.

 

 

 

Virtual DOM

---

virtual DOM이란?

: 변경사항을 저장한 후 수정 전의 DOM과 비교하여 변경된 부분만 DOM에게 전달하여 한번만 렌더링이 일어나도록 하는 것이다.

https://elmprogramming.com/virtual-dom.html

변경사항이 일어날 때마다 DOM Tree가 다시 생성되는 것을 막기 위해 리액트, vue 등에서 virtual DOM을 사용한다.

 

 

 

💭배운 점

DOM과 virtual DOM에 대해 제대로 배울 수 있어서 좋았고 데브코스 강의에서 DOM을 다루는 다양한 방법을 알게 되어 좋았다. 써본 것도 있지만 안 써본 것도 많아서 한 번씩 써보면서 연습하면 좋을 것 같다.

 

 

 

 

 

참고자료

프로그래머스 강의

-https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

-https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8

-https://velog.io/@skawnkk/Dom%EA%B3%BC-VirtualDOM-Dom%EC%A0%91%EA%B7%BC%EC%9D%84-%EC%A7%80%EC%96%91%ED%95%B4%EC%95%BC%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

-https://velopert.com/3236