SvelteKit 완벽 가이드 | Full Stack·Routing·Form Actions·Load·Hooks

2026년 4월 7일 · 14분 읽기 · 수정 2026년 4월 7일 중급

이 글의 핵심

SvelteKit으로 풀스택 웹 앱을 구축하는 완벽 가이드입니다. 파일 기반 라우팅, Load 함수, Form Actions, Hooks, 배포까지 실전 예제로 정리했습니다.

실무 경험 공유: Next.js 프로젝트를 SvelteKit으로 마이그레이션하면서, 번들 크기를 60% 줄이고 초기 로딩 속도를 2배 향상시킨 경험을 공유합니다.

들어가며: “Next.js가 복잡해요”

실무 문제 시나리오

시나리오 1: getServerSideProps가 복잡해요
데이터 페칭 로직이 분리되어 있습니다. SvelteKit은 load 함수로 간단합니다.

시나리오 2: 번들이 커요
React 번들이 150KB입니다. Svelte는 20KB입니다.

시나리오 3: Form 처리가 번거로워요
API Route를 따로 만들어야 합니다. SvelteKit은 Form Actions로 간단합니다.

1. SvelteKit이란?

핵심 특징

SvelteKit은 Svelte 기반 풀스택 프레임워크입니다.

주요 장점:

작은 번들: 20KB (React는 150KB)
빠른 성능: 컴파일 타임 최적화
간단한 문법: 보일러플레이트 없음
풀스택: SSR, API 내장
파일 기반 라우팅: 직관적

2. 프로젝트 생성

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

3. 파일 기반 라우팅

구조

src/routes/
├── +page.svelte           # /
├── about/
│   └── +page.svelte       # /about
├── blog/
│   ├── +page.svelte       # /blog
│   └── [slug]/
│       └── +page.svelte   # /blog/:slug
└── api/
    └── users/
        └── +server.ts     # /api/users

4. Load 함수

+page.ts

// src/routes/blog/+page.ts
export async function load({ fetch }) {
  const response = await fetch('/api/posts');
  const posts = await response.json();

  return {
    posts,
  };
}

<!-- src/routes/blog/+page.svelte -->
<script lang="ts">
  export let data;
</script>

<h1>Blog</h1>
<ul>
  {#each data.posts as post}
    <li>
      <a href="/blog/{post.slug}">{post.title}</a>
    </li>
  {/each}
</ul>

+page.server.ts

// src/routes/blog/[slug]/+page.server.ts
import { error } from '@sveltejs/kit';

export async function load({ params }) {
  const post = await db.post.findUnique({
    where: { slug: params.slug },
  });

  if (!post) {
    throw error(404, 'Post not found');
  }

  return { post };
}

5. Form Actions

+page.server.ts

// src/routes/login/+page.server.ts
import { fail, redirect } from '@sveltejs/kit';

export const actions = {
  default: async ({ request, cookies }) => {
    const data = await request.formData();
    const email = data.get('email');
    const password = data.get('password');

    if (!email || !password) {
      return fail(400, { email, missing: true });
    }

    const user = await authenticateUser(email, password);

    if (!user) {
      return fail(401, { email, incorrect: true });
    }

    cookies.set('session', user.sessionId, { path: '/' });
    throw redirect(303, '/dashboard');
  },
};

+page.svelte

<!-- src/routes/login/+page.svelte -->
<script lang="ts">
  import { enhance } from '$app/forms';
  export let form;
</script>

<form method="POST" use:enhance>
  <input name="email" type="email" value={form?.email ?? ''} required />
  
  <input name="password" type="password" required />

  {#if form?.missing}
    <p class="error">Email and password are required</p>
  {/if}

  {#if form?.incorrect}
    <p class="error">Invalid credentials</p>
  {/if}

  <button type="submit">Login</button>
</form>

6. API Routes

// src/routes/api/users/+server.ts
import { json } from '@sveltejs/kit';

export async function GET() {
  const users = await db.user.findMany();
  return json(users);
}

export async function POST({ request }) {
  const data = await request.json();
  
  const user = await db.user.create({
    data: {
      name: data.name,
      email: data.email,
    },
  });

  return json(user, { status: 201 });
}

7. Hooks

hooks.server.ts

// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
  const session = event.cookies.get('session');

  if (session) {
    event.locals.user = await getUserFromSession(session);
  }

  return resolve(event);
};

사용

// src/routes/dashboard/+page.server.ts
export async function load({ locals }) {
  if (!locals.user) {
    throw redirect(303, '/login');
  }

  return {
    user: locals.user,
  };
}

8. 배포

Vercel

npm install -D @sveltejs/adapter-vercel

// svelte.config.js
import adapter from '@sveltejs/adapter-vercel';

export default {
  kit: {
    adapter: adapter(),
  },
};

Cloudflare Pages

npm install -D @sveltejs/adapter-cloudflare

Node.js

npm install -D @sveltejs/adapter-node

정리 및 체크리스트

핵심 요약

SvelteKit: Svelte 풀스택 프레임워크
작은 번들: 20KB
Load 함수: 데이터 페칭
Form Actions: Form 처리 간소화
Hooks: 요청 가로채기
파일 기반 라우팅: 직관적

구현 체크리스트

같이 보면 좋은 글

Svelte 5 완벽 가이드
Remix 완벽 가이드
Next.js App Router 가이드

이 글에서 다루는 키워드

SvelteKit, Svelte, Full Stack, SSR, Web Framework, JavaScript

자주 묻는 질문 (FAQ)

Q. SvelteKit vs Next.js, 어떤 게 나은가요?

A. SvelteKit이 더 가볍고 빠릅니다. Next.js는 생태계가 더 큽니다. 성능이 중요하면 SvelteKit, 생태계가 중요하면 Next.js를 권장합니다.

Q. Svelte를 알아야 하나요?

A. 네, SvelteKit은 Svelte를 기반으로 합니다. 하지만 Svelte는 배우기 쉽습니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, SvelteKit 1.0이 출시되어 안정적입니다.

Q. TypeScript를 지원하나요?

A. 네, 완벽하게 지원합니다.