[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -2,106 +2,228 @@
|
||||
id: wiki-2026-0508-modern-scalable-frontend-archite
|
||||
title: Modern Scalable Frontend Architecture
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: []
|
||||
aliases: [Frontend Architecture, Micro-frontends, RSC, Edge SSR, Islands]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.92
|
||||
tags: [uncategorized]
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [frontend, architecture, micro-frontend, rsc, monorepo, edge]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-08
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
tech_stack: { language: typescript, framework: next-js }
|
||||
---
|
||||
|
||||
# [[Modern Scalable Frontend Architecture|Modern Scalable Frontend Architecture]]
|
||||
# Modern Scalable Frontend Architecture
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
현대적이고 확장 가능한 프론트엔드 아키텍처는 고성능 런타임 최적화, 모듈식 컴포넌트 구조, 중앙 집중화된 디자인 토큰 시스템을 결합하여 대규모 웹 애플리케이션을 구축하는 방법론입니다 [1, 2]. React 생태계가 서버 컴포넌트(RSC) 기반으로 전환됨에 따라 [[CSS-in-JS|CSS-in-JS]]에서 Tailwind CSS와 같은 유틸리티 및 빌드 타임 기반 스타일링으로의 이동이 두드러지고 있습니다 [1, 3, 4]. 또한 Atomic Design, 복합 컴포넌트([[Compound Components|Compound Components]]) 패턴과 모노레포(Monorepo) 및 [[Feature-Sliced Design|Feature-Sliced Design]](FSD) 아키텍처를 통해 확장성과 코드 유지보수성을 극대화합니다 [5-7].
|
||||
## 매 한 줄
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
**1. 스타일링 패러다임: [[styled-components|styled-components]] vs Tailwind CSS**
|
||||
* **Styled-components의 한계:** Styled-components와 같은 런타임 CSS-in-JS는 동적인 스타일링과 컴포넌트 기반 접근 방식으로 우수한 개발자 경험을 제공하지만, 브라우저에서 [[JavaScript|JavaScript]]를 실행해 스타일을 생성하므로 성능 오버헤드가 발생합니다 [4, 8, 9]. 특히 React Context에 의존하기 때문에 서버에서 정적 HTML을 렌더링하는 [[React Server Components|React Server Components]](RSC)와 본질적으로 호환되지 않는 단점이 있습니다 [3, 10].
|
||||
* **Tailwind CSS의 성능 우위:** Tailwind CSS는 빌드 타임에 정적 CSS를 생성하는 유틸리티 우선(Utility-first) 접근 방식을 취하여 런타임 오버헤드가 없고 RSC와 뛰어난 호환성을 보여줍니다 [4, 11]. JIT(Just-In-Time) 컴파일러를 통해 사용된 클래스만 번들에 포함하므로 [[Core Web Vitals|Core Web Vitals]] 최적화에 유리합니다 [4, 12]. 예를 들어, Kiwi.com의 경우 Styled-components에서 Tailwind로 마이그레이션한 후 모바일 환경에서 FID(First Input Delay)를 75.9%, INP(Interaction to Next Paint)를 58.4% 줄이는 극적인 성능 향상을 달성했습니다 [13, 14].
|
||||
* **Tailwind v4의 진화:** 새로운 Tailwind v4는 JavaScript 기반의 설정에서 벗어나 네이티브 CSS 변수를 활용하는 "CSS-first" 아키텍처(@theme 지시어 사용)를 도입하였으며, Rust 기반의 Oxide 엔진을 통해 빌드 속도를 10배 이상 향상시켰습니다 [15-17].
|
||||
2026년 확장형 프론트엔드는 **monorepo + RSC + edge SSR + islands** 의 4축으로 정리되며, 거대 조직은 micro-frontend, 콘텐츠 사이트는 islands, 풀 앱은 RSC가 default다.
|
||||
|
||||
**2. 확장 가능한 UI 컴포넌트 설계 패턴**
|
||||
* **복합 컴포넌트 (Compound Components):** 단일 컴포넌트에 수많은 Prop을 전달하는 대신, `Accordion.Item`, `Accordion.Header`처럼 관련된 하위 컴포넌트들이 React Context를 통해 상태를 암시적으로 공유하는 패턴입니다 [5, 18, 19]. 이는 사용자가 레이아웃을 자유롭게 구성할 수 있게 하면서도 로직의 은닉성을 보장합니다 [20, 21].
|
||||
* **[[Headless Components|Headless Components]]:** 로직(상태 관리, 접근성 등)만을 제공하고 시각적 마크업은 개발자가 직접 정의하도록 하는 패턴입니다 [22, 23]. Tailwind CSS와 결합하면 프레임워크에 종속되지 않는 고도로 커스터마이징된 UI 라이브러리를 만들 수 있습니다 [22].
|
||||
* **Atomic Design:** UI를 가장 작은 단위인 원자(Atoms)부터 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)로 계층화하여 조립하는 모델로, 일관성 있고 재사용 가능한 디자인 시스템을 구축하는 뼈대가 됩니다 [24-26].
|
||||
* **[[Overrides Pattern|Overrides Pattern]]:** Uber의 Base Web 시스템처럼, 컴포넌트 내부의 모든 요소에 대한 식별자를 제공하여 필요 시 기본 스타일과 기능을 완전히 덮어씌울 수 있도록 하는 강력한 커스터마이징 패턴입니다 [27-29].
|
||||
## 매 핵심
|
||||
|
||||
**3. 디자인 토큰([[Design Tokens|Design Tokens]])과 동적 테마**
|
||||
* 확장 가능한 디자인 시스템을 위해 색상, 타이포그래피, 여백 등의 시각적 속성을 **원시 토큰(Primitive Tokens)**(예: `color.blue.500`), **시맨틱 토큰(Semantic Tokens)**(예: `color.primary`), **컴포넌트 토큰**으로 나누어 3계층 구조로 관리합니다 [30-33].
|
||||
* 이러한 계층 구조를 통해 컴포넌트 코드는 그대로 둔 채 시맨틱 토큰의 참조값만 변경하여 다크 모드, 고대비 모드, 다양한 브랜드 테마를 런타임에 동적으로 전환할 수 있습니다 [34-36]. 토큰은 [[Style Dictionary|Style Dictionary]] 등을 이용해 JSON 형식에서 CSS 변수 등으로 자동 변환하여 단일 진실 공급원([[Single_Source_of_Truth|Single Source of Truth]])을 유지합니다 [37, 38].
|
||||
### 1. Monorepo (코드 공유 단위)
|
||||
|
||||
**4. 모노레포와 구조적 아키텍처**
|
||||
* **Monorepo 도구:** 대규모 프론트엔드 프로젝트에서는 [[Turborepo|Turborepo]], Nx, pnpm workspaces를 활용한 모노레포 아키텍처가 채택됩니다. 이를 통해 공통 도구(Lint, TS Config)를 단일화하고 의존성 캐싱을 활용해 CI/CD 파이프라인과 빌드 속도를 개선합니다 [6, 39, 40].
|
||||
* **[[Feature-Sliced Design (FSD)|Feature-Sliced Design (FSD]]:** 코드를 Shared, Entities, Features, Widgets, Pages, App의 6가지 계층으로 분리하고, 상위 계층에서 하위 계층으로만 의존성이 흐르도록 제한합니다. 이 엄격한 단방향 의존성 규칙은 대규모 팀 협업 시 아키텍처의 유지보수성과 예측 가능성을 크게 높입니다 [7, 41, 42].
|
||||
* **거버넌스와 자동화:** Uber는 UI 컴포넌트의 실제 사용 비율을 감지하는 옵저버빌리티 도구(Base Counter)와, [[Figma|Figma]] 콘솔 MCP를 이용해 AI 에이전트가 디자인 스펙 문서를 자동 생성하는 파이프라인을 구축해 대규모 디자인 시스템의 거버넌스와 확장성을 확보했습니다 [43-46].
|
||||
- **도구**: Turborepo, Nx, pnpm workspaces.
|
||||
- **구조**: `apps/` (배포 단위) + `packages/` (공유 라이브러리).
|
||||
- 핵심 가치: type-safe cross-package import, 단일 PR로 다중 앱 변경, 캐시된 빌드.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** [[Tailwind CSS|Tailwind CSS]], Styled-components, React Server Components (RSC, [[Compound Components|Compound Components]], Atomic Design, Design Tokens, [[Monorepo|Monorepo]], [[Feature-Sliced Design (FSD)|Feature-Sliced Design (FSD]]
|
||||
- **Projects/Contexts:** [[Next.js 15 App Router|Next.js 15 App Router]], Kiwi.com Migration, Uber Base Web, [[Shopify Polaris|Shopify Polaris]]
|
||||
- **Contradictions/Notes:** 소스에 따르면 Styled-components는 컴포넌트 단위의 동적 스타일링에 훌륭한 개발자 경험을 제공하지만 [8, 47], [[React Server Components (RSC)|React Server Components (RSC]]에서 Context 사용이 불가능하다는 구조적 한계와 런타임 성능 저하 문제로 인해 2025년 이후의 새로운 Next.js 프로젝트에서는 빌드 타임에 작동하는 Tailwind CSS, CSS Modules, 또는 [[Zero-Runtime CSS-in-JS|Zero-Runtime CSS-in-JS]]([[vanilla-extract|vanilla-extract]])의 사용이 강하게 권장됩니다 [4, 9, 10, 48].
|
||||
### 2. Micro-frontends (배포 분리)
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-26*
|
||||
- **Module Federation** (webpack/Vite): runtime 동적 로드.
|
||||
- **Single-SPA / Piral**: 라우팅 단위 통합.
|
||||
- **iframe + postMessage**: 강한 격리 (legacy 통합).
|
||||
- 적용: 100+ 개발자, 다중 팀, 다른 release cadence.
|
||||
- 트레이드오프: 번들 중복, 상태 공유 어려움 — 작은 조직에는 over-engineering.
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
### 3. RSC (React Server Components, Next.js 14+)
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
- 서버에서 렌더링 → 직렬화 → 클라이언트 hydration 없이 렌더.
|
||||
- DB·secret 직접 접근, JS 번들 0 (server-only 컴포넌트).
|
||||
- `"use client"` 경계로 클라이언트 컴포넌트 분리.
|
||||
- 2026 표준: Next.js App Router, Remix v2 (React Router 7).
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
### 4. Edge SSR
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
- Cloudflare Workers, Vercel Edge, Netlify Edge.
|
||||
- TTFB 50ms- (지리적으로 사용자 근처).
|
||||
- 제약: Node API 일부 미지원, V8 isolate 메모리 제한, cold start 거의 0.
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
### 5. Islands Architecture
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
- **Astro, Qwik, Fresh** — 정적 HTML + 선택적 hydration.
|
||||
- "interactive island"만 JS 로드 → JS 50-90% 감소.
|
||||
- 콘텐츠/마케팅/블로그/EC 카탈로그에 최적.
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
### 6. State / Data Layer
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
- **Server state**: TanStack Query, RSC fetch.
|
||||
- **Client state**: Zustand, Jotai (Redux는 거의 사라짐).
|
||||
- **Form**: react-hook-form + zod.
|
||||
- **Real-time**: Liveblocks, Convex, Supabase realtime.
|
||||
|
||||
- **과거 데이터와의 충돌:** 없음
|
||||
- **정책 변화:** 없음
|
||||
### 7. 2026 Trend
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
- **Server actions** (Next.js): RPC 보일러플레이트 제거.
|
||||
- **Partial Prerendering** (PPR): 정적 + 동적 hybrid.
|
||||
- **Streaming SSR + Suspense**: TTFB ↓, 인지속도 ↑.
|
||||
- **TypeScript 5.5+ inferred types**: tRPC, Zod, Drizzle e2e type safety.
|
||||
- **AI agent UI**: streaming token UI, generative UI (RSC + structured output).
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
## 💻 패턴
|
||||
|
||||
## 💻 코드 패턴 (Code Patterns)
|
||||
|
||||
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
|
||||
|
||||
```text
|
||||
# TODO
|
||||
```ts
|
||||
// 1. Turborepo turbo.json
|
||||
{
|
||||
"tasks": {
|
||||
"build": { "dependsOn": ["^build"], "outputs": [".next/**", "dist/**"] },
|
||||
"test": { "dependsOn": ["^build"] },
|
||||
"lint": {},
|
||||
"dev": { "cache": false, "persistent": true }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
```tsx
|
||||
// 2. RSC — server component (Next.js App Router)
|
||||
// app/products/page.tsx
|
||||
import { db } from "@/lib/db";
|
||||
export default async function Page() {
|
||||
const products = await db.product.findMany(); // server-only
|
||||
return <ProductList products={products} />;
|
||||
}
|
||||
```
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
```tsx
|
||||
// 3. Client component boundary
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
export function AddToCart({ id }: { id: string }) {
|
||||
const [pending, setPending] = useState(false);
|
||||
return <button disabled={pending}>Add</button>;
|
||||
}
|
||||
```
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
```ts
|
||||
// 4. Module Federation (Vite plugin)
|
||||
import federation from "@originjs/vite-plugin-federation";
|
||||
export default {
|
||||
plugins: [federation({
|
||||
name: "shell",
|
||||
remotes: { checkout: "https://checkout.app/assets/remoteEntry.js" },
|
||||
shared: ["react", "react-dom"],
|
||||
})],
|
||||
};
|
||||
```
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
```tsx
|
||||
// 5. Astro island
|
||||
---
|
||||
import Counter from "../components/Counter.tsx";
|
||||
---
|
||||
<html>
|
||||
<body>
|
||||
<h1>Static content (no JS)</h1>
|
||||
<Counter client:visible /> <!-- hydrate when in viewport -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
```ts
|
||||
// 6. Server action (Next.js)
|
||||
"use server";
|
||||
import { z } from "zod";
|
||||
const Schema = z.object({ email: z.string().email() });
|
||||
export async function subscribe(formData: FormData) {
|
||||
const { email } = Schema.parse(Object.fromEntries(formData));
|
||||
await db.newsletter.create({ data: { email } });
|
||||
}
|
||||
```
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
```ts
|
||||
// 7. Edge runtime
|
||||
export const runtime = "edge";
|
||||
export async function GET(req: Request) {
|
||||
const geo = req.headers.get("x-vercel-ip-country");
|
||||
return Response.json({ country: geo });
|
||||
}
|
||||
```
|
||||
|
||||
```tsx
|
||||
// 8. Streaming SSR with Suspense
|
||||
import { Suspense } from "react";
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Suspense fallback={<Skeleton />}>
|
||||
<SlowFeed />
|
||||
</Suspense>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
// 9. TanStack Query — client cache
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
const { data } = useQuery({
|
||||
queryKey: ["user", id],
|
||||
queryFn: () => fetch(`/api/user/${id}`).then(r => r.json()),
|
||||
staleTime: 60_000,
|
||||
});
|
||||
```
|
||||
|
||||
```ts
|
||||
// 10. End-to-end type safety with tRPC
|
||||
// server
|
||||
export const appRouter = t.router({
|
||||
user: t.procedure.input(z.string()).query(({ input }) => db.user.find(input)),
|
||||
});
|
||||
// client
|
||||
const user = await trpc.user.query("123"); // 자동 타입
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
|
||||
| 상황 | 권장 아키텍처 |
|
||||
|------|--------------|
|
||||
| 마케팅/블로그/EC 카탈로그 | **Islands** (Astro) |
|
||||
| SaaS 풀 앱 (단일팀-중규모) | **Next.js RSC + Server Actions** |
|
||||
| 대조직 다팀 다배포 | **Module Federation micro-frontend** |
|
||||
| 글로벌 저지연 | **Edge SSR** (Vercel/Cloudflare) |
|
||||
| 실시간 협업 | **Convex / Liveblocks** + RSC |
|
||||
| 정적 + 동적 혼합 | **PPR (Partial Prerendering)** |
|
||||
| 모바일 우선 PWA | **Vite + Workbox** |
|
||||
|
||||
## 🔗 Graph
|
||||
|
||||
- 부모: [[Frontend Architecture]], [[Web Performance]]
|
||||
- 변형: [[Micro-Frontends]], [[Islands Architecture]], [[React Server Components]]
|
||||
- 응용: [[Next.js App Router]], [[Astro]], [[Qwik]], [[Edge Runtime]]
|
||||
- Adjacent: [[Monorepo]], [[Turborepo]], [[Module Federation]], [[tRPC]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
|
||||
- v0.dev / Bolt.new — RSC + shadcn 코드 생성.
|
||||
- "이 SPA를 RSC로 마이그레이션하는 단계별 계획" — 점진적 변환.
|
||||
- LLM이 component boundary (`"use client"`) 자동 추론.
|
||||
|
||||
## ❌ 안티패턴
|
||||
|
||||
- **소규모 팀의 micro-frontend**: 운영 비용 >> 이익.
|
||||
- **RSC 안에서 useState/useEffect**: 컴파일 에러 — boundary 누락.
|
||||
- **Edge에서 무거운 Node API 사용**: 런타임 실패.
|
||||
- **모든 컴포넌트 client**: RSC 이점 무화.
|
||||
- **큰 모놀리식 SPA + 무한 스크롤**: TTI > 5s — islands/SSR로.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
|
||||
- 검증: Next.js / Astro / Vercel docs, web.dev Core Web Vitals.
|
||||
- 중복: [[Next.js App Router]] (specific) — 본 문서는 architectural overview.
|
||||
|
||||
## 🕓 Changelog
|
||||
|
||||
- 2026-05-10: 신규 작성. Monorepo + RSC + Edge SSR + Islands 4축 + 2026 trend.
|
||||
|
||||
Reference in New Issue
Block a user