Files

T

koriweb d8a80f6272 chore(wiki): dangling 링크 canonical 정규화 (768파일/1200건)

이름만 다른(표기 변형) [[위키링크]]를 대상 문서의 canonical 제목으로 치환해
끊겼던 1,200개 링크를 연결. 제목/파일명 정규화 일치만 적용하고 별칭 매칭은
과병합 위험으로 제외(애매성 가드). 원본은 _link_reconcile_backup/ 에 백업.
도구: Datacollect/scripts/link_reconcile_apply.mjs

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

2026-06-08 12:24:15 +09:00

5.3 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

Large Frontend Projects

매 한 줄

"매 코드보다 경계 (boundary) 가 먼저". Monorepo + design system + 빌드 캐시 + 명확한 ownership, micro-frontend 는 마지막 수단.

매 핵심

매 4 축

Code organization: monorepo (Turborepo/Nx/pnpm)
Runtime composition: SPA / module federation / iframe / SSR composition
Shared layer: design system, type, utility, eslint config
Build / CI: incremental, remote cache, affected-only test

매 monorepo vs polyrepo

	Monorepo	Polyrepo
공유 코드	trivial (workspace)	publish/version 지옥
일관성	강제 (lint/CI 한곳)	어려움
빌드 시간	tooling 필요	단순
권한 분리	CODEOWNERS	repo level
권장	공유 많음	완전 독립 product

매 micro-frontend 트리거

팀 자율성 > 일관성
다른 release cadence
다른 tech stack 강제 (드물어야 함)
그 외엔 monorepo 가 거의 항상 정답

매 응용

Design system 패키지화
Module federation 으로 런타임 합성
Turborepo 로 빌드 80% 단축
Affected-only CI
Ownership 자동화 (CODEOWNERS + bot)

💻 패턴

Pattern 1: pnpm workspace + Turborepo

# pnpm-workspace.yaml
packages:
  - "apps/*"
  - "packages/*"

// turbo.json
{
  "tasks": {
    "build": { "dependsOn": ["^build"], "outputs": ["dist/**", ".next/**"] },
    "test": { "dependsOn": ["^build"], "outputs": [] },
    "lint": {}
  }
}

Pattern 2: Shared package

// packages/ui/package.json
{
  "name": "@acme/ui",
  "exports": { ".": "./src/index.ts" },
  "peerDependencies": { "react": "^18 || ^19" }
}

// apps/web uses workspace dep
// package.json: "@acme/ui": "workspace:*"
import { Button } from "@acme/ui";

Pattern 3: Module Federation (Webpack/Rspack)

new ModuleFederationPlugin({
  name: "shell",
  remotes: { checkout: "checkout@https://cdn/checkout/remoteEntry.js" },
  shared: { react: { singleton: true }, "react-dom": { singleton: true } },
});
// 런타임에 다른 팀 빌드 import

Pattern 4: Affected-only CI (Nx)

- run: npx nx affected -t build test lint --base=origin/main
# 변경된 프로젝트와 의존하는 프로젝트만 실행

Pattern 5: Remote cache

# Turborepo Vercel remote cache
turbo login && turbo link
# 또는 self-hosted (Cloudflare R2)
TURBO_API=... TURBO_TOKEN=... turbo build

Pattern 6: Design system token boundary

// packages/tokens
export const tokens = {
  color: { brand: { 500: "#5B21B6" } },
  space: { 1: "4px", 2: "8px" },
} as const;

// packages/ui consumes tokens — never hard-coded values

Pattern 7: CODEOWNERS automation

# .github/CODEOWNERS
/apps/checkout/   @acme/payments-team
/packages/ui/     @acme/design-system
/packages/api-client/ @acme/platform

Pattern 8: ESLint boundary rule (Nx tags)

// .eslintrc — apps 가 다른 app 을 직접 import 못하도록
"@nx/enforce-module-boundaries": ["error", {
  "depConstraints": [
    { "sourceTag": "scope:web", "onlyDependOnLibsWithTags": ["scope:shared", "scope:web"] },
    { "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] }
  ]
}]

Pattern 9: Per-package versioning (Changesets)

pnpm changeset       # 변경 기록
pnpm changeset version  # version bump
pnpm publish -r       # publish 변경된 package 만

매 결정 기준

상황	Approach
공유 코드 많음, 같은 release	Monorepo + Turborepo
거대 + 그래프 분석 필요	Nx (affected, codegen, plugin)
진짜 독립 팀 + 별 cadence	Module Federation
Iframe 격리 필요 (legacy)	Iframe 합성
Design 일관성	Design system + tokens

기본값: pnpm + Turborepo + design system + Changesets, MFE 는 마지막 수단.

🔗 Graph

부모: Software_Architecture, Frontend Architecture
변형: Turborepo, Nx, Module_Federation
응용: Design_System, CI_CD_Pipeline
Adjacent: Build_Performance, Monorepo

🤖 LLM 활용

언제: dependency graph 분석, 큰 PR review, codemod 생성 (Babel/jscodeshift). 언제 X: deterministic refactor (codemod 직접 작성이 더 안전), 보안 boundary 검증.

❌ 안티패턴

처음부터 micro-frontend → 분산의 모든 비용, 이점 0
Cache 없이 monorepo → CI 30분+ 폭발
Design system 없이 1000개 button → 일관성 0
모든 변경 시 전체 빌드 → affected only 미사용
패키지 간 circular dep → boundary 망함

🧪 검증 / 중복

Verified (Turborepo docs, Nx docs, Module Federation docs, Changesets). 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — 4 축, monorepo/MFE/boundary patterns

5.3 KiB Raw Blame History