Files

T

Antigravity Agent 9a135bd19d docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치.
콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서
전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한
업데이트0615/무제 3.canvas 뿐).

2026-07-05 00:44:01 +09:00

6.6 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

SPA (Single Page Application)

매 한 줄

"매 single HTML shell 의 의 client-side routing + dynamic rendering 의 driven 의 web app 의 architecture.". 매 2010s 의 의 dominant pattern (AngularJS, Backbone, Ember → React, Vue, Angular), 매 2026 의 RSC / SSR / Islands 의 ascendency 의 의 SPA 의 niche 화 — 매 highly-interactive dashboards, internal tools, complex stateful UIs 의 의 the right tool 이며 marketing/content 의 의 의 SSG/SSR 의 권장.

매 핵심

매 정의

1 HTML document 의 load — subsequent navigation 의 JS 의 driven (no full page reload).
Client-side router 의 URL ↔ component tree 의 mapping.
Data 의 fetch via XHR/Fetch — JSON API or RPC.
State 의 client 의 in-memory (Redux, Zustand, Jotai, TanStack Query).

매 trade-offs

Pros: snappy in-app navigation, rich interactivity, app-like UX, shared state across views.
Cons: SEO 의 weak (without SSR), initial bundle 의 large, white screen 의 risk, accessibility 의 careful 의 wiring.

매 vs. modern alternatives

SSR / SSG (Next.js, Remix): server 의 HTML 의 generate, hydration 의 client interactivity 의 add.
RSC (React Server Components, 2026 mainstream): server-only components + client islands.
Islands (Astro, Fresh, 11ty): static HTML + targeted hydration 의 islands.
MPA (Multi-Page App): traditional server-rendered pages — Hotwire / Inertia 의 의 modern revival.

매 응용

Internal admin dashboards (high interactivity, no SEO need).
Authenticated SaaS apps (Linear, Figma, Notion).
Real-time collaboration (CRDT-driven, websocket-heavy).
Browser-based tools (Excalidraw, Tldraw).

💻 패턴

React Router (data router, 2026)

import { createBrowserRouter, RouterProvider } from 'react-router';

const router = createBrowserRouter([
  {
    path: '/',
    Component: Layout,
    children: [
      { index: true, Component: Home },
      { path: 'projects/:id', Component: Project, loader: projectLoader },
      { path: '*', Component: NotFound },
    ],
  },
]);

export const App = () => <RouterProvider router={router} />;

Data fetching (TanStack Query)

import { useQuery } from '@tanstack/react-query';

export function ProjectView({ id }: { id: string }) {
  const { data, isPending, error } = useQuery({
    queryKey: ['project', id],
    queryFn: () => fetch(`/api/projects/${id}`).then((r) => r.json()),
    staleTime: 60_000,
  });
  if (isPending) return <Skeleton />;
  if (error) return <ErrorBoundary error={error} />;
  return <ProjectDetail project={data} />;
}

Client state (Zustand)

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export const useUIStore = create(
  persist<{ sidebar: boolean; toggle: () => void }>(
    (set) => ({
      sidebar: true,
      toggle: () => set((s) => ({ sidebar: !s.sidebar })),
    }),
    { name: 'ui-store' },
  ),
);

Code splitting (lazy routes)

import { lazy, Suspense } from 'react';

const Settings = lazy(() => import('./routes/Settings'));

const router = createBrowserRouter([
  {
    path: '/settings',
    element: (
      <Suspense fallback={<RouteSkeleton />}>
        <Settings />
      </Suspense>
    ),
  },
]);

History API (without router)

window.history.pushState({}, '', '/projects/42');
window.dispatchEvent(new PopStateEvent('popstate'));
window.addEventListener('popstate', () => {
  render(parseRoute(location.pathname));
});

Auth guard (route loader)

async function projectLoader({ params }: LoaderFunctionArgs) {
  const session = await getSession();
  if (!session) throw redirect('/login');
  return fetch(`/api/projects/${params.id}`).then((r) => r.json());
}

Vite SPA의 setup

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: { sourcemap: true, target: 'es2022' },
  server: { historyApiFallback: true },
});

SEO 의 fallback (prerender + hydrate)

// vite-plugin-prerender
import prerender from 'vite-plugin-prerender';

export default {
  plugins: [
    react(),
    prerender({ routes: ['/', '/about', '/pricing'] }),
  ],
};

매 결정 기준

상황	Approach
Marketing site, blog	SSG (Astro, Next.js static, 11ty)
Content site with personalization	SSR (Next.js, Remix)
Dashboards, admin tools	SPA (React Router + Vite)
Highly interactive editor	SPA with code-splitting
Public app needing SEO + interactivity	Next.js (RSC + client islands)
MPA-style with sprinkles	Hotwire / Inertia.js

기본값: 2026 의 default 는 Next.js / Remix (SSR + RSC) — pure SPA 는 internal tools / authenticated apps 의 으로 의 reserve.

🔗 Graph

부모: 프론트엔드 및 UIUX 표준
변형: SSR · SSG · Islands-Architecture · React Server Components — 경계 의식
Adjacent: Vite · Code Splitting

🤖 LLM 활용

언제: highly-interactive authenticated app, no SEO requirement, complex client state, real-time collaboration. 언제 X: marketing/content site (SSG), public SEO-critical content (SSR/RSC), simple form-driven app (MPA).

안티패턴

SPA 의 marketing site: SEO 의 weak, LCP 의 poor — SSG 의 사용.
Bundle 의 single chunk: route-based code splitting 의 default.
Auth state 의 localStorage 의 raw token: HttpOnly cookie + refresh flow 의 사용.
Client routing 의 server fallback 없음: 404 의 deep link 의 — historyApiFallback / catch-all rewrite.
No skeleton / suspense: white screen on slow data — Suspense + skeletons.
Global state 의 overuse: server state 의 TanStack Query, UI state 의 Zustand/Jotai 의 separate.

🧪 검증 / 중복

Verified (React Router 7 docs, Vue Router 4, MDN SPA architecture, web.dev rendering patterns 2026).
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — full SPA architecture with 2026 trade-offs vs RSC/Islands

6.6 KiB Raw Blame History