Files

T

Antigravity Agent 9a135bd19d docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치.
콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서
전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한
업데이트0615/무제 3.canvas 뿐).

2026-07-05 00:44:01 +09:00

5.5 KiB

Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

title

컴포넌트 기반 웹 프레임워크 아키텍처 설계

매 한 줄

"매 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

Component model: function (React/Solid) vs SFC (Vue/Svelte) vs class.
Reactivity primitive: VDOM diff vs signals vs compile-time reactivity.
Scheduler: sync vs concurrent (React 19) vs microtask-batched.
State: local state, context, external store (Zustand, Pinia, Redux Toolkit).
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.

매 응용

Internal framework / DSL design.
Framework-agnostic component library (Lit, Web Components).
Custom renderer (React Native, react-three-fiber, Ink).

💻 패턴

1. Minimal signal-based reactivity (~Solid)

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)

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)

function Counter() {
  const [count, setCount] = useState(0);
  return h('button', { onClick: () => setCount(count + 1) }, `Count: ${count}`);
}

4. Compile-time reactivity (~Svelte 5 runes)

<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)

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

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

<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
변형: Virtual DOM과 Reconciliation · Fine-Grained Reactivity
응용: React · Solid
Adjacent: State Management · Modern_Web_Rendering_and_Optimization · 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

5.5 KiB Raw Blame History