chore(brain): ASTRA 성장 자산 동기화 — 기능 인벤토리·growth(약점프로필/학습큐)·일화기억·장기기억·회의록 원문

2026-06-12 16:37:41 +09:00
parent a97fc7be07
commit 89fb05a28a
781 changed files with 138546 additions and 47 deletions
@@ -0,0 +1,154 @@
+---
+id: wiki-2026-0508-diffing-algorithm
+title: Diffing Algorithm
+category: 10_Wiki/Topics
+status: verified
+canonical_id: self
+aliases: [VDOM Diff, Reconciliation]
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.9
+verification_status: applied
+tags: [react, vue, vdom, reconciliation]
+raw_sources: []
+last_reinforced: 2026-05-10
+github_commit: pending
+tech_stack:
+  language: JavaScript
+  framework: React/Vue
+---
+
+# Diffing Algorithm
+
+## 매 한 줄
+> **"매 VDOM diff = O(n) heuristic — 매 same-level node 의 비교 + key-based identity."**. 매 React/Vue/Preact 모두 매 Levenshtein-style O(n³) 의 회피하기 위해 매 두 가정 (1) 다른 type = subtree 교체, (2) key가 child identity 의 hint. 매 React 19 (2024) Fiber + concurrent rendering, Vue 3.4 patchFlag-driven static hoist 의 진화.
+
+## 매 핵심
+
+### 매 두 가정 (Heuristics)
+1. 매 different element type ⇒ subtree 의 unmount + 재생성.
+2. 매 stable `key` ⇒ list reconciliation 의 identity hint.
+
+### 매 알고리즘
+- React = Fiber tree, work loop가 매 cooperative scheduling 가능 (concurrent mode).
+- Vue 3 = compiled patchFlag (static / dynamic 분류) + LIS (Longest Increasing Subsequence) for keyed list.
+- Svelte/Solid = 매 VDOM 없음 — 매 fine-grained reactivity 의 directly DOM 의 patch.
+
+### 매 응용
+1. Keyed list — 매 stable key가 매 reorder cost 의 minimize.
+2. Conditional render — 매 ternary가 매 type swap 의 발생.
+3. Concurrent rendering — 매 high-priority update가 매 low-priority interrupt.
+
+## 💻 패턴
+
+### 1. Stable key (correct)
+```jsx
+// CORRECT — id is stable identity
+items.map((item) => <Row key={item.id} item={item} />)
+
+// WRONG — index changes when list reorders
+items.map((item, i) => <Row key={i} item={item} />)
+```
+
+### 2. Type swap forces unmount
+```jsx
+{condition ? <div>A</div> : <span>A</span>}
+// span/div type 다름 → subtree unmount + remount
+// 같은 component reuse 원하면 같은 type 유지:
+<div>{condition ? 'A' : 'B'}</div>
+```
+
+### 3. React Fiber priority lanes (19)
+```jsx
+import { useTransition } from 'react';
+
+const [isPending, startTransition] = useTransition();
+
+const onChange = (e) => {
+  setInput(e.target.value); // urgent
+  startTransition(() => {
+    setFilter(e.target.value); // can be interrupted
+  });
+};
+```
+
+### 4. Vue 3 patchFlag (compiled)
+```html
+<!-- Source -->
+<div>
+  <span>{{ msg }}</span>
+  <span class="static">hi</span>
+</div>
+
+<!-- Compiled (simplified) -->
+<!-- 첫 span has patchFlag = 1 (TEXT) → diff only text -->
+<!-- 두번째 span hoisted as static — 매 diff 건너뛰기 -->
+```
+
+### 5. Vue keyed list w/ LIS
+```html
+<TransitionGroup tag="ul">
+  <li v-for="item in items" :key="item.id">{{ item.label }}</li>
+</TransitionGroup>
+<!-- Vue calculates LIS to minimize DOM moves -->
+```
+
+### 6. React.memo + structural equality
+```typescript
+const Row = React.memo(({ item }: { item: Item }) =>
+  <div>{item.label}</div>,
+  (prev, next) => prev.item.id === next.item.id && prev.item.label === next.item.label,
+);
+```
+
+### 7. Solid/Svelte alternative (no diff)
+```typescript
+// Solid — fine-grained reactivity, no VDOM
+import { createSignal } from 'solid-js';
+const [count, setCount] = createSignal(0);
+// JSX compiles to direct DOM ops; only `count()` text node updates
+return <div>count: {count()}</div>;
+```
+
+### 8. Avoid layout-impacting reorder
+```jsx
+// Stable order with key — only reorder DOM, no remount
+<>{sorted.map((u) => <UserCard key={u.id} user={u} />)}</>
+// Each UserCard preserves its instance (state, refs) on reorder.
+```
+
+## 매 결정 기준
+| 상황 | Approach |
+|---|---|
+| List render | 매 stable id key — index X. |
+| Heavy filter + input | useTransition + deferredValue. |
+| Static UI | Vue patchFlag / React.memo. |
+| Maximum perf | Solid / Svelte (skip VDOM). |
+| Type-switch UI | wrap in same outer type to preserve children. |
+
+**기본값**: 매 React 19 + Suspense + Transition + 매 stable key.
+
+## 🔗 Graph
+- 부모: [[Virtual_DOM과_Reconciliation|Virtual DOM]] · [[Reconciliation]]
+- 변형: [[React Fiber]] · [[Vue Reactivity]]
+- 응용: [[Animation]]
+
+## 🤖 LLM 활용
+**언제**: 매 keyed-list bug 의 explain, 매 type-swap unmount 의 진단.
+**언제 X**: 매 specific framework internal — 매 source code 의 read.
+
+## ❌ 안티패턴
+- **Index as key with reorder**: 매 wrong identity → state mix.
+- **Random key per render**: 매 매 unmount + remount.
+- **Inline objects/arrays as deps**: 매 referential change → memo bypass.
+- **Massive un-keyed list**: 매 O(n) DOM ops 매 frame.
+
+## 🧪 검증 / 중복
+- Verified (react.dev reconciliation, vuejs.org renderer, Solid docs).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — VDOM diff + Fiber + Vue patchFlag |