[G1-Sync] Manual knowledge update

10_Wiki/Topics/Frontend_Mastery/DOM vs Virtual DOM.md

@@ -1,12 +1,12 @@
 # [[DOM vs Virtual DOM]]
 
-## 📌 Brief Summary
-DOM(문서 객체 모델)은 브라우저가 HTML을 파싱하여 생성하는 트리 구조로, 직접적인 DOM 조작은 렌더링 경로(레이아웃 및 페인트)를 매번 트리거하여 성능 저하를 유발합니다 [1, 2]. 반면 Virtual DOM(가상 DOM)은 React가 수동적인 DOM 조작의 비효율성을 해결하기 위해 도입한 개념으로, UI의 이상적인 상태를 메모리에 가벼운 JavaScript 객체 형태로 저장하는 방식입니다 [2-4]. React는 새로운 Virtual DOM과 이전 버전을 비교(Diffing)하여 실제 변경된 부분만 실제 DOM에 반영(Reconciliation)함으로써 브라우저의 리플로우와 리페인트를 최소화하고 렌더링 성능을 최적화합니다 [3-5].
+## 📌[[ brief]] Summary
+DOM(문서 객체 모델)은 브라우저가 HTML을 파싱하여 생성하는 트리 구조로, 직접적인 DOM 조작은 렌더링 경로(레이아웃 및 페인트)를 매번 트리거하여 성능 저하를 유발합니다 [1, 2]. 반면 [[Virtual DOM]](가상 DOM)은 React가 수동적인 DOM 조작의 비효율성을 해결하기 위해 도입한 개념으로, UI의 이상적인 상태를 메모리에 가벼운 [[JavaScript]] 객체 형태로 저장하는 방식입니다 [2-4]. React는 새로운 Virtual DOM과 이전 버전을 비교(Diffing)하여 실제 변경된 부분만 실제 DOM에 반영([[Reconciliation]])함으로써 브라우저의 리플로우와 리페인트를 최소화하고 렌더링 성능을 최적화합니다 [3-5].
 
 ## 📖 Core Content
-* **DOM(Document Object Model)의 특성과 한계**
+* **[[DOM(Document Object Model)]]의 특성과 한계**
   * 브라우저는 수신된 HTML 바이트를 문자, 토큰, 노드로 변환하여 점진적으로 DOM 트리를 구축합니다 [1].
-  * DOM은 페이지의 구조와 콘텐츠를 나타내며, 노드 수가 많고 트리의 깊이가 깊을수록 브라우저의 레이아웃(Reflow) 및 페인트(Repaint) 등 중요 렌더링 경로(Critical Rendering Path) 작업에 걸리는 연산 부담이 증가합니다 [6, 7].
+  * DOM은 페이지의 구조와 콘텐츠를 나타내며, 노드 수가 많고 트리의 깊이가 깊을수록 브라우저의 레이아웃(Reflow) 및 페인트(Repaint) 등 중요 렌더링 경로([[Critical Rendering Path]]) 작업에 걸리는 연산 부담이 증가합니다 [6, 7].
   * 웹 애플리케이션에서 DOM을 직접 수정하는 작업은 본질적으로 느립니다 [2]. DOM의 변경은 레이아웃과 페인트 단계를 트리거하며, 여러 노드를 개별적으로 업데이트할 경우 중복된 재계산을 유발하기 때문입니다 [2].
 
 * **Virtual DOM의 개념 및 도입 목적**
@@ -29,7 +29,7 @@ DOM(문서 객체 모델)은 브라우저가 HTML을 파싱하여 생성하는
 
 ## 🔗 Knowledge Connections
 - **Related Topics:** [[Critical Rendering Path]], [[Reflow and Repaint]], [[Reconciliation]], [[React Fiber Architecture]]
-- **Projects/Contexts:** [[프론트엔드 기초 구조 이해]], [[브라우저 렌더링 과정 (HTML → CSSOM → Render Tree)]], [[“React가 빠른 이유” 및 렌더링 최적화 개념]]
+- **Projects/Contexts:** [[프론트엔드 기초 구조 이해]], [[브라우저 렌더링 과정 (HTML → [[CSSOM]] → [[Render Tree]])]], [[“React가 빠른 이유” 및 렌더링 최적화 개념]]
 - **Contradictions/Notes:** Virtual DOM이 수동 DOM 조작 비용을 크게 줄여주어 React의 빠른 성능을 보장하지만, 소스에 따르면 "Virtual DOM의 Diffing 작업 자체가 무료는 아니며(not free), 무분별한 리렌더링 폭포수(Re-Render Cascade)가 발생할 경우 연산 낭비와 성능 저하의 주원인이 될 수 있다"고 경고합니다 [16]. 따라서 완벽한 성능을 위해서는 Virtual DOM에만 의존하지 않고 메모이제이션(Memoization)을 통한 컴포넌트 최적화가 필요합니다 [16].
 
 ---