SvelteKit 입문 — 풀스택 웹 프레임워크의 시작

npx sv create my-app
cd my-app
npm install
npm run dev

my-app/
├── src/
│   ├── routes/           # 파일 기반 라우팅
│   │   ├── +page.svelte  # 홈페이지 (/)
│   │   ├── +layout.svelte # 공통 레이아웃
│   │   ├── +error.svelte  # 에러 페이지
│   │   ├── about/
│   │   │   └── +page.svelte # /about 페이지
│   │   └── blog/
│   │       ├── +page.svelte        # /blog
│   │       └── [slug]/
│   │           └── +page.svelte    # /blog/:slug (동적 라우트)
│   ├── lib/              # 공유 라이브러리 ($lib 별칭)
│   │   ├── components/
│   │   └── utils/
│   ├── app.html          # HTML 셸
│   └── app.css           # 전역 스타일
├── static/               # 정적 파일 (favicon, 이미지 등)
├── svelte.config.js      # SvelteKit 설정
├── vite.config.js        # Vite 설정
└── package.json

// +page.js
export const ssr = true;        // 서버 사이드 렌더링 (기본값)
export const csr = true;        // 클라이언트 사이드 렌더링 (기본값)
export const prerender = false; // 빌드 시 정적 생성

<!-- src/routes/+page.svelte -->
<script>
  let count = $state(0);
</script>

<svelte:head>
  <title>홈</title>
</svelte:head>

<h1>SvelteKit에 오신 것을 환영합니다!</h1>
<button onclick={() => count++}>카운트: {count}</button>

<!-- src/routes/+layout.svelte -->
<script>
  let { children } = $props();
</script>

<nav>
  <a href="/">홈</a>
  <a href="/about">소개</a>
  <a href="/blog">블로그</a>
</nav>

<main>
  {@render children()}
</main>

<footer>
  <p>2026 내 블로그</p>
</footer>

<style>
  nav { display: flex; gap: 1rem; padding: 1rem; background: #f5f5f5; }
  main { padding: 1rem; min-height: 80vh; }
</style>

<script>
  // src/lib/components/Button.svelte를 가져옴
  import Button from '$lib/components/Button.svelte';
  // src/lib/utils/format.js를 가져옴
  import { formatDate } from '$lib/utils/format.js';
</script>