🧭 SvelteKit 완전 초보자 가이드 (2025 버전)

1️⃣ SvelteKit이란?

SvelteKit은 Svelte를 기반으로 한 차세대 웹 애플리케이션 프레임워크입니다.
React의 Next.js, Vue의 Nuxt.js처럼 SSR(서버사이드 렌더링), SSG(정적 사이트 생성), SPA(Single Page App), API 라우팅, 동적 페이지를 지원합니다.

🧃 특징 요약

기능	설명
✅ 서버 사이드 렌더링(SSR)	검색 엔진 친화적인 앱 제작 가능
✅ 정적 사이트 생성(SSG)	빠르고 안전한 정적 배포 지원
✅ 파일 기반 라우팅	디렉토리 구조로 URL 자동 생성
✅ API 라우트 내장	백엔드 없이도 서버 함수 구현 가능
✅ 빠른 번들링	Vite 기반 초고속 개발 서버 사용

---

2️⃣ 개발 환경 세팅

📌 Node.js 설치

• 버전: 18 이상
• 공식 사이트에서 설치 (LTS 권장)

📦 SvelteKit 프로젝트 생성

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

• npm run dev 명령으로 개발 서버 실행
• http://localhost:5173에서 앱 확인

프로젝트 템플릿 선택 시

• Skeleton Project (기본 템플릿)
• Demo App (예제 포함, 구조 파악에 도움 됨)

---

3️⃣ 디렉토리 구조 이해

my-app/
├── src/
│   ├── routes/           # 페이지 라우팅
│   │   └── +page.svelte  # "/" 메인 페이지
│   │   └── about/+page.svelte
│   ├── lib/              # 공통 컴포넌트 및 유틸
│   ├── app.html          # HTML 템플릿
├── static/               # 정적 파일 (favicon, 이미지 등)
├── svelte.config.js      # 설정 파일

🔸 routes/ 폴더가 라우팅의 중심입니다.
🔸 +page.svelte, +page.ts, +server.ts, +layout.svelte 등으로 구성됩니다.

---

4️⃣ 페이지 라우팅

SvelteKit은 파일과 폴더 이름만으로 URL 경로를 자동으로 매핑합니다.

파일 구조	브라우저 경로
/routes/+page.svelte	/
/routes/about/+page.svelte	/about
/routes/blog/[slug]/+page.svelte	/blog/hello-world

🧪 예제

src/routes/about/+page.svelte

<script>
  let name = 'SvelteKit';
</script>

<h1>About {name}</h1>

---

5️⃣ 데이터 로딩

SvelteKit은 서버에서 데이터를 먼저 불러와 페이지에 전달할 수 있습니다.

🧾 예제: load 함수 사용

// src/routes/+page.ts
export function load() {
  return {
    name: 'Yeongjin',
    age: 30
  };
}

<script>
  export let data;
</script>

<h1>{data.name} 님의 나이는 {data.age}세입니다</h1>

load() 함수는 SSR, CSR 환경 모두에서 동작합니다.

---

6️⃣ API 라우트 만들기

백엔드 없이도 REST API를 SvelteKit으로 구현할 수 있어요.

// src/routes/api/hello/+server.ts
export function GET() {
  return new Response('안녕하세요, 진이입니다!');
}

• /api/hello 경로로 GET 요청 → 위 응답을 반환
• JSON 응답도 가능: return json({ message: "Hi" })

---

7️⃣ 폼 처리: Actions

서버에서 폼을 처리하는 기능도 매우 간편합니다.

<!-- src/routes/contact/+page.svelte -->
<form method="POST">
  <input name="message" />
  <button type="submit">보내기</button>
</form>

// src/routes/contact/+page.server.ts
export const actions = {
  default: async ({ request }) => {
    const formData = await request.formData();
    const message = formData.get('message');
    console.log('사용자 메시지:', message);
    return { success: true };
  }
};

---

8️⃣ 스타일링

기본 CSS 가능

<style>
  h1 {
    color: red;
  }
</style>

Tailwind CSS 연동 (많이 씀)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p

tailwind.config.cjs:

content: ["./src/**/*.{html,js,svelte,ts}"],

src/app.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

svelte.config.js에 추가:

preprocess: [
  import('svelte-preprocess')({ postcss: true })
],

---

9️⃣ 빌드와 배포

정적 사이트로 빌드

npm run build
npm run preview

Node 서버로 실행

npm run build
node build

Vercel에 배포

npm i -g vercel
vercel

---

🔟 추천 학습 자료

• 📘 공식 튜토리얼: https://learn.svelte.dev
• 📘 SvelteKit 문서: https://kit.svelte.dev/docs
• 📺 유튜브: The Net Ninja의 SvelteKit 강좌
• 🧪 실습 예제: Todo 앱, 블로그, 포트폴리오 등

---

🎁 추가 팁

팁	설명
🔄 hot reload	개발 중 자동 반영
🔍 DevTools	Svelte for Chrome 설치 추천
📁 구조화	/lib/components, /lib/stores 등 폴더로 컴포넌트 관리

---

✅ 마무리: 어떤 앱 만들고 싶으신가요?

SvelteKit은 정말 직관적이고 빠릅니다.
간단한 포트폴리오 사이트부터 블로그, 관리자 페이지, 챗봇 인터페이스, AI 기반 프론트엔드까지 만들 수 있어요.

---