2nd/10_Wiki/Topics/Frontend/컴포넌트 기반 웹 프레임워크 아키텍처 설계.md

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

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
wiki-2026-0508-컴포넌트-기반-웹-프레임워크-아키텍처-설계	컴포넌트 기반 웹 프레임워크 아키텍처 설계	10_Wiki/Topics	verified	self	Component Framework Architecture Web Framework Design	none	A	0.9	applied	frontend architecture framework-design react vue svelte		2026-05-10	pending	language framework typescript 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)

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