Svelte 완전 정복: 상세 가이드

• 3/11/2025
• 4 minutes to read

1. Svelte란 무엇인가?

Svelte는 컴파일러 기반의 최신 JavaScript 프레임워크로, 다른 프레임워크와 달리 가상 DOM을 사용하지 않고, 빌드 타임에 정적인 JavaScript 코드를 생성하여 빠른 성능을 제공합니다.

2. Svelte의 특징

• 컴파일러 기반: 런타임에서 프레임워크가 실행되는 것이 아니라, 빌드 타임에 코드가 최적화됨
• 가상 DOM 없음: 직접적으로 DOM을 조작하여 성능이 향상됨
• 간결한 문법: 템플릿과 로직이 한 파일(Svelte 파일)에 통합됨
• 반응형 설계: let 변수를 사용하여 상태 변경을 감지하고 자동으로 UI를 업데이트함

3. Svelte 설치 및 프로젝트 생성

3.1 Svelte 설치

npx degit sveltejs/template my-svelte-app
cd my-svelte-app
npm install
npm run dev

위 명령어를 실행하면 http://localhost:5000에서 Svelte 애플리케이션을 실행할 수 있습니다.

3.2 프로젝트 구조

• public/ : 정적 파일이 위치하는 디렉토리
• src/ : Svelte 컴포넌트와 JavaScript 코드가 포함됨
• src/main.js : 앱의 진입점(entry point)
• src/App.svelte : 기본 애플리케이션 컴포넌트

4. Svelte 기본 문법

4.1 Svelte 컴포넌트

Svelte 컴포넌트는 .svelte 확장자를 가지며, HTML, CSS, JavaScript를 하나의 파일에서 작성할 수 있습니다.

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

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

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

4.2 반응형 변수

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  클릭 수: {count}
</button>

Svelte는 let 변수를 직접 변경할 때 자동으로 UI를 업데이트합니다.

4.3 반응형 선언문

<script>
  let a = 10;
  let b = 20;
  $: sum = a + b; // 반응형 선언문
</script>

<p>{a} + {b} = {sum}</p>

$: sum = a + b;는 a 또는 b 값이 변경될 때 sum이 자동으로 업데이트되도록 만듭니다.

5. Svelte의 이벤트 처리

<script>
  function handleClick() {
    alert('버튼이 클릭되었습니다!');
  }
</script>

<button on:click={handleClick}>클릭하세요</button>

이벤트는 on: 접두사를 사용하여 처리할 수 있습니다.

6. Svelte의 Props 및 데이터 전달

6.1 Props 정의

<!-- Child.svelte -->
<script>
  export let message;
</script>
<p>{message}</p>

6.2 부모 컴포넌트에서 Props 전달

<!-- App.svelte -->
<script>
  import Child from './Child.svelte';
</script>

<Child message="안녕하세요!" />

7. Svelte의 Store (상태 관리)

7.1 Writable Store

// store.js
import { writable } from 'svelte/store';
export const count = writable(0);

7.2 Store 사용

<script>
  import { count } from './store.js';
</script>

<button on:click={() => count.update(n => n + 1)}>
  증가
</button>
<p>카운트 값: {$count}</p>

8. Svelte의 조건문 및 반복문

8.1 조건문 (if 문)

<script>
  let show = true;
</script>

{#if show}
  <p>이 메시지는 표시됩니다.</p>
{/if}

8.2 반복문 (each 문)

<script>
  let items = ['사과', '바나나', '오렌지'];
</script>

<ul>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

9. Svelte의 Transition 및 애니메이션

<script>
  import { fade } from 'svelte/transition';
  let visible = true;
</script>

<button on:click={() => visible = !visible}>토글</button>

{#if visible}
  <p transition:fade>이 문장은 사라지고 나타납니다.</p>
{/if}

10. SvelteKit을 사용한 서버 사이드 렌더링 (SSR)

SvelteKit은 Svelte의 공식 웹 애플리케이션 프레임워크로, SSR과 정적 사이트 생성을 지원합니다.

10.1 SvelteKit 설치

npm create svelte@latest my-sveltekit-app
cd my-sveltekit-app
npm install
npm run dev

10.2 SvelteKit 페이지

src/routes/+page.svelte에서 페이지를 생성할 수 있습니다.

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

<h1>Welcome to {name}!</h1>

11. 결론

Svelte는 간결한 문법과 높은 성능으로 빠르게 배우고 사용할 수 있는 강력한 프레임워크입니다. 특히 반응형 설계, 컴파일 기반 아키텍처, 그리고 적은 코드량으로 효율적인 개발이 가능하다는 점에서 큰 장점을 가지고 있습니다. 실무 프로젝트에서도 활용할 수 있도록 더 깊이 있는 학습을 진행해보세요!