DOM
Document Object Model; 문서 객체 모델
DOM 개념
- DOM은 웹 브라우저가 제공하는, HTML 및 XML 문서를 조작할 수 있도록 해주는 API이다.
- 웹 페이지를 로드할 때, 브라우저는 페이지의 HTML을 읽은 후, DOM을 생성한다.
- DOM을 통해 웹 페이지가 구조적으로 표현되며, 각각의 요소에 접근이 용이해진다.
- 이를 통해 콘텐츠와 구조, 그리고 스타일을 보다 쉽게 조작할 수 있다.
DOM의 특징
- 트리 구조
- DOM은 문서를 노드의 계층적 트리로 나타낸다.(HTML 태그, 속성 등..)
- 각 노드는 문서의 특정 부분(예: 요소, 속성, 텍스트 등)을 나타낸다.
- 동적 인터페이스
- 문서의 구조, 스타일, 내용을 동적으로 변경할 수 있는 메소드와 프로퍼티를 제공한다.
- 이를 통해 사용자의 상호 작용에 따라 페이지를 실시간으로 변경할 수 있습니다.
// JavaScript document.write('Hello'); // document object를 통해 페이지의 내용에 접근한다.
- 언어 독립적
- 특정 프로그래밍 언어에 국한되지 않고, 다양한 언어에서 사용할 수 있는 개념이다.
- 그러나 웹에서는 주로 JavaScript와 함께 사용되며, Python 등을 이용해 웹 크롤링을 하는 데에도 사용된다.
DOM의 활용
- 동적 렌더링
- 사용자의 상호 작용 또는 외부 데이터에 따라 웹 페이지를 동적으로 변경할 수 있다.
- 이를 통해 사용자 경험을 향상시키고, 사용자와 상호작용하는 웹 페이지를 제작할 수 있다.
- 사용자 입력(form) 검증
- 클라이언트 측에서의 폼 데이터 유효성 검증을 가능하게 한다.
- 사용자가 서버로 잘못된 요청을 보내는 것을 방지할 수 있다.
- 웹 애플리케이션 개발
- DOM을 이용해 복잡한 웹 애플리케이션을 개발할 수 있다.
- 사용자 인터페이스의 동적인 상호 작용을 구현하는 데 필수적이다.
- AJAX 요청
- AJAX를 이용해 서버와 비동기 통신을 주고받을 수 있다.
- 이를 통해 페이지 전체를 새로 고치지 않고도 페이지의 일부분만을 업데이트할 수 있다.
가상 DOM
- 실제 DOM을 조작하는 연산은 리소스가 많이 소모된다.
- ‘변경사항을 모아서 한 번에 처리함으로써 성능을 향상시키고, 불필요한 렌더링을 최소화한다’는 것이 가상 DOM의 아이디어이다.
- React와 같은 프론트엔드 프레임워크에서는 이를 극복하기 위해 가상 DOM을 사용한다.
- 동작 원리
- 실제 DOM에 직접적인 변경을 하지 않고, 가상 DOM에 변경사항을 먼저 적용한다.
- 그 다음, 실제 DOM과의 차이를 계산하여 최소한의 변경만을 실제 DOM에 적용한다.
- 가상 DOM을 활용함으로써 웹 애플리케이션의 속도와 성능을 크게 향상시킬 수 있다.
