SvelteKit

SvelteKit은 컴파일러 기반 UI-라이브러리 Svelte 위에 구축된 공식 애플리케이션 프레임워크입니다. CSR, SSR, SSG, 프리렌더링을 하나의 프로젝트 안에서 자유롭게 선택할 수 있도록 설계되어, 속도, 개발 경험, 번들 크기를 모두 잡은 현대적인 웹 개발 솔루션입니다.

핵심개념

파일 기반 라우팅

폴더/파일 구조가 곧 URL이므로, 별도 라우터 설정이 필요 없습니다.

src/routes/
 ├─ +page.svelte             # / (홈)
 ├─ about/+page.svelte       # /about
 └─ blog/[slug]/+page.svelte # 동적 라우팅 /blog/:slug

데이터 로딩

load 함수는 페이지가 그려지기 전에 실행되며, SSR, CSR 양쪽에서 동작합니다.

// +page.ts
export const load = async ({ fetch }) => {
	const res = await fetch('/api/posts');
	return { posts: await res.json() };
};

서버 전용 엔드포인트

// src/routes/api/posts/+server.ts
import type { RequestHandler } from './$types';

export const GET: RequestHandler = async () => {
	return new Response(JSON.stringify([{ id: 1, title: 'Hello SvelteKit' }]));
};

동일한 폴더 구조 안에서 API 라우트를 정의해 백엔드-프론트엔드 경계를 최소화합니다.

프로젝트 생성

# 1. 프로젝트 생성
npm create svelte@latest my-app
cd my-app

# 2. 의존성 설치
npm install

# 3. 개발 서버 실행
npm run dev -- --open

브라우저에서 http://localhost:5173을 열면 HMR이 적용된 개발 환경을 확인할 수 있습니다.

기술 블로그

Sveltekit에 대한 소개