Framework · 2020년 공개

SvelteKit

SvelteKit은 Svelte로 웹 앱을 만드는 공식 프레임워크로, 파일 기반 라우팅과 서버 렌더링, 데이터 불러오기, 다양한 배포 방식을 제공합니다.

SvelteKit은 Svelte 팀이 만드는 공식 애플리케이션 프레임워크입니다. 2020년에 처음 공개되었고 오픈 소스로 개발됩니다. 컴포넌트를 빌드 단계에서 효율적인 자바스크립트로 컴파일하는 Svelte 위에 라우팅, 서버 렌더링(SSR), 데이터 불러오기, 폼 처리, 빌드와 배포를 더하며, 개발 서버와 번들링은 Vite가 맡습니다. 현재 세대의 Svelte는 $state, $derived, $effect, $props 같은 룬(rune)으로 반응성을 표현합니다.

SvelteKit은 페이지마다 렌더링 방식을 고를 수 있다는 점이 강점입니다. 블로그나 문서처럼 누구에게나 같은 페이지는 빌드할 때 HTML로 미리 만들고, 로그인한 사용자별 화면은 서버에서 렌더링하며, 브라우저 기능에 크게 기대는 화면은 클라이언트에서만 그릴 수 있습니다. 폼 액션은 자바스크립트 없이도 동작하고 점진적으로 향상되며, 어댑터를 바꾸면 같은 코드를 Node.js 서버, 정적 호스팅, Vercel·Netlify·Cloudflare 같은 플랫폼에 배포할 수 있습니다.

처음 시작한다면 npx sv create로 프로젝트를 만들고, svelte.dev의 대화형 튜토리얼에서 Svelte 기초와 SvelteKit 과정을 차례로 따라 해 보는 것을 권합니다. 오래된 자료에는 export let, $lib, svelte.config.js처럼 지금과 다른 문법과 설정이 나오므로, 공식 문서와 함께 최신 룬 문법을 기준으로 익히는 것이 좋습니다.

특징

룬 기반의 컴파일형 컴포넌트

$state, $derived, $effect, $props로 반응성을 명확하게 표현하고, 컴파일러가 가상 DOM 없이 바뀐 부분만 갱신하는 코드를 만듭니다.

파일 기반 라우팅과 레이아웃

src/routes의 폴더 구조가 곧 주소이며, +page, +layout, +server, +error 파일로 페이지, 공통 틀, API, 오류 화면을 정의합니다.

페이지별 렌더링 선택

서버 렌더링, 클라이언트 렌더링, 프리렌더링을 페이지마다 prerender, ssr, csr 옵션으로 정할 수 있습니다.

load 함수와 폼 액션

타입이 자동으로 맞춰지는 load 함수로 데이터를 불러오고, 자바스크립트 없이도 동작하는 폼 액션으로 데이터를 바꿉니다.

이런 곳에 씁니다

블로그와 문서 같은 콘텐츠 사이트
로그인과 데이터베이스를 쓰는 풀스택 웹 앱
관리 도구와 대시보드
정적 호스팅에 올리는 소개 사이트

설치하기

1
Node.js 준비
SvelteKit은 Node.js 위에서 개발합니다. 현재 LTS 판의 Node.js를 설치하고, 새 터미널에서 node와 npm의 판이 표시되는지 확인합니다.
```
node --version && npm --version
```
2
프로젝트 만들기
공식 명령줄 도구 sv로 새 프로젝트를 만듭니다. 템플릿, TypeScript 사용 여부, Prettier·ESLint·Vitest·Playwright 같은 추가 기능을 고를 수 있습니다.
```
npx sv create my-app
```
3
개발 서버 실행
프로젝트 폴더로 이동해 의존성을 설치하고 개발 서버를 실행합니다. 브라우저에서 http://localhost:5173 이 열리고, 파일을 저장하면 바로 반영됩니다.
```
cd my-app && npm install && npm run dev -- --open
```

첫 프로그램

첫 페이지

src/routes/+page.svelte는 사이트의 첫 화면(/)입니다. $state 룬으로 만든 count는 바뀔 때마다 화면을 자동으로 갱신하고, onclick 속성에 넘긴 함수가 버튼을 누를 때마다 값을 1씩 올립니다. 새 페이지는 src/routes/about/+page.svelte처럼 폴더를 만들어 추가합니다.

src/routes/+page.svelte

<script lang="ts">
  let count = $state(0);
</script>

<h1>Hello, SvelteKit!</h1>
<button onclick={() => count++}>
  Clicked {count} times
</button>

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

자주 쓰는 도구

sv: Svelte 공식 명령줄 도구입니다. sv create로 프로젝트를 만들고, sv add로 Tailwind CSS, Vitest, Playwright, Drizzle 같은 추가 기능을 설정합니다.
Vite: SvelteKit의 개발 서버와 빌드를 맡는 도구입니다. 빠른 시작과 HMR을 제공하며, SvelteKit은 Vite 플러그인으로 동작합니다.
svelte-check: 프로젝트 전체의 타입 오류와 Svelte 관련 문제를 검사하는 명령줄 도구입니다. npm run check로 실행합니다.
Svelte for VS Code: 공식 VS Code 확장으로, .svelte 파일의 문법 강조, 자동 완성, 타입 오류 표시, 서식 정리를 제공합니다.

단계별 안내서

설치부터 SvelteKit 의 핵심 개념까지, 여섯 장으로 차근차근 따라 합니다.

공식 문서 · 참고 자료

쓰는 언어

토론

토론 시작하기

SvelteKit 에 관해 묻고, 경험을 나누고, 의견을 주고받는 곳입니다.

아직 토론이 없습니다. 첫 이야기를 시작해 보세요.

특징