Svelte 입문

# Svelte 입문 가이드

## 학습 목표
컴파일 타임 프레임워크 Svelte로 빠른 웹앱을 만듭니다.

## 1. Svelte란?
컴파일 타임에 최적화되는 프레임워크입니다.
- 가상 DOM 없이 직접 DOM 조작
- 번들 크기가 작음
- 간결한 문법
- 뛰어난 성능

## 2. 프로젝트 생성

```bash
npm create svelte@latest myapp
cd myapp
npm install
npm run dev
```

## 3. 컴포넌트 기초

```svelte
<script>
let name = "World";
</script>

<h1>Hello {name}!</h1>

<style>
h1 {
color: purple;
}
</style>
```

## 4. 반응성 (Reactivity)

```svelte
<script>
let count = 0;

// 반응형 선언
$: doubled = count * 2;

// 반응형 구문
$: console.log("count changed:", count);

$: if (count > 10) {
alert("Too high!");
}
</script>

<button on:click={() => count++}>
Clicked {count} times
</button>
<p>Doubled: {doubled}</p>
```

## 5. Props

```svelte
<!-- Child.svelte -->
<script>
export let name;
export let age = 0; // 기본값
</script>

<p>{name} is {age} years old</p>

<!-- Parent.svelte -->
<script>
import Child from "./Child.svelte";
</script>

<Child name="Kim" age={25} />
```

## 6. 이벤트 처리

```svelte
<script>
function handleClick(event) {
alert("Clicked!");
}

function handleInput(event) {
console.log(event.target.value);
}
</script>

<button on:click={handleClick}>Click me</button>
<button on:click|preventDefault={handleClick}>No default</button>
<input on:input={handleInput} />
```

## 7. 바인딩

```svelte
<script>
let name = "";
let checked = false;
let selected = "a";
</script>

<!-- 텍스트 -->
<input bind:value={name} />
<p>Hello {name}</p>

<!-- 체크박스 -->
<input type="checkbox" bind:checked />
<p>{checked ? "Yes" : "No"}</p>

<!-- 셀렉트 -->
<select bind:value={selected}>
<option value="a">A</option>
<option value="b">B</option>
</select>
```

## 8. 조건문과 반복문

```svelte
<script>
let show = true;
let items = ["Apple", "Banana", "Cherry"];
</script>

<!-- 조건문 -->
{#if show}
<p>Visible!</p>
{:else}
<p>Hidden</p>
{/if}

<!-- 반복문 -->
<ul>
{#each items as item, index}
<li>{index + 1}. {item}</li>
{/each}
</ul>

<!-- 키 지정 -->
{#each items as item (item.id)}
<li>{item.name}</li>
{/each}
```

## 9. 스토어 (전역 상태)

```javascript
// stores.js
import { writable, readable, derived } from "svelte/store";

export const count = writable(0);
export const time = readable(new Date(), set => {
const interval = setInterval(() => set(new Date()), 1000);
return () => clearInterval(interval);
});
export const doubled = derived(count, $count => $count * 2);
```

```svelte
<script>
import { count, doubled } from "./stores.js";
</script>

<p>Count: {$count}</p>
<p>Doubled: {$doubled}</p>
<button on:click={() => $count++}>+1</button>
```

## 10. 라이프사이클

```svelte
<script>
import { onMount, onDestroy, beforeUpdate, afterUpdate } from "svelte";

onMount(() => {
console.log("Component mounted");
return () => console.log("Cleanup on unmount");
});

onDestroy(() => {
console.log("Component destroyed");
});
</script>
```

## 11. SvelteKit 라우팅

```
src/routes/
+page.svelte # /
about/+page.svelte # /about
blog/[slug]/+page.svelte # /blog/:slug
+layout.svelte # 공통 레이아웃
```

```svelte
<!-- src/routes/blog/[slug]/+page.svelte -->
<script>
export let data;
</script>

<h1>{data.post.title}</h1>
```

```javascript
// src/routes/blog/[slug]/+page.js
export async function load({ params }) {
const post = await fetchPost(params.slug);
return { post };
}
```

## 추천 학습 순서
1. 기본 문법과 반응성
2. 컴포넌트와 Props
3. 이벤트와 바인딩
4. 스토어로 상태 관리
5. SvelteKit으로 풀스택 앱