DOM vs 가상DOM vs BOM

DOM (Document Object Model), 가상 DOM (Virtual DOM), 그리고 BOM (Browser Object Model)은 웹 개발에서 중요한 개념입니다. 각각을 간단히 설명해보겠습니다:

1. DOM (Document Object Model):

• DOM은 웹 페이지의 구조를 프로그래밍적으로 조작하기 위한 인터페이스입니다. HTML, XML, 또는 XHTML 문서의 모든 요소를 객체로 표현합니다.
• DOM은 트리 구조로 표현되며, 각 요소는 노드(node)라고 불립니다. 노드는 문서의 요소(태그), 속성, 텍스트 등을 나타내며, 부모-자식관계로 구성됩니다.
• 웹 페이지를 스크립트를 사용하여 동적으로 수정하거나 조작할 때 DOM을 조작합니다. JavaScript는 DOM을 사용하여 HTML 요소를 선택하고 내용을 변경하거나 이벤트를 처리합니다.

2. 가상 DOM (Virtual DOM):

• 가상 DOM은 웹 애플리케이션의 성능을 향상시키기 위한 기술입니다. 주로 JavaScript 라이브러리 및 프레임워크에서 사용됩니다.
• 가상 DOM은 원본 DOM과 동일한 구조를 가지며, 메모리에 저장됩니다. 렌더링이 필요할 때 실제 DOM과 비교되어 변경된 부분만 업데이트합니다.
• 이렇게 변경 사항을 비교하고 최적화하는 방식은 웹 애플리케이션의 성능을 향상시키고, 렌더링 업데이트를 최소화합니다. 이를 통해 사용자 경험을 개선하고 애플리케이션의 반응성을 향상시킬 수 있습니다.

3. BOM (Browser Object Model):

• BOM은 웹 브라우저 자체와 상호작용하기 위한 객체 모델입니다. 이것은 웹 페이지의 콘텐츠나 구조가 아니라 브라우저 창과 관련된 객체 모델입니다.
• BOM은 브라우저 창의 크기 및 위치 제어, 브라우저의 히스토리 관리, 쿠키 설정 및 확인, 브라우저 버전 확인 등과 같은 작업을 처리합니다.
• 예를 들어, window 객체는 BOM의 일부이며, 브라우저 창과 관련된 정보 및 조작을 제공합니다.

이러한 개념들은 웹 개발에서 중요하며, DOM을 조작하여 웹 페이지를 다루고, 가상 DOM을 사용하여 성능을 최적화하며, BOM을 사용하여 브라우저와 상호작용합니다.