🍅DOM
1. DOM (Document Object Model)
DOM (Document Object Model)은
HTML,XML문서의 구조를 계층적으로 표현하는 객체 기반의 모델이다
웹 브라우저는 웹 페이지를 로드할 때, HTML 문서를파싱하여 DOM 트리를 생성한다DOM 트리는 프로그래밍 언어(JavaScript 등)를 통해 동적으로 문서의 내용을 조작할 수 있도록 해준다
2. DOM의 주요 특징
트리 구조: DOM은 계층적 구조로, HTML의 요소가 부모-자식 관계를 가지며 연결된다
프로그램 가능: JavaScript로 DOM을 수정, 삭제, 추가할 수 있다
실시간 반영: DOM이 변경되면 웹 페이지도 즉시 업데이트된다
3. DOM의 역할
HTML 렌더링: 브라우저가 DOM을 기반으로 화면에 요소를 그린다
사용자 인터페이스: 사용자 이벤트(클릭, 입력, 스크롤 등)를 처리하여 웹 페이지와 상호작용한다동적 업데이트: JavaScript를 사용해 실시간으로 페이지의 내용을 변경할 수 있다
4. DOM 구조
🍅Virtual DOM
1. Virtual DOM
Virtual DOM은 실제DOM의 가상 표현이다
React와 같은 현대 프레임워크에서 사용하며, 브라우저의 성능 병목을 줄이기 위해 고안되었다
2. Virtual DOM의 동작 방식
Virtual DOM 생성: React 등은 초기 렌더링 시 Virtual DOM을 생성
이는 메모리 내의 경량 객체로 실제 DOM과 비슷한 구조를 가진다업데이트 감지: 상태(State)나 속성(Props)이 변경되면 Virtual DOM이 새롭게 생성된다
Diffing Algorithm: 새 Virtual DOM과 이전 Virtual DOM을 비교하여 변경된 부분만 추적한다
DOM 패치: 변경된 부분만 실제 DOM에 반영한다
3. Virtual DOM의 장점
성능 최적화: 전체 DOM 트리를 재렌더링하지 않고, 변경된 부분만 업데이트한다
추상화: 브라우저와 독립적으로 DOM 조작 로직을 구현할 수 있다
효율적인 개발: React 개발자에게 직관적인 컴포넌트 기반 UI 구현을 제공한다
4. DOM과 Virtual DOM의 차이점
🍅AJAX와 DOM의 관계
Virtual DOM의 역할과 동작 방식에 대해 알게되니 AJAX와는 어떤 관계이며 상호작용하는 방식이 궁금해졌다.
1. JavaScript의 역할
JavaScript는 HTML 구조를 조작하거나 데이터를 주고받는 데 사용된다DOM 조작: HTML 구조를 동적으로 변경 (예: 새로운 요소 추가, 기존 요소 수정 등)
이벤트 처리: 클릭, 스크롤 등 사용자 이벤트를 감지하고 이에 대한 동작을 수행
AJAX 사용: 서버와 비동기적으로 데이터를 주고받아, 페이지를 새로고침하지 않고도 내용을 업데이트
2. AJAX의 역할
AJAX(Asynchronous JavaScript and XML)는 JavaScript를 이용해 서버와 데이터를 주고받는 기술이다
주로 비동기 통신을 통해 다음을 가능하게 한다비동기 데이터 로드: 서버에서 데이터를 가져오거나 전송하는 동안 UI가 멈추지 않음
페이지 리로딩 없이 데이터 갱신: HTML과 DOM 구조를 전체적으로 다시 렌더링하지 않고, 필요한 데이터만 업데이트
JSON 처리: XML 대신 JSON 데이터를 주고받아 클라이언트-서버 간 통신을 최적화
3. Virtual DOM의 역할
Virtual DOM은 실제 DOM의 변경을 최소화하여 성능을 최적화하는 데 사용된다
React, Vue와 같은 프레임워크에서 주로 활용된다변경 감지: 상태(State)나 속성(Props)이 변경되면 새로운 Virtual DOM을 생성
Diff 알고리즘: 이전 Virtual DOM과 새 Virtual DOM을 비교하여 변경된 부분만 추적
DOM 업데이트 최소화: 변경된 부분만 실제 DOM에 반영하여 성능을 개선
4. AJAX와 Virtual DOM의 관계
AJAX와 Virtual DOM은 서로 직접적으로 의존하지 않지만, 프론트엔드 애플리케이션에서 상호작용한다
AJAX로 데이터 요청 및 수신
AJAX는 서버에서 데이터를 가져오거나 서버로 데이터를 보낸다
받은 데이터는 JavaScript 객체로 변환되며, React와 같은 프레임워크에서는 상태(State)로 관리된다Virtual DOM을 통해 UI 갱신
AJAX로 받은 데이터를 React 컴포넌트의 상태(State)에 저장한다
상태가 변경되면 React는 새로운 Virtual DOM을 생성한다
Virtual DOM의 Diffing 알고리즘이 변경된 부분만 찾아 실제 DOM에 반영한다DOM 변경과 서버 데이터의 동기화
AJAX는 서버의 데이터를 가져와 클라이언트에 동기화한다
Virtual DOM은 이 데이터를 사용해 DOM 조작을 최적화한다
5. AJAX와 Virtual DOM의 역할 비교
