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,169 @@
+---
+id: wiki-2026-0508-컴포넌트-기반-웹-프레임워크-아키텍처-설계
+title: 컴포넌트 기반 웹 프레임워크 아키텍처 설계
+category: 10_Wiki/Topics
+status: verified
+canonical_id: self
+aliases: [Component Framework Architecture, Web Framework Design]
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.9
+verification_status: applied
+tags: [frontend, architecture, framework-design, react, vue, svelte]
+raw_sources: []
+last_reinforced: 2026-05-10
+github_commit: pending
+tech_stack:
+  language: typescript
+  framework: react-19/vue-3.5/svelte-5
+---
+
+# 컴포넌트 기반 웹 프레임워크 아키텍처 설계
+
+## 매 한 줄
+> **"매 reactive component tree + diffing/scheduling 의 framework design"**. 매 React/Vue/Svelte 모두 (1) component model, (2) reactivity primitive, (3) rendering scheduler, (4) state management, (5) routing/data layer 의 5-layer stack. 매 2026 의 trend — fine-grained reactivity (Svelte 5 runes, Vue 3.5 Vapor, Solid signals) 의 dominant.
+
+## 매 핵심
+
+### 매 5-layer stack
+1. **Component model**: function (React/Solid) vs SFC (Vue/Svelte) vs class.
+2. **Reactivity primitive**: VDOM diff vs signals vs compile-time reactivity.
+3. **Scheduler**: sync vs concurrent (React 19) vs microtask-batched.
+4. **State**: local state, context, external store (Zustand, Pinia, Redux Toolkit).
+5. **Data/routing**: Next.js App Router, Nuxt, SvelteKit, Remix.
+
+### 매 reactivity spectrum (2026)
+- **VDOM diff** (React, Preact): re-run component → diff → patch.
+- **Fine-grained signals** (Solid, Svelte 5 runes, Vue 3.5 Vapor): track reads/writes, surgical DOM update.
+- **Compile-time** (Svelte, Marko): compile component to imperative DOM ops.
+
+### 매 응용
+1. Internal framework / DSL design.
+2. Framework-agnostic component library (Lit, Web Components).
+3. Custom renderer (React Native, react-three-fiber, Ink).
+
+## 💻 패턴
+
+### 1. Minimal signal-based reactivity (~Solid)
+```typescript
+type Signal<T> = [() => T, (v: T) => void];
+let currentSub: (() => void) | null = null;
+
+function signal<T>(initial: T): Signal<T> {
+  let value = initial;
+  const subs = new Set<() => void>();
+  const get = () => {
+    if (currentSub) subs.add(currentSub);
+    return value;
+  };
+  const set = (v: T) => { value = v; subs.forEach(s => s()); };
+  return [get, set];
+}
+
+function effect(fn: () => void) {
+  const run = () => { currentSub = run; fn(); currentSub = null; };
+  run();
+}
+```
+
+### 2. VDOM diff core (~Preact)
+```typescript
+interface VNode { type: string | Function; props: any; children: VNode[]; }
+
+function diff(oldV: VNode | null, newV: VNode, parent: HTMLElement) {
+  if (!oldV) parent.appendChild(create(newV));
+  else if (oldV.type !== newV.type) parent.replaceChild(create(newV), parent.firstChild!);
+  else updateProps(parent.firstChild as HTMLElement, oldV.props, newV.props);
+}
+```
+
+### 3. Component as function (React-style)
+```typescript
+function Counter() {
+  const [count, setCount] = useState(0);
+  return h('button', { onClick: () => setCount(count + 1) }, `Count: ${count}`);
+}
+```
+
+### 4. Compile-time reactivity (~Svelte 5 runes)
+```svelte
+<script>
+  let count = $state(0);
+  let doubled = $derived(count * 2);
+  $effect(() => { console.log(count); });
+</script>
+<button onclick={() => count++}>{count} / {doubled}</button>
+```
+
+### 5. Scheduler (concurrent React-like)
+```typescript
+const queue: Array<() => void> = [];
+let scheduled = false;
+function schedule(work: () => void) {
+  queue.push(work);
+  if (!scheduled) {
+    scheduled = true;
+    queueMicrotask(() => {
+      while (queue.length) queue.shift()!();
+      scheduled = false;
+    });
+  }
+}
+```
+
+### 6. Custom renderer registry
+```typescript
+interface Renderer<HostNode> {
+  createElement(type: string): HostNode;
+  appendChild(parent: HostNode, child: HostNode): void;
+  setProp(node: HostNode, key: string, value: unknown): void;
+}
+// React reconciler / Vue createRenderer 의 패턴.
+```
+
+### 7. Compound component pattern
+```tsx
+<Tabs>
+  <Tabs.List>
+    <Tabs.Trigger value="a">A</Tabs.Trigger>
+  </Tabs.List>
+  <Tabs.Content value="a">...</Tabs.Content>
+</Tabs>
+```
+
+## 매 결정 기준
+| 상황 | Choice |
+|---|---|
+| Mass-market app | React 19 + Next.js 15 (ecosystem) |
+| Performance-critical | Solid / Svelte 5 (signals) |
+| Progressive enhancement | Astro + island arch |
+| Web Components / portable | Lit |
+| Embedded UI / DSL | Custom renderer atop React reconciler |
+
+**기본값**: 매 React 19 + Server Components + Suspense (mass-market). 매 perf-bound 의 Solid/Svelte 5.
+
+## 🔗 Graph
+- 부모: [[Component-Composition|Component-Based Architecture]]
+- 변형: [[Virtual_DOM과_Reconciliation|Virtual DOM]] · [[Fine-Grained Reactivity]]
+- 응용: [[React]] · [[Solid]]
+- Adjacent: [[State Management]] · [[Modern_Web_Rendering_and_Optimization|Server Components]] · [[Hydration]]
+
+## 🤖 LLM 활용
+**언제**: 새 framework / DSL 설계 시. 매 framework choice trade-off discussion 시.
+**언제 X**: 매 단순 app 개발 — 매 ecosystem (Next.js, Nuxt) defaults 에 의존.
+
+## ❌ 안티패턴
+- **재발명 반복**: 매 production framework 와 경쟁 의도 — 매 절대 X.
+- **VDOM 의 abuse**: 매 fine-grained 가 더 적합한 경우에도 VDOM 강행.
+- **Scheduler omission**: 매 sync only — 매 large tree 의 long task 발생.
+- **Tight coupling renderer ↔ reactivity**: 매 portability 상실.
+
+## 🧪 검증 / 중복
+- Verified (React 19, Vue 3.5 Vapor, Svelte 5 runes, Solid 1.x docs).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — 5-layer stack + 7 patterns + 2026 reactivity landscape |