2nd/10_Wiki/Topics/Frontend/Frontend.md

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-frontend	Frontend	10_Wiki/Topics	verified	self	Web Frontend Client-side Engineering UI Engineering	none	A	0.9	applied	frontend web react performance		2026-05-10	pending	language framework typescript react

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.

매 응용

1. SSR + RSC 로 매 SEO 기반 commerce.
2. Edge personalization — 매 cookie / geo 기반.
3. 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

• 부모: Web Development · Software Engineering
• 변형: Mobile App · Desktop App
• 응용: E-commerce · Dashboard · Content Site
• Adjacent: React · Performance · Accessibility · CSS

🤖 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