[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -2,97 +2,168 @@
|
||||
id: wiki-2026-0508-컴포넌트-기반-웹-프레임워크-아키텍처-설계
|
||||
title: 컴포넌트 기반 웹 프레임워크 아키텍처 설계
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: [P-Reinforce-AUTO-F36267]
|
||||
aliases: [Component Framework Architecture, Web Framework Design]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.9
|
||||
tags: [auto-reinforced]
|
||||
verification_status: applied
|
||||
tags: [frontend, architecture, framework-design, react, vue, svelte]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - 컴포넌트 기반 웹 프레임워크 아키텍처 설계"
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
language: typescript
|
||||
framework: react-19/vue-3.5/svelte-5
|
||||
---
|
||||
|
||||
# [[컴포넌트 기반 웹 프레임워크 아키텍처 설계|컴포넌트 기반 웹 프레임워크 아키텍처 설계]]
|
||||
# 컴포넌트 기반 웹 프레임워크 아키텍처 설계
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 컴포넌트 기반 웹 프레임워크 아키텍처는 특정 기능이나 UI 요소를 구현하기 위해 HTML 구조, CSS 스타일, [[JavaScript|JavaScript]] 동작을 하나의 단위(컴포넌트)로 묶어 다루는 설계 방식입니다 [1]. 과거 기술적 역할 중심의 분리에서 벗어나 기능 중심의 수직적 모듈화를 통해 코드의 재사용성을 높이고 독립적인 개발과 테스트를 가능하게 합니다 [1, 2]. 프로젝트 규모가 커짐에 따라 발생하는 결합도 증가와 컴포넌트 비대화 문제를 해결하기 위해, 현대에는 마이크로 프론트엔드 및 FSD([[Feature-Sliced Design|Feature-Sliced Design]])와 같은 발전된 아키텍처 방법론과 결합되어 사용됩니다 [3-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.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
- **웹 패러다임의 변화와 컴포넌트의 등장:** 초기 웹 개발은 HTML(구조), CSS(표현), JS(동작)로 기술적 역할을 나누는 수평적 관심사 분리 방식을 사용했습니다 [6, 7]. 하지만 웹 프레임워크의 발전과 함께 이들을 하나의 기능 단위로 묶는 '컴포넌트' 패러다임이 등장했습니다 [1]. 이는 기존 계층구조를 수직으로 관통하며 기능 중심의 모듈화를 이끌었고, 개발 생산성과 유지보수성을 크게 향상시켰습니다 [2].
|
||||
- **컴포넌트 아키텍처의 한계와 결합도 문제:** 컴포넌트 구조는 만능이 아니었으며, 대규모 프로젝트에서는 하위 컴포넌트로 데이터를 단순히 전달하기 위해 불필요한 속성(props)을 여러 단계에 걸쳐 통과시켜야 하는 'Props drilling' 문제로 인해 결합도가 높아지는 한계에 직면했습니다 [8]. 또한, 하나의 컴포넌트 안에 데이터 관리, 표현, 비즈니스 로직 등 너무 많은 책임이 집중되어 단일 책임 원칙(SRP)을 위반하는 '컴포넌트 비대화' 현상이 발생했습니다 [4].
|
||||
- **계층적 관심사의 재도입과 발전:** 컴포넌트의 한계를 극복하기 위해 프론트엔드 아키텍처는 컴포넌트 내부에서 다시 계층적 관심사를 분리하는 방향으로 진화했습니다 [9].
|
||||
- **UI 계층 구조화:** [[Atomic Design Pattern|Atomic Design Pattern]] 등을 도입하여 UI 컴포넌트의 계층을 세밀하게 분리하고 역할을 분명히 했습니다 [10].
|
||||
- **단방향 의존성 구축:** [[CSS-in-JS|CSS-in-JS]], [[CSS Modules|CSS Modules]] 등을 통해 CSS가 HTML 구조와 JavaScript 논리를 따라가도록 단방향 의존성(데이터 → 화면)을 만들었습니다 [11, 12].
|
||||
- **상태 관리 및 비즈니스 로직 분리:** 뷰(화면)와 데이터 로직을 분리하고, 비동기 통신이나 캐싱과 같은 서버 상태 관리를 별도의 계층으로 위임하여 컴포넌트는 화면을 그리고 이벤트를 받는 역할에만 집중하도록 설계했습니다 [12-14].
|
||||
- **대규모 확장을 위한 FSD와 마이크로 프론트엔드:**
|
||||
- **[[Feature-Sliced Design (FSD)|Feature-Sliced Design (FSD]]:** 프로젝트가 거대해지면 전통적인 역할별 폴더 구조(/components, /api 등)만으로는 복잡성을 감당하기 어렵습니다 [5, 15]. FSD 아키텍처는 기능을 기준으로 코드를 분리하여 하나의 기능 단위에 필요한 모든 파일을 같은 폴더에 모아 관리함으로써 모듈 간 결합도를 줄이고 독립성을 높입니다 [5, 16].
|
||||
- **마이크로 프론트엔드 (Micro [[Frontend|Frontend]]s):** 거대한 단일 프론트엔드(Frontend Monolith)를 작고 독립적인 여러 조각으로 나누어 각 개발팀이 기술 스택에 구애받지 않고 자율적으로 개발 및 배포할 수 있게 하는 아키텍처입니다 [3, 17]. 런타임 통합, 웹 컴포넌트, 모듈 페더레이션, 라우트 기반 또는 컴포넌트 기반 합성 등의 방식을 활용해 어플리케이션을 조립합니다 [18, 19].
|
||||
## 매 핵심
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
|
||||
- **정책 변화:** Design & Experience 분야의 자동 자산화 수행.
|
||||
### 매 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.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** [[관심사의 분리 (Separation of Concerns)|관심사의 분리(Separation of Concerns]], 마이크로 프론트엔드(Micro Frontends), Feature-Sliced Design(FSD), [[단일 책임 원칙 (SRP)|단일 책임 원칙(SRP]]
|
||||
- **Projects/Contexts:** Spotify, Netflix, Amazon의 마이크로 프론트엔드 도입, 대규모 웹 애플리케이션의 폴더 구조 진화
|
||||
- **Contradictions/Notes:** 컴포넌트 기반 아키텍처는 초기에 관심사 분리의 혁신으로 여겨졌으나, 점차 하나의 컴포넌트에 너무 많은 로직이 집중되며 독립성이 훼손되는 모순이 발생했습니다. 이를 해결하기 위해 기능 단위로 묶인 컴포넌트 내부에서 다시 데이터 로직과 뷰 로직의 역할을 나누는 계층적(Layer) 분리 방식이 재도입되었습니다 [4, 9, 12].
|
||||
### 매 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.
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-18*
|
||||
### 매 응용
|
||||
1. Internal framework / DSL design.
|
||||
2. Framework-agnostic component library (Lit, Web Components).
|
||||
3. Custom renderer (React Native, react-three-fiber, Ink).
|
||||
|
||||
---
|
||||
## 💻 패턴
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
### 1. Minimal signal-based reactivity (~Solid)
|
||||
```typescript
|
||||
type Signal<T> = [() => T, (v: T) => void];
|
||||
let currentSub: (() => void) | null = null;
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
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];
|
||||
}
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
|
||||
## 💻 코드 패턴 (Code Patterns)
|
||||
|
||||
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
|
||||
|
||||
```text
|
||||
# TODO
|
||||
function effect(fn: () => void) {
|
||||
const run = () => { currentSub = run; fn(); currentSub = null; };
|
||||
run();
|
||||
}
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
### 2. VDOM diff core (~Preact)
|
||||
```typescript
|
||||
interface VNode { type: string | Function; props: any; children: VNode[]; }
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
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);
|
||||
}
|
||||
```
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
### 3. Component as function (React-style)
|
||||
```typescript
|
||||
function Counter() {
|
||||
const [count, setCount] = useState(0);
|
||||
return h('button', { onClick: () => setCount(count + 1) }, `Count: ${count}`);
|
||||
}
|
||||
```
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
### 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>
|
||||
```
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
### 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;
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
### 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-Based Architecture]] · [[Reactive Programming]]
|
||||
- 변형: [[Virtual DOM]] · [[Fine-Grained Reactivity]] · [[Compile-Time Reactivity]]
|
||||
- 응용: [[React]] · [[Vue]] · [[Svelte]] · [[Solid]]
|
||||
- Adjacent: [[State Management]] · [[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 |
|
||||
|
||||
Reference in New Issue
Block a user