koriweb
d8a80f6272
이름만 다른(표기 변형) [[위키링크]]를 대상 문서의 canonical 제목으로 치환해 끊겼던 1,200개 링크를 연결. 제목/파일명 정규화 일치만 적용하고 별칭 매칭은 과병합 위험으로 제외(애매성 가드). 원본은 _link_reconcile_backup/ 에 백업. 도구: Datacollect/scripts/link_reconcile_apply.mjs Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
155 lines
4.8 KiB
Markdown
155 lines
4.8 KiB
Markdown
---
|
|
id: wiki-2026-0508-judgment
|
|
title: Judgment
|
|
category: 10_Wiki/Topics
|
|
status: verified
|
|
canonical_id: self
|
|
aliases: [Engineering Judgment, Trade-off Judgment, Frontend Judgment]
|
|
duplicate_of: none
|
|
source_trust_level: A
|
|
confidence_score: 0.9
|
|
verification_status: applied
|
|
tags: [judgment, engineering, decision-making, frontend]
|
|
raw_sources: []
|
|
last_reinforced: 2026-05-10
|
|
github_commit: pending
|
|
tech_stack:
|
|
language: meta
|
|
framework: 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)
|
|
```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)
|
|
```javascript
|
|
// 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
|
|
```yaml
|
|
# .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
|
|
```typescript
|
|
import { useFlag } from '@/lib/flags';
|
|
function Page() {
|
|
const useNewRouter = useFlag('new-router-2026');
|
|
return useNewRouter ? <NextAppRouter /> : <PagesRouter />;
|
|
}
|
|
```
|
|
|
|
### A11y default vs custom
|
|
```tsx
|
|
// PREFER native
|
|
<button onClick={...}>Save</button>
|
|
|
|
// Avoid custom unless necessary
|
|
<div role="button" tabIndex={0} onKeyDown={handle}>...</div>
|
|
```
|
|
|
|
### Reversibility check
|
|
```markdown
|
|
- [ ] 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
|
|
- 변형: [[ADR]]
|
|
- 응용: [[Large_Frontend_Projects|Frontend Architecture]]
|
|
- Adjacent: [[Core Web Vitals Optimization (INP, LCP, CLS)|Core Web Vitals]] · [[Accessibility (A11y)|Accessibility]] · [[DX]]
|
|
|
|
## 🤖 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 |
|