Files
2nd/10_Wiki/Topics/Frontend/Judgment.md
T
Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization
10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-20 23:52:15 +09:00

4.8 KiB

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-judgment Judgment 10_Wiki/Topics verified self
Engineering Judgment
Trade-off Judgment
Frontend Judgment
none A 0.9 applied
judgment
engineering
decision-making
frontend
2026-05-10 pending
language framework
meta meta

Judgment

매 한 줄

"매 좋은 frontend 는 매 framework choice 가 아니라 매 trade-off 의 매 명시적 분석에서 나온다.". Performance / DX / accessibility / bundle size / SEO 의 매 weight 가 매 product context 에 따라 매 다르다. Judgment 는 매 가르칠 수 있는 skill — checklist + heuristic.

매 핵심

매 Trade-off 축

  • Performance vs DX: SSR + island vs CSR SPA.
  • Bundle vs Feature: tree-shake-able lib vs all-in-one.
  • Type safety vs Velocity: strict TS vs JS prototyping.
  • A11y vs Custom: native element vs custom component.
  • Cache vs Freshness: SWR vs no-store.

매 Heuristic

  1. Native first: 매 platform primitive 가 매 free win.
  2. Measure before optimize: 매 Lighthouse / RUM 먼저.
  3. Latency budget: 매 LCP < 2.5s, INP < 200ms, CLS < 0.1 (Core Web Vitals 2026).
  4. Bundle budget: 매 route 당 매 100KB gzip.
  5. Dependency cost: 매 add 마다 매 maintenance + bundle + supply chain risk.

매 Decision framework

  • Reversible vs One-way door: framework choice = one-way. 매 careful.
  • Time horizon: 매 6 개월 vs 매 5 년 — 매 다른 답.
  • Team skill: 매 unfamiliar tech 의 매 hidden cost.

매 응용

  1. SSR vs CSR — 매 SEO / TTI / DX matrix.
  2. State manager 선택 — 매 server vs client state 분리.
  3. CSS strategy — 매 atomic / module / runtime.

💻 패턴

Decision matrix template (Markdown)

| 기준 | Option A | Option B | Weight |
|---|---|---|---|
| Bundle size | 12KB | 45KB | 0.3 |
| DX | High | Medium | 0.2 |
| Maintenance | Active | Stale | 0.3 |
| TS support | Native | Patchy | 0.2 |
| **Score** | 0.84 | 0.51 | — |

Bundle budget enforcement (CI)

// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: { manualChunks: { vendor: ['react', 'react-dom'] } },
    },
    chunkSizeWarningLimit: 100,   // KB
  },
};
// Then: bundlesize / size-limit in CI

Performance budget gate

# .github/workflows/perf.yml
- name: Lighthouse CI
  uses: treosh/lighthouse-ci-action@v12
  with:
    urls: |
      https://staging.example.com/
    budgetPath: ./budget.json
    assertions: |
      categories.performance: ['error', { minScore: 0.9 }]
      audits.largest-contentful-paint: ['error', { maxNumericValue: 2500 }]
      audits.interaction-to-next-paint: ['error', { maxNumericValue: 200 }]

Feature flag for risky migration

import { useFlag } from '@/lib/flags';
function Page() {
  const useNewRouter = useFlag('new-router-2026');
  return useNewRouter ? <NextAppRouter /> : <PagesRouter />;
}

A11y default vs custom

// PREFER native
<button onClick={...}>Save</button>

// Avoid custom unless necessary
<div role="button" tabIndex={0} onKeyDown={handle}>...</div>

Reversibility check

- [ ] Can we roll back in 1 day? (file flag, env var)
- [ ] Can we roll back in 1 week? (revert PR)
- [ ] One-way door? (DB schema, public API) — 매 RFC 필수

매 결정 기준

상황 Approach
매 SEO 우선 SSR / SSG (Next.js, Astro, SvelteKit)
매 dashboard (auth-only) CSR SPA (Vite + React)
매 content site Astro / 11ty (zero JS default)
매 realtime collaborative CSR + WebSocket / CRDT
매 mobile app RN / Expo (Hermes)
매 desktop app Tauri (Rust) > Electron

기본값: 매 measure → matrix → smallest reversible step.

🔗 Graph

🤖 LLM 활용

언제: 매 framework / library 선택 시, 매 RFC 작성, 매 trade-off 명시화. 언제 X: 매 obvious choice — 매 over-engineering.

안티패턴

  • Resume-driven development: 매 새로운 tech 만 추구.
  • Unmeasured optimization: 매 perf 직감 만.
  • Cargo cult: 매 big company 가 사용 = 매 우리에게 맞다 X.
  • Analysis paralysis: 매 endless matrix — 매 timebox.

🧪 검증 / 중복

  • Verified (Core Web Vitals 2026 thresholds, ADR template).
  • 신뢰도 A.

🕓 Changelog

날짜 변경
2026-05-08 Phase 1
2026-05-10 Manual cleanup — 매 trade-off matrix + budget pattern