001: Svelte 소개 및 환경 설정

Svelte란?

Svelte는 웹 인터페이스를 구축하기 위한 프레임워크입니다. HTML, CSS, JavaScript로 작성된 선언적 컴포넌트를 최적화된 JavaScript 코드로 변환하는 컴파일러를 사용합니다.

Svelte 5는 Runes라는 새로운 반응성 시스템을 도입하여 더 명시적이고 강력한 상태 관리 방법을 제공합니다. $state, $derived, $effect와 같은 룬(Rune)을 사용하여 반응형 상태를 선언하고 관리할 수 있습니다.

실시간 예제: 인사하기

Svelte 5 인사하기

현재 이름: Svelte

컴포넌트 코드:

<script lang="ts">
  // Svelte 5의 반응형 상태 선언
  let name = $state<string>('Svelte');
  
  function greet(): void {
    alert(`환영합니다, ${name}!`);
  }
</script>

<div>
  <input 
    type="text" 
    bind:value={name} 
    placeholder="이름을 입력하세요"
  />
  <button onclick={greet}>
    인사하기
  </button>
</div>

Svelte 5의 Runes 시스템

Svelte 5는 Runes라는 새로운 반응성 시스템을 도입했습니다. Runes는 $로 시작하는 특별한 함수로, 컴파일러에게 반응성에 대한 힌트를 제공합니다.

실시간 예제: 카운터와 반응성

Svelte 5 카운터

두 배: 0

메시지: 카운터를 증가시켜보세요

컴포넌트 코드:

<script lang="ts">
  // 기본 상태 선언
  let count = $state<number>(0);
  
  // 파생 상태 (derived state)
  let doubled = $derived<number>(count * 2);
  let message = $derived<string>(
    count > 10 ? '카운터가 10을 초과했습니다!' : '카운터를 증가시켜보세요'
  );
  
  // 부수 효과 (side effects)
  $effect(() => {
    if (count === 5) {
      console.log('카운터가 5에 도달했습니다!');
    }
  });
  
  function increment(): void {
    count += 1;
  }
  
  function decrement(): void {
    if (count > 0) count -= 1;
  }
</script>

<div>
  <div class="flex items-center gap-4">
    <button onclick={decrement} disabled={count === 0}>-</button>
    <span>{count}</span>
    <button onclick={increment}>+</button>
  </div>
  <p>두 배: {doubled}</p>
  <p>메시지: {message}</p>
</div>

Svelte vs 다른 프레임워크

Svelte는 React, Vue, Angular와 같은 다른 프레임워크와 달리 런타임이 아닌 빌드 타임에 작동합니다. 이는 더 작은 번들 크기와 더 나은 성능을 제공합니다.

특징	Svelte	React	Vue
번들 크기	매우 작음	중간	중간
반응성	컴파일러 기반	가상 DOM	프록시 기반
보일러플레이트	최소	많음	중간
학습 곡선	낮음	중간	중간

React vs Svelte 코드 비교:


// React 컴포넌트
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

// Svelte 5 컴포넌트
<script>
  let count = $state(0);
</script>

<div>
  <p>Count: {count}</p>
  <button onclick={() => count++}>
    Increment
  </button>
</div>

개발 환경 설정

Svelte 프로젝트는 Vite를 사용하여 쉽게 설정할 수 있습니다. TypeScript와 Tailwind CSS를 함께 사용하면 더 강력한 개발 환경을 구축할 수 있습니다.

새 프로젝트 생성:


# Vite + Svelte + TypeScript 프로젝트 생성
npm create vite@latest my-svelte-app -- --template svelte-ts
cd my-svelte-app

# 의존성 설치
npm install

# Tailwind CSS 설치
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# tailwind.config.js 설정
# content: ['./src/**/*.{svelte,html,js,ts}'] 추가

# src/app.css에 Tailwind 지시어 추가
# @tailwind base;
# @tailwind components;
# @tailwind utilities;

# 개발 서버 실행
npm run dev

tailwind.config.js:


/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{svelte,html,js,ts}'],
  theme: {
    extend: {
      colors: {
        'svelte-orange': '#FF3E00',
        'svelte-dark': '#676778',
      }
    },
  },
  plugins: [],
}

Svelte의 특징

컴파일 타임 프레임워크: 런타임이 아닌 빌드 타임에 최적화된 코드 생성
적은 보일러플레이트: 간결한 코드 작성 가능
진정한 반응성: 복잡한 상태 관리 없이 자동 UI 업데이트
작은 번들 크기: 최적화된 코드로 빠른 로딩 시간
Runes 시스템: Svelte 5에서 도입된 명시적인 반응성 시스템
TypeScript 지원: 타입 안전성과 개발자 경험 향상
SvelteKit: 풀스택 애플리케이션 개발을 위한 프레임워크

실습 과제

Vite와 Svelte를 사용하여 새 프로젝트를 생성해보세요.
Tailwind CSS를 설정하고 간단한 스타일을 적용해보세요.
$state, $derived, $effect를 사용하여 간단한 카운터 앱을 만들어보세요.
VS Code 확장 프로그램을 설치하고 개발 환경을 최적화해보세요.

다음 강의 예고

다음 강의에서는 Svelte 컴포넌트의 기본 구조와 작성 방법에 대해 더 자세히 알아보겠습니다. 스크립트, 마크업, 스타일 섹션과 기본 문법을 배우게 됩니다.

다음 강의 →