DOM(Document Object Model) 이란?
- DOM은 HTML, XML 문서의 프로그래밍 인터페이스로, 웹 개발에서 핵심적인 역할을 담당
- 문서의 구조화된 표현을 제공하며, 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 동적으로 변경할 수 있게 해줌
- DOM은 노드(nodes)와 객체(objects)로 문서를 표현하며, 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 제어 가능하게 해주는 객체 지향 표현 방식
→ JavaScript와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있음
DOM과 JavaScript의 관계
- DOM은 프로그래밍 언어는 아니지만, JavaScript 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 됨
→ DOM은 JavaScript가 웹 페이지와 상호작용 하기 위한 필수 인터페이스
DOM의 주요 데이터 타입
Document:
- HTML 문서 전체를 대표하는 최상위 객체
- document 타입의 객체를 반환할 때, 이 객체는 루트 document 객체 자체를 의미
→ document 객체를 통해 페이지의 모든 요소에 접근 가능
Element:
- DOM API의 멤버에 의해 반환된 element 또는 element 타입의 노드를 의미
- HTML 태그 하나하나를 의미
- getElementById, querySelector 등으로 접근 가능
NodeList:
- 노드들의 유사 배열
- nodeList의 항목들은 인덱스를 통해 접근 가능 하지만 실제 배열은 아님
- document.querySelectorAll()과 같은 메서드가 NodeList를 반환
Attribute:
- 요소들의 속성을 나타내며, getAttribute, setAttribute 등으로 조작
- attribute가 멤버에 의해 반환되는 것은 attribute에 대한 특별한 인터페이스를 노출하는 객체 참조
- attributes는 DOM에서 elements와 같은 노드이지만, elements만큼 많이 사용되지 않음
NamedNodeMap:
- 속성(attribute)들의 컬렉션을 표현하며, 인덱스 또는 이름으로 접근 가능
→ element.attributes 속성에서 사용됨
DOM의 문제점
- 성능 이슈: DOM 조작은 무겁고, 특히 대량의 DOM 요소를 변경할 경우 렌더링 성능 저하가 발생
- 리플로우(Reflow)와 리페인트(Repaint): DOM 변경 시 브라우저는 레이아웃을 다시 계산하고 화면을 다시 그려야 함
- 복잡성 증가: 대규모 애플리케이션에서 직접적인 DOM 조작은 코드의 복잡성을 증가시킴
Virtual DOM이란?
- Virtual DOM은 실제 DOM의 가벼운 JavaScript 표현
- 메모리에 가상적으로 존재하는 DOM으로, 실제 DOM과 동기화되는 개념
- React, Vue.js 등의 모던 프레임워크에서 성능 최적화를 위해 사용
Virtual DOM의 작동 원리
- 가상 DOM 생성: 실제 DOM의 구조를 JavaScript 객체로 표현
- 상태 변경 감지: 애플리케이션의 상태가 변경되면 새로운 Virtual DOM 트리를 생성
- Diffing: 이전 Virtual DOM과 새로운 Virtual DOM을 비교하여 변경된 부분을 찾음
- Reconciliation: 변경된 부분만 실제 DOM에 반영 → 최소한의 조작만 수행
Virtual DOM의 장점
- 성능 최적화: 배치 처리(변경 사항을 모아서 처리)를 통해 불필요한 DOM 조작 최소화
- 예측 가능한 UI 업데이트: 상태 기반의 선언적 업데이트 구조
- 크로스 브라우저 호환성: 브라우저 차이를 프레임워크가 추상화
- 개발 경험 개선: 선언적 코드 작성 가능, 디버깅과 유지보수에 용이
Virtual DOM의 한계
- 초기 렌더링 비용: 가상 DOM 트리를 구성하는 초기 작업이 무겁게 작용할 수 있음
- 복잡한 Diff 알고리즘 비용: 매우 복잡한 구조일 경우 diff 연산 자체도 무시할 수 없음
- 메모리 사용 증가: 메모리에 Virtual DOM 구조를 유지해야 하므로 추가 자원 소모
DOM vs Virtual DOM 비교
성능측면
개발 경험
결론
- DOM과 Virtual DOM은 각각의 장단점을 가지고 있으며, 프로젝트의 특성과 요구사항에 따라 적절한 선택이 필요
- DOM 직접 조작: 간단한 프로젝트나 특정 성능이 중요한 상황에서 유용
- Virtual DOM: 복잡한 사용자 인터페이스와 빈번한 상태 변경이 있는 모던 웹 애플리케이션에서 유용
→ Virtual DOM을 기반으로 한 프레임워크들이 주류가 되고 있지만, DOM의 기본 개념과 작동 원리 이해가 중요
⭐발표자 : 이현주님
DOM(Document Object Model) 이란?
- DOM은 HTML, XML 문서의 프로그래밍 인터페이스로, 웹 개발에서 핵심적인 역할을 담당
- 문서의 구조화된 표현을 제공하며, 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 동적으로 변경할 수 있게 해줌
- DOM은 노드(nodes)와 객체(objects)로 문서를 표현하며, 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 제어 가능하게 해주는 객체 지향 표현 방식
→ JavaScript와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있음
DOM과 JavaScript의 관계
- DOM은 프로그래밍 언어는 아니지만, JavaScript 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 됨
→ DOM은 JavaScript가 웹 페이지와 상호작용 하기 위한 필수 인터페이스
DOM의 주요 데이터 타입
Document:
- HTML 문서 전체를 대표하는 최상위 객체
- document 타입의 객체를 반환할 때, 이 객체는 루트 document 객체 자체를 의미
→ document 객체를 통해 페이지의 모든 요소에 접근 가능
Element:
- DOM API의 멤버에 의해 반환된 element 또는 element 타입의 노드를 의미
- HTML 태그 하나하나를 의미
- getElementById, querySelector 등으로 접근 가능
NodeList:
- 노드들의 유사 배열
- nodeList의 항목들은 인덱스를 통해 접근 가능 하지만 실제 배열은 아님
- document.querySelectorAll()과 같은 메서드가 NodeList를 반환
Attribute:
- 요소들의 속성을 나타내며, getAttribute, setAttribute 등으로 조작
- attribute가 멤버에 의해 반환되는 것은 attribute에 대한 특별한 인터페이스를 노출하는 객체 참조
- attributes는 DOM에서 elements와 같은 노드이지만, elements만큼 많이 사용되지 않음
NamedNodeMap:
- 속성(attribute)들의 컬렉션을 표현하며, 인덱스 또는 이름으로 접근 가능
→ element.attributes 속성에서 사용됨
DOM의 문제점
- 성능 이슈: DOM 조작은 무겁고, 특히 대량의 DOM 요소를 변경할 경우 렌더링 성능 저하가 발생
- 리플로우(Reflow)와 리페인트(Repaint): DOM 변경 시 브라우저는 레이아웃을 다시 계산하고 화면을 다시 그려야 함
- 복잡성 증가: 대규모 애플리케이션에서 직접적인 DOM 조작은 코드의 복잡성을 증가시킴
Virtual DOM이란?
- Virtual DOM은 실제 DOM의 가벼운 JavaScript 표현
- 메모리에 가상적으로 존재하는 DOM으로, 실제 DOM과 동기화되는 개념
- React, Vue.js 등의 모던 프레임워크에서 성능 최적화를 위해 사용
Virtual DOM의 작동 원리
- 가상 DOM 생성: 실제 DOM의 구조를 JavaScript 객체로 표현
- 상태 변경 감지: 애플리케이션의 상태가 변경되면 새로운 Virtual DOM 트리를 생성
- Diffing: 이전 Virtual DOM과 새로운 Virtual DOM을 비교하여 변경된 부분을 찾음
- Reconciliation: 변경된 부분만 실제 DOM에 반영 → 최소한의 조작만 수행
Virtual DOM의 장점
- 성능 최적화: 배치 처리(변경 사항을 모아서 처리)를 통해 불필요한 DOM 조작 최소화
- 예측 가능한 UI 업데이트: 상태 기반의 선언적 업데이트 구조
- 크로스 브라우저 호환성: 브라우저 차이를 프레임워크가 추상화
- 개발 경험 개선: 선언적 코드 작성 가능, 디버깅과 유지보수에 용이
Virtual DOM의 한계
- 초기 렌더링 비용: 가상 DOM 트리를 구성하는 초기 작업이 무겁게 작용할 수 있음
- 복잡한 Diff 알고리즘 비용: 매우 복잡한 구조일 경우 diff 연산 자체도 무시할 수 없음
- 메모리 사용 증가: 메모리에 Virtual DOM 구조를 유지해야 하므로 추가 자원 소모
DOM vs Virtual DOM 비교
성능측면
개발 경험
결론
- DOM과 Virtual DOM은 각각의 장단점을 가지고 있으며, 프로젝트의 특성과 요구사항에 따라 적절한 선택이 필요
- DOM 직접 조작: 간단한 프로젝트나 특정 성능이 중요한 상황에서 유용
- Virtual DOM: 복잡한 사용자 인터페이스와 빈번한 상태 변경이 있는 모던 웹 애플리케이션에서 유용
→ Virtual DOM을 기반으로 한 프레임워크들이 주류가 되고 있지만, DOM의 기본 개념과 작동 원리 이해가 중요
⭐발표자 : 이현주님