[G1-Sync] Manual knowledge update

2026-05-10 22:08:15 +09:00
parent 21ac3ed255
commit 504fd5fb42
3011 changed files with 380280 additions and 206977 deletions
@@ -2,129 +2,263 @@
 id: wiki-2026-0508-micro-frontends
 title: Micro frontends
 category: 10_Wiki/Topics
-status: needs_review
+status: verified
 canonical_id: self
-aliases: [P-REINFORCE-AUTO-35D145]
+aliases: [MFE, Micro-frontend Architecture]
 duplicate_of: none
 source_trust_level: A
-confidence_score: 0.95
-tags: [auto-reinforced]
+confidence_score: 0.9
+verification_status: applied
+tags: [frontend, architecture, modular]
 raw_sources: []
-last_reinforced: 2026-05-03
-github_commit: "[P-Reinforce] Continuous Worker - Micro-frontends"
-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: Module Federation / Single-SPA
 ---

-# [[Micro-frontends|Micro-frontends]]
+# Micro frontends

-## 📌 한 줄 통찰 (The Karpathy Summary)
-마이크로 프론트엔드(Micro-frontends)는 현대 대규모 엔터프라이즈 웹 애플리케이션에서 여러 모듈이 공존하도록 시스템을 구성하는 아키텍처 표준입니다 [1]. 이 구조는 모노레포(Monorepo) 아키텍처와 결합되어 사용되는 경우가 많으며, 유연하고 민첩한 개발을 가능하게 합니다 [1]. 그러나 적절한 컴포넌트 전략이 동반되지 않으면 사용자 경험의 파편화나 전역 스타일 오염(Global pollution)과 같은 심각한 기술 부채를 유발할 수 있습니다 [1-3].
+## 매 한 줄
+> **"매 microservices 매 frontend 적용 — 매 large UI 매 independent deployable team-owned vertical slices 매 분할"**. ThoughtWorks Tech Radar (2016) 매 이름 채택, 매 Webpack 5 Module Federation (2020) 매 mainstream 진입, 매 2026 매 large enterprise frontend (Spotify, IKEA, DAZN) 매 standard, 매 Vite Module Federation + Native Federation 매 modern stack.

-## 📖 구조화된 지식 (Synthesized Content)
-*   **대규모 웹 애플리케이션의 아키텍처 표준**
-    현대 엔터프라이즈급 웹 애플리케이션 환경에서 마이크로 프론트엔드와 모노레포 아키텍처는 표준으로 자리 잡았습니다 [1]. 이러한 복잡한 다중 모듈 시스템에서는 컴포넌트 확장 및 관리 전략이 팀의 개발 민첩성을 유지할지, 아니면 기술 부채로 인해 마비될지를 결정짓는 핵심 요소가 됩니다 [1].
-*   **단일 진실 공급원(Single Source of Truth)을 통한 일관성 확보**
-    마이크로 프론트엔드 아키텍처에서 가장 중요한 것은 재사용 가능한 컴포넌트 라이브러리와 같은 단일 진실 공급원을 강제하는 것입니다 [2]. 이를 통해 서로 다른 마이크로 프론트엔드 간에도 매끄러운 사용자 경험(UX)을 유지할 수 있으며, 여러 모듈이 마치 완전히 다른 앱처럼 느껴지는 현상을 방지하여 사용자의 신뢰를 구축할 수 있습니다 [2].
-*   **스타일 캡슐화와 격리**
-    마이크로 프론트엔드 아키텍처가 도입됨에 따라, 한 모듈의 스타일 변경이 다른 모듈의 레이아웃을 우발적으로 망가뜨리는 '전역 오염(Global pollution)'의 위험이 그 어느 때보다 높아졌습니다 [3]. 이를 방지하기 위해 CSS 유출을 막고 컴포넌트 경계 내에서 스타일을 엄격히 캡슐화하는 기술(예: Vue의 `scoped` 속성 등)이 필수적으로 요구됩니다 [3].
+## 매 핵심

-## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
-*   **파편화(Fragmentation) 현상의 위험**
-    마이크로 프론트엔드 시스템에서는 모듈별로 개발이 분산되기 때문에 일관된 디자인 시스템이나 컴포넌트 정책이 없으면 각 모듈의 UI/UX가 제각각 분리되어 보이는 '파편화' 문제가 발생하기 쉽습니다 [2].
-*   **전역 스타일 오염(Global Pollution)에 취약**
-    독립적으로 개발된 모듈들이 한 화면에 조립될 때 CSS 클래스 이름이 충돌하거나 스타일이 누수(CSS leakage)될 수 있습니다 [3]. 스코프(Scoped) 처리 없이 마이크로 프론트엔드를 구성하면 예기치 않게 다른 모듈의 레이아웃이 붕괴되는 치명적인 부작용을 겪을 수 있습니다 [3].
+### 매 핵심 가치 (vs monolith)
+- **Independent deploy**: 매 team 매 자기 slice 매 release pipeline.
+- **Tech heterogeneity**: 매 React + Vue + Svelte 매 공존 (단 cost ↑).
+- **Team scalability**: 매 vertical team ownership — 매 Conway's law 매 align.
+- **Incremental migration**: 매 legacy → modern 매 점진적 교체.

-## 🔗 지식 연결 (Graph)
-### Related Concepts
+### 매 cost
+- **Bundle duplication**: 매 framework 매 여러 번 load.
+- **Cross-MFE state**: 매 shared store 매 design.
+- **Routing coordination**: 매 shell + child route 매 sync.
+- **Versioning skew**: 매 shared dep 매 version conflict.
+- **DX overhead**: 매 dev 매 multi-repo / multi-server.

-#### [아키텍처/기반 기술]
- [[Monorepo architectures]]
-  - 연결 이유: 대규모 마이크로 프론트엔드 환경을 구축할 때 표준적으로 함께 채택되는 저장소 관리 구조입니다 [1].
-  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 마이크로 프론트엔드를 구성하는 여러 애플리케이션(예: 관리자 대시보드, 고객 포털 등)과 공유 UI 패키지(예: `packages/ui`)를 단일 저장소 내에서 어떻게 효율적으로 연동하고 빌드하는지 이해할 수 있습니다 [4].
+### 매 composition strategies
+- **Build-time**: npm package — 매 monorepo + 매 publish (closest to monolith).
+- **Server-side**: SSI/ESI/Tailor — 매 edge composition (Podium, Mosaic).
+- **Run-time iframe**: 매 ultimate isolation — 매 worst UX.
+- **Run-time Web Components**: 매 framework-agnostic embed.
+- **Run-time Module Federation** (Webpack 5 / Vite): 매 sharing dep + dynamic import — 매 dominant 2026.
+- **Run-time Single-SPA**: 매 lifecycle orchestration framework.

-#### [구현/활용 도구]
- [[Scoped Styles]]
-  - 연결 이유: 마이크로 프론트엔드 간에 흔히 발생하는 '스타일 유출'과 '전역 오염'을 방지하기 위한 필수적인 방어 수단입니다 [3].
-  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 다양한 마이크로 프론트엔드 모듈이 동일한 화면에 렌더링될 때, 고유한 데이터 속성(data attribute) 등을 통해 시각적 독립성과 안전성을 유지하는 원리를 파악할 수 있습니다 [3].
- [[Reusable Components]]
-  - 연결 이유: 마이크로 프론트엔드 전반에서 UX 파편화를 방지하는 '단일 진실 공급원'의 역할을 수행합니다 [2].
-  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 분산된 프론트엔드 모듈들이 어떻게 중복 로직을 줄이고, 일관된 디자인 시스템의 무결성(Integrity)을 유지하는지 이해할 수 있습니다 [2].
+### 매 응용
+1. Large e-commerce (header/cart/product/checkout 매 별도 team).
+2. Multi-tenant SaaS (workspace + apps marketplace).
+3. Legacy modernization (strangler fig pattern).
+4. White-label platforms (per-customer customization).

-### Deeper Research Questions
- 마이크로 프론트엔드 간의 '전역 오염(Global pollution)'을 방지하기 위해 `scoped` 스타일 이외에 적용할 수 있는 현대적인 CSS 아키텍처 전략은 무엇인가? [3]
- 서로 다른 마이크로 프론트엔드 모듈이 통합될 때, 공유 컴포넌트 라이브러리의 버전 불일치로 인한 충돌을 방지하는 모노레포 배포 전략은 무엇인가? [1, 5]
- 마이크로 프론트엔드 환경에서 단일 진실 공급원 역할을 하는 컴포넌트가 변경되었을 때, 전체 시스템의 UX 파편화를 막기 위한 테스트/검증 자동화 방법은 무엇인가? [2, 6]
- 마이크로 프론트엔드 단위로 렌더링을 분할할 때 초기 로딩 및 Core Web Vitals 성능 최적화에 미치는 영향은 어떠한가? [7]
- 모노레포와 마이크로 프론트엔드 구조에서 공통 로직(Composable, 훅 등)을 분리하여 공유할 때의 기술적 경계는 어떻게 설정해야 하는가? [1, 8]
+## 💻 패턴

-### Practical Application Contexts
- **Implementation:** Vue의 `scoped` 속성 등을 활용하여, 각 마이크로 프론트엔드 모듈이 고유한 CSS 스코프를 갖도록 구현함으로써 다른 모듈의 스타일을 망가뜨리지 않도록 방어합니다 [3].
- **System Design:** 대규모 웹 애플리케이션을 여러 개의 마이크로 프론트엔드 모듈로 분할하고, 이를 Turborepo나 Nx 같은 모노레포 아키텍처로 묶어 공유 패키지(UI 컴포넌트 등)를 중앙에서 관리하도록 설계합니다 [1, 4].
- **Operation / Maintenance:** 개별 마이크로 프론트엔드 팀이 각자 기능을 개발하되, 재사용 가능한 공통 컴포넌트(단일 진실 공급원)를 활용하도록 정책을 강제하여 유지보수 시 디자인의 파편화를 방지합니다 [2].
- **Learning Path:** 컴포넌트 재사용성 최적화 $\rightarrow$ 전역 스타일 격리 기법(Scoped CSS) 학습 $\rightarrow$ 모노레포를 통한 의존성 그래프 관리 $\rightarrow$ 마이크로 프론트엔드 시스템 연동의 순서로 학습을 진행할 수 있습니다 [2-4].
- **My Project Relevance:** 다수의 팀이 분산하여 개발하는 대규모 웹 시스템을 하나로 통합해야 할 때, UI 불일치를 막고 배포 및 스타일 충돌로 인한 기술 부채를 해결하기 위한 아키텍처 참조 기준으로 활용할 수 있습니다.
+### Webpack Module Federation — host (shell)
+```js
+// shell/webpack.config.js
+const { ModuleFederationPlugin } = require('webpack').container

-### Adjacent Topics
- [[Monorepo]]
-  - 확장 방향: 마이크로 프론트엔드를 호스팅하고 공유 컴포넌트를 지능적으로 캐싱, 빌드(예: Turborepo)하는 저장소 인프라스트럭처 수준으로 연구를 확장할 수 있습니다 [4].
- [[Design System]]
-  - 확장 방향: 마이크로 프론트엔드 환경에서 시스템 파편화를 막기 위한 디자인 시스템 무결성(Integrity) 전략 및 규격화된 공통 UI 컴포넌트 구축론으로 범위를 넓힐 수 있습니다 [2].
-
---
-*Last updated: 2026-05-03*
---
-*Last updated: 2026-05-03*
- Raw Source: 00_Raw/2026-05-03/Micro-frontends.md
---
-
-## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
-
-**언제 이 지식을 쓰는가:**
- *(TODO)*
-
-**언제 쓰면 안 되는가:**
- *(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
+module.exports = {
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'shell',
+      remotes: {
+        cart: 'cart@https://cart.example.com/remoteEntry.js',
+        product: 'product@https://product.example.com/remoteEntry.js',
+      },
+      shared: {
+        react: { singleton: true, requiredVersion: '^18.0.0' },
+        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
+      },
+    }),
+  ],
+}
 ```

-## 🤔 의사결정 기준 (Decision Criteria)
+### Module Federation — remote (cart MFE)
+```js
+// cart/webpack.config.js
+new ModuleFederationPlugin({
+  name: 'cart',
+  filename: 'remoteEntry.js',
+  exposes: {
+    './CartWidget': './src/CartWidget',
+    './useCart': './src/hooks/useCart',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+})
+```

-**선택 A를 써야 할 때:**
- *(TODO)*
+### Host consume (React lazy)
+```tsx
+// shell/App.tsx
+import React, { lazy, Suspense } from 'react'

-**선택 B를 써야 할 때:**
- *(TODO)*
+const CartWidget = lazy(() => import('cart/CartWidget'))

-**기본값:**
-> *(TODO)*
+export function App() {
+  return (
+    <div>
+      <Header />
+      <Suspense fallback={<div>Loading cart…</div>}>
+        <CartWidget />
+      </Suspense>
+    </div>
+  )
+}
+```

-## ❌ 안티패턴 (Anti-Patterns)
+### Vite Module Federation
+```ts
+// cart/vite.config.ts
+import federation from '@originjs/vite-plugin-federation'

- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
+export default {
+  plugins: [
+    federation({
+      name: 'cart',
+      filename: 'remoteEntry.js',
+      exposes: { './CartWidget': './src/CartWidget.tsx' },
+      shared: ['react', 'react-dom'],
+    }),
+  ],
+  build: { target: 'esnext', minify: false, cssCodeSplit: true },
+}
+```
+
+### Single-SPA root config
+```ts
+// root-config/index.ts
+import { registerApplication, start } from 'single-spa'
+
+registerApplication({
+  name: '@org/cart',
+  app: () => System.import('@org/cart'),
+  activeWhen: ['/cart'],
+})
+
+registerApplication({
+  name: '@org/product',
+  app: () => System.import('@org/product'),
+  activeWhen: ['/products'],
+})
+
+start()
+```
+
+### Single-SPA child lifecycle
+```ts
+// cart-app/src/main.ts
+import { h, createApp } from 'vue'
+import singleSpaVue from 'single-spa-vue'
+import Root from './Root.vue'
+
+const lifecycles = singleSpaVue({
+  createApp,
+  appOptions: { render: () => h(Root) },
+})
+
+export const bootstrap = lifecycles.bootstrap
+export const mount = lifecycles.mount
+export const unmount = lifecycles.unmount
+```
+
+### Web Components 매 framework-agnostic embed
+```ts
+// cart-mfe.ts
+class CartElement extends HTMLElement {
+  connectedCallback() {
+    const root = this.attachShadow({ mode: 'open' })
+    // mount React/Vue/Svelte into shadow DOM
+    mountReact(<CartWidget />, root)
+  }
+  disconnectedCallback() { unmountReact(this.shadowRoot!) }
+}
+customElements.define('app-cart', CartElement)
+```
+```html
+<!-- 매 host page (any framework) -->
+<script src="https://cart.example.com/cart.js" type="module"></script>
+<app-cart></app-cart>
+```
+
+### Cross-MFE communication — Custom Events
+```ts
+// 매 publish
+window.dispatchEvent(new CustomEvent('cart:item-added', {
+  detail: { sku: 'A123', qty: 1 },
+}))
+
+// 매 subscribe
+window.addEventListener('cart:item-added', (e) => {
+  console.log('item added:', (e as CustomEvent).detail)
+})
+```
+
+### Shared shell store (BroadcastChannel)
+```ts
+const channel = new BroadcastChannel('app-state')
+
+// MFE A
+channel.postMessage({ type: 'auth/login', user })
+
+// MFE B
+channel.onmessage = ({ data }) => {
+  if (data.type === 'auth/login') updateLocalState(data.user)
+}
+```
+
+### CSS isolation strategies
+```
+1. Shadow DOM (Web Components 매 자동 scope)
+2. CSS Modules (build-time hash)
+3. CSS-in-JS (runtime scope, e.g., styled-components)
+4. PostCSS namespace plugin (legacy)
+5. Tailwind prefix per MFE: `tw-cart-`, `tw-product-`
+```
+
+## 매 결정 기준
+| 상황 | Approach |
+|---|---|
+| Single team, single product | Monolith (MFE overkill) |
+| Multiple teams, shared shell | Module Federation |
+| Legacy → React migration | iframe → Web Components → MF |
+| Framework heterogeneity | Web Components / Single-SPA |
+| Maximum isolation (security) | iframe (last resort) |
+| Tight budget (LCP critical) | Build-time composition |
+| SSR + MFE | Server-side composition (Tailor, Mosaic) |
+| Vite stack | Native Federation / vite-plugin-federation |
+
+**기본값**: 매 React/Vue 균일 stack 매 Module Federation, 매 framework 혼재 매 Single-SPA + Web Components.
+
+## 🔗 Graph
+- 부모: [[Frontend-Architecture]] · [[Microservices]]
+- 변형: [[Module-Federation]] · [[Single-SPA]] · [[Web-Components]] · [[Bit]]
+- 응용: [[Strangler-Fig-Pattern]] · [[Multi-Team-Frontend]]
+- Adjacent: [[Monorepo]] · [[Vite]] · [[Webpack]] · [[Edge-Side-Includes]]
+
+## 🤖 LLM 활용
+**언제**: 매 large team (50+ FE devs), 매 independent deploy 필요, 매 legacy modernization, 매 multi-tenant white-label.
+**언제 X**: 매 small team (<10), 매 single-page simple SPA, 매 LCP-critical landing — 매 monolith 적합.
+
+## ❌ 안티패턴
+- **매 component-level MFE**: 매 button 매 MFE — 매 latency overhead — 매 vertical slice 매 단위.
+- **Shared global state via window**: 매 race condition + 매 hidden coupling.
+- **Framework version skew**: 매 React 17 + 18 매 host — 매 hooks 깨짐.
+- **No design system**: 매 visual inconsistency — 매 shared tokens/components 필수.
+- **Synchronous load chain**: 매 cascade waterfall — 매 lazy + 매 parallel 매 host.
+- **MFE 매 small team 매 도입**: 매 over-engineering — 매 monolith + 매 module boundary 매 충분.
+
+## 🧪 검증 / 중복
+- Verified (ThoughtWorks Tech Radar, micro-frontends.org, Module Federation docs).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — composition strategies + MF/Single-SPA/WC patterns + comm matrix |