Files

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.9 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

Frontend

매 한 줄

"매 user 의 매 device 에서 매 실행되는 매 모든 것 — 매 markup, 매 style, 매 behavior, 매 network.". 2026 의 매 frontend 는 매 React 19 + 매 RSC + 매 Vite/Turbopack + 매 Bun/Node + 매 Edge runtime 의 매 stack 에서 매 진화 중. Core Web Vitals + 매 a11y + 매 i18n 이 매 hygiene.

매 핵심

매 Layer

Markup: HTML, semantic, a11y.
Style: CSS — Cascade Layers, Container Queries, :has(), OKLCH.
Behavior: JS/TS — framework (React/Vue/Svelte/Solid).
Build: Vite, Turbopack, Bun, esbuild, swc.
Runtime: Browser, Edge (Cloudflare Workers, Vercel), Node, Bun.

매 Framework landscape (2026)

React 19: RSC + Actions + use() hook + Compiler.
Next.js 15: App Router default, Turbopack stable.
Astro 5: content site / island.
SvelteKit 2 / Vue 3.5 + Nuxt 4 / Solid 2.
Remix → React Router 7: data loading first.

매 Performance pillars

LCP < 2.5s: image optimize, preconnect, fetchpriority.
INP < 200ms: long task chunking, scheduler.yield.
CLS < 0.1: dimension reserved, font-display swap.
Bundle: route split, tree-shake, dynamic import.

매 Modern primitives

CSS: container queries, :has(), view transitions API, anchor positioning.
JS: scheduler.yield, AbortSignal.timeout, Temporal (stage 4 2026).
HTML: popover, dialog, search.
Network: HTTP/3, Early Hints, Speculation Rules.

매 응용

SSR + RSC 로 매 SEO 기반 commerce.
Edge personalization — 매 cookie / geo 기반.
PWA + offline-first.

💻 패턴

View Transitions API (cross-document)

<meta name="view-transition" content="same-origin" />
<style>
  ::view-transition-old(hero) { animation: fade-out 0.3s; }
  ::view-transition-new(hero) { animation: fade-in 0.3s; }
  .hero { view-transition-name: hero; }
</style>

Container query

.card { container-type: inline-size; }
@container (min-width: 400px) {
  .card-body { display: grid; grid-template-columns: 1fr 1fr; }
}

React 19 Actions (form)

'use client';
async function submit(formData: FormData) {
  'use server';
  await db.insert(formData.get('msg') as string);
}
export default function Form() {
  return <form action={submit}><input name="msg" /><button>Send</button></form>;
}

use() hook (React 19)

function Comments({ promise }: { promise: Promise<Comment[]> }) {
  const comments = use(promise);   // suspends
  return <ul>{comments.map(c => <li key={c.id}>{c.text}</li>)}</ul>;
}

Image optimization (Next 15)

import Image from 'next/image';
<Image src="/hero.avif" width={1280} height={720} priority alt="" sizes="100vw" />

Speculation Rules (prerender)

<script type="speculationrules">
{
  "prerender": [{ "where": { "selector_matches": "a.product" }, "eagerness": "moderate" }]
}
</script>

Scheduler.yield long task

async function process(items) {
  for (const it of items) {
    work(it);
    if ('scheduler' in self) await scheduler.yield();
  }
}

CSS cascade layers

@layer reset, base, components, utilities;
@layer reset { * { margin: 0; box-sizing: border-box; } }
@layer components { .btn { padding: 0.5rem 1rem; } }

매 결정 기준

상황	Stack
매 SEO content site	Astro 5 (zero JS default)
매 SaaS dashboard	Vite + React 19 (CSR)
매 commerce	Next 15 App Router (RSC + ISR)
매 docs	Astro Starlight / Docusaurus
매 marketing	Astro / 11ty
매 realtime	React + WebSocket / Liveblocks

기본값: Vite + React 19 + TS strict + ESLint + Vitest. 매 SSR 필요 시 매 Next 15.

🔗 Graph

응용: E-commerce
Adjacent: React · Performance · Accessibility (A11y)

🤖 LLM 활용

언제: 매 stack 선택, 매 perf 진단, 매 pattern (RSC, Suspense, View Transitions) 적용. 언제 X: 매 backend-only — 매 다른 도메인.

❌ 안티패턴

CSS-in-JS runtime: 매 INP 악화 (2026 모범: zero-runtime — Tailwind / vanilla-extract / Panda).
Mega global state: 매 server vs client state 미분리.
Polyfill 남발: 매 modern browser default — 매 baseline 활용.
No a11y test: 매 axe-core CI 없음.

🧪 검증 / 중복

Verified (web.dev, MDN baseline 2026, React 19 docs).
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — 매 2026 stack + modern primitives

4.9 KiB Raw Blame History