Svelte 5 & SvelteKit 학습 가이드

Svelte 5(Runes) & SvelteKit 2를 기초부터 실전까지 단계별로 학습합니다.

📁 프로젝트 구조

docs/             # 학습 가이드 (단계별 마크다운)
examples/         # 🌟 완성된 참고용 데모 프로젝트
├── basic-app/    # Steps 01-13 기반의 통합 데모 앱
└── todo-app/     # Step 14 풀스택 실전 Todo 데모 앱

🚀 시작하기

1. 환경 확인

node --version    # v22+
npm --version     # 10+

2. 학습자용 프로젝트(my-app) 생성

학습자가 직접 코드를 따라 치며 배울 수 있는 나만의 Svelte 앱을 프로젝트 루트에 생성합니다. (.gitignore에 의해 깃에는 추적되지 않습니다.)

npx -y sv create my-app --template minimal --types ts
# 화살표키로 아무것도 선택하지 않고(✘ 표시 유지) Enter

cd my-app
npm install
npm install -D vitest @testing-library/svelte jsdom
npm run dev -- --open

3. (선택) 완성된 데모 앱 구동해보기

이 프로젝트가 최종적으로 어떤 모습을 갖추게 되는지 미리 보고 싶다면 examples/ 내부의 앱을 실행해보세요.

cd examples/basic-app
npm install
npm run dev

4. 학습 가이드를 따라 코드 작성

docs/ 폴더의 마크다운을 순서대로 읽으며 방금 만든 my-app에 코드를 추가해 나갑니다.

📚 학습 목차

Svelte 기초

SvelteKit

고급 & 실전

📋 빠른 참조

→ CHEATSHEET.md