Svelte 5: 기초부터 배포까지 빠른 가이드

Source: Dev.to

The State of JavaScript 2024 설문조사에 따르면, Svelte의 채택률은 2020년 이후 꾸준히 성장하고 있으며 개발자 커뮤니티에서 점점 더 많은 관심을 받고 있습니다. React와 Vue가 여전히 지배적인 선택이지만, Svelte는 니치에서 메인스트림으로 이동하며 프론트엔드 생태계의 중요한 힘이 되고 있습니다.

아직 Svelte를 사용해 보지 않았다면, 이 글은 핵심 개념, 장점, 그리고 시작 방법을 빠르게 살펴볼 수 있도록 도와줍니다.

Svelte란? React/Vue와는 어떻게 다른가?

Svelte는 React와 Vue처럼 사용자 인터페이스를 만들기 위한 프론트엔드 컴포넌트 프레임워크입니다. 근본적인 차이점은 Svelte는 컴파일‑타임 프레임워크인 반면, React와 Vue는 런타임 프레임워크라는 점입니다.

런타임 vs. 컴파일 타임

• React/Vue – “레시피”를 작성하면, 프레임워크가 사용자의 브라우저에서 “요리를” 합니다(가상 DOM diff 등).
• Svelte – 요리가 이미 여러분의 머신에서 완성되어 배포됩니다; 사용자는 “완성된 요리”만 받습니다. Svelte는 빌드 단계에서 컴포넌트를 효율적인 순수 JavaScript로 컴파일하므로 최종 번들에 Svelte 런타임이 없습니다.

비교

장점 및 사용 사례

장점

1. 작은 번들 크기
   런타임이 없으므로 번들이 작아집니다. 간단한 Svelte 앱은 몇 KB에 불과하지만, 동등한 React 앱은 프레임워크만 해도 40 KB 이상이 필요합니다.

2. 우수한 성능
   가상 DOM diff 비용이 없으므로 Svelte는 실제 DOM을 직접 조작합니다. 노드 업데이트가 많은 상황에서 Svelte는 일반적으로 React/Vue보다 빠릅니다.

3. 깨끗한 문법

   let count = $state(0);
   <button on:click={() => count++}>
     Clicked {count} times
   </button>

   useState, ref가 없습니다. HTML, CSS, JS가 하나의 .svelte 파일에 명확한 구조로 함께 존재합니다.

4. 학습 장벽이 낮음
   HTML, CSS, JavaScript에 익숙하다면 Svelte를 금방 익힐 수 있습니다. JSX 같은 사고 부담이 없고, “hooks는 조건문 안에 넣을 수 없다” 같은 규칙도 없습니다.

적합한 사용 사례

• 개인 프로젝트 / 작은 앱 – 빠른 개발, 적은 코드.
• 성능·용량에 민감한 상황 – 임베디드 위젯, 모바일 H5, 저대역폭 환경.
• 새 기술을 시도하고 싶은 팀 – Svelte의 개발자 경험은 정말 뛰어납니다.
• 정적 웹사이트 / 블로그 – SvelteKit과 결합하면 정적 사이트를 손쉽게 생성할 수 있습니다.

덜 적합한 시나리오

• 이미 React/Vue에 깊이 투자하고, 방대한 생태계 의존성이 있는 팀.
• 풍부한 서드파티 컴포넌트 라이브러리가 필요한 프로젝트(Svelte 생태계는 아직 React보다 작습니다).

Svelte 5: 런(Runes)으로 반응성을 더 직관적으로

Svelte 5는 2024년 10월에 공식 출시되었습니다. 가장 큰 변화는 Runes 시스템 도입으로, 반응형 상태 선언을 명시적으로 만들었습니다.

기존 “암시적 매직”

let count = 0;           // 자동으로 반응형이 됨
$: doubled = count * 2;  // 자동으로 의존성을 추적

$: 문법은 혼란스러울 수 있고, 어떤 변수가 반응형인지 명확하지 않습니다.

Svelte 5의 명시적 선언

let count = $state(0);               // 반응형 상태
let doubled = $derived(count * 2);   // 파생값

<button on:click={() => count++}>
  {count} × 2 = {doubled}
</button>

• $state() → 반응형 변수
• $derived() → 계산된 값 (Vue의 computed와 유사)

일반적인 런(Runes)

왜 이것이 초보자에게 더 친숙한가

• 추측이 없음 – $state가 반응형 변수를 명확히 표시합니다.
• 일관된 문법 – 같은 선언 방식이 최상위든 함수 내부든 동일하게 작동합니다.
• 디버깅이 쉬움 – 어떤 상태가 문제를 일으켰는지 바로 알 수 있습니다.

React Hooks나 Vue 3의 Composition API를 사용해 본 사람이라면, Runes는 익숙하면서도 문법이 더 깔끔하고 규칙이 적은 느낌을 줍니다.

SvelteKit 개요

Svelte가 컴포넌트를 작성하는 도구라면, SvelteKit은 완전한 애플리케이션을 구축하기 위한 도구입니다. 관계는 Next.js ↔ React 혹은 Nuxt ↔ Vue와 비슷합니다.

SvelteKit이 제공하는 것

1. 파일 기반 라우팅
   src/routes 아래에 폴더와 파일을 만들면 라우트가 자동으로 생성됩니다.

   src/routes/
   ├── +page.svelte          → /
   ├── about/
   │   └── +page.svelte      → /about
   └── blog/
       └── [slug]/
           └── +page.svelte → /blog/:slug

2. 다중 렌더링 모드

   • SSR – 서버‑사이드 렌더링(SEO 친화적).
   • CSR – 클라이언트‑사이드 렌더링(순수 프론트엔드).
   • SSG – 정적 사이트 생성(빌드 시 HTML 생성).
   • Hybrid – 페이지마다 다른 전략을 선택 가능.

3. 데이터 로딩
   각 라우트는 +page.js(또는 +page.server.js)를 두어 렌더링 전에 데이터를 불러올 수 있습니다.

   // src/routes/blog/+page.server.js
   export async function load() {
     const posts = await db.getPosts();
     return { posts };
   }

   <script>
     let { data } = $props();
   </script>
   
   {#each data.posts as post}
     <h2>{post.title}</h2>
   {/each}

4. Adapters
   SvelteKit은 어댑터를 교체함으로써 Vercel, Netlify, Cloudflare Workers, Node.js 등 다양한 플랫폼에 배포할 수 있습니다.