Svelte 편집하기

{| class="wikitable" style="float:right; margin-left:10px; text-align:center;"
|-
! colspan="2" | Svelte
|-
| colspan="2" | [[파일:Svelte Logo.svg|150px]]
|-
! '''개발자'''
| [[리치 해리스]] 외 Svelte 코어팀
|-
! '''최초 출시'''
| [[2016년]]
|-
! '''최신 버전'''
| Svelte 5.x (Runes 기반)
|-
! '''장르'''
| 컴파일러 기반 프론트엔드 프레임워크
|-
! '''라이선스'''
| [[MIT 라이선스|MIT]]
|}

== 개요 ==
'''Svelte'''(스벨트)는 [[자바스크립트]] 진영의 프론트엔드 프레임워크로, [[2016년]] [[리치 해리스]](Rich Harris)가 처음 발표했다. [[리액트]]나 [[뷰]] 같은 기존 프레임워크가 브라우저에서 런타임에 [[가상 DOM]]을 돌려가며 화면을 갱신하는 것과 달리, Svelte는 '''빌드 시점(컴파일 타임)'''에 컴포넌트 코드를 분석해서 DOM을 직접 조작하는 순수 자바스크립트 코드로 미리 변환해버린다. 그래서 "프레임워크가 아니라 컴파일러"라는 표현이 자주 따라붙는다.

결과물에 프레임워크 런타임 코드가 거의 딸려오지 않기 때문에 번들 크기가 작고, 초기 로딩과 인터랙션 반응 속도가 빠른 편이라 개발자들 사이에서 평가가 꾸준히 좋다. 실제로 State of JS 설문에서 매년 만족도 최상위권에 이름을 올리는 프레임워크이기도 하다.

== 역사 ==
* '''2016년''' - 리치 해리스가 Svelte 1을 공개. 당시엔 실험적인 프로젝트에 가까웠다.
* '''2019년''' - Svelte 3 출시. 반응형 문법(`$:`)과 단일 파일 컴포넌트(`.svelte`) 형태가 자리 잡으며 사실상 지금 알려진 Svelte의 원형이 완성됐다.
* '''2022년''' - 풀스택 메타프레임워크 '''SvelteKit'''이 정식 1.0으로 출시. [[Next.js]], [[Nuxt.js]]의 경쟁 상대로 언급되기 시작.
* '''2024년 10월''' - '''Svelte 5''' 정식 출시. 반응성 모델을 통째로 갈아엎은 '''Runes'''(룬) 시스템을 도입하면서 사실상 프레임워크의 두 번째 챕터가 시작됐다. 동시에 SvelteKit도 2.x로 올라가며 Runes를 정식 지원.
* 이후 마이너 업데이트가 꾸준히 이어지고 있으며, 2026년 기준 Svelte는 5.5x 버전대, SvelteKit은 2.5x 버전대에서 유지보수되는 중이다.<ref>커뮤니티 개발 블로그 및 패키지 트래킹 사이트 기준(2026년 상반기 시점 관측치이며, 정확한 최신 버전은 npm 등에서 직접 확인 필요).</ref>

== 특징 ==
* '''컴파일러 기반''' - [[가상 DOM]]을 아예 쓰지 않는다. 빌드 시점에 "이 상태가 바뀌면 이 DOM 노드의 이 부분만 갱신하면 된다"는 코드를 정적으로 만들어버리기 때문에, 런타임에 변경 사항을 비교(diffing)하는 과정 자체가 없다.
* '''작은 번들 크기''' - 프레임워크 런타임을 거의 가져가지 않다 보니, 같은 기능을 구현해도 결과물 JS 용량이 리액트/뷰 대비 작게 나오는 경우가 많다.
* '''단일 파일 컴포넌트''' - `.svelte` 확장자 하나에 마크업(HTML), 스타일(CSS), 로직(JS/TS)을 다 몰아넣는 구조. 파일 하나만 열면 컴포넌트의 전부를 볼 수 있어서 진입장벽이 낮다는 평이 많다.
* '''문법이 HTML에 가까움''' - JSX처럼 별도 문법을 배울 필요 없이, 순수 HTML에 약간의 확장 문법(`{ }`, `{#if}`, `{#each}` 등)만 얹은 형태라 처음 접해도 낯설지 않다.
* '''Runes 기반 명시적 반응성'''(Svelte 5~) - 아래 문단 참고.

== 주요 개념 ==
=== 컴포넌트 기본 구조 ===
<syntaxhighlight lang="svelte">
<script>
  let name = 'Svelte';
</script>

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

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

=== Runes: Svelte 5의 반응성 재설계 ===
Svelte 4까지는 `let count = 0;` 처럼 그냥 변수를 선언하고 대입하면 컴파일러가 "어? 이 변수는 반응형이네" 하고 '''암묵적으로''' 알아서 추적해주는 방식이었다. 편하긴 한데, 프로젝트가 커지면 "이게 왜 리렌더링이 안 되지?" 같은 디버깅이 골치 아파지는 단점이 있었다.

Svelte 5에서는 이걸 뒤엎고, `$state`, `$derived`, `$effect`, `$props` 같은 '''룬(rune)'''이라는 특수 키워드를 코드에 직접 명시하는 방식으로 바꿨다. "이 변수는 반응형으로 쓸 거다"라고 개발자가 직접 선언하는 셈이라, 코드만 봐도 어디가 반응형인지 한눈에 파악할 수 있게 됐다는 게 코어팀의 설명이다. 이 룬들은 함수 호출이 아니라 컴파일러가 알아보는 특수 문법이며, `.svelte` 파일 밖에서도(`.svelte.js`, `.svelte.ts`) 사용할 수 있어 상태 로직을 컴포넌트 바깥으로 분리하기도 훨씬 쉬워졌다.

<syntaxhighlight lang="svelte">
<script>
  // Svelte 4 스타일 (구문법, 여전히 하위 호환됨)
  let count = 0;
  $: doubled = count * 2;
</script>

<script>
  // Svelte 5 Runes 스타일
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<button onclick={() => count++}>
  Count: {count}, Doubled: {doubled}
</button>
</syntaxhighlight>

이벤트 바인딩 문법도 `on:click`에서 표준 DOM 속성에 가까운 `onclick`으로 바뀌는 등 세부적인 변화가 있다. 다만 Svelte 코어팀은 하위 호환성을 강하게 신경 써서, 기존 Svelte 4식 컴포넌트도 강제 마이그레이션 없이 그대로 동작하도록 설계했다. 덕분에 기존 프로젝트는 새 컴포넌트에만 룬을 적용하는 식으로 점진적으로 넘어갈 수 있다.

=== Props ===
<syntaxhighlight lang="svelte">
<script>
  // Svelte 5
  let { message } = $props();
</script>

<p>{message}</p>
</syntaxhighlight>

=== 반복문/조건문 ===
<syntaxhighlight lang="svelte">
{#if count > 0}
  <p>양수입니다</p>
{:else}
  <p>0 이하입니다</p>
{/if}

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

== SvelteKit ==
'''SvelteKit'''은 Svelte 위에서 돌아가는 풀스택 메타프레임워크로, [[Next.js]]나 [[Nuxt.js]]의 포지션과 비슷하다. 파일 기반 라우팅, 서버사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우트, 폼 액션(form actions) 등을 기본 제공한다.

Svelte 5와 함께 SvelteKit 2로 넘어오면서 내부적으로도 Runes에 맞춰 API가 정리됐다. 예를 들어 예전에는 `$app/stores`에서 스토어를 가져와 `$page` 처럼 접두사 `$`를 붙여 구독하는 방식이었는데, 지금은 `$app/state`에서 가져온 객체(`page.url.pathname` 등)를 접두사 없이 바로 반응형 값처럼 쓰는 식으로 바뀌었다. `$app/stores` 쪽은 사실상 지원 종료(Deprecated) 수순을 밟고 있다.

<syntaxhighlight lang="bash">
npx sv create my-app
cd my-app
npm install
npm run dev
</syntaxhighlight>

== 생태계 및 위상 ==
[[리액트]]나 [[뷰]]에 비하면 라이브러리, 커뮤니티 규모, 채용 시장에서의 존재감은 여전히 작은 편이다. 다만 "번들 크기와 런타임 성능이 생태계 크기보다 중요한" 프로젝트 — 예를 들어 인터랙티브 대시보드, 임베디드 위젯, 경량 SaaS 내부 툴 등 — 에서는 꾸준히 대안으로 거론된다. UI 컴포넌트 라이브러리, 테스트 도구, 인증/배포 관련 생태계도 SvelteKit 2 시점에서 예전보다 많이 성숙해졌다는 평가가 나온다.

== 장단점 ==
=== 장점 ===
* 컴파일 타임 최적화 덕분에 런타임 오버헤드가 거의 없다.
* HTML에 가까운 직관적인 문법으로 진입장벽이 낮다.
* 결과물 번들이 가볍다.
* Runes 도입 이후 반응형 흐름이 명시적이라 디버깅·코드리뷰가 수월해졌다는 평가.
* Svelte 5 컴포넌트와 구 Svelte 4 컴포넌트가 공존 가능해 점진적 마이그레이션이 가능하다.

=== 단점 ===
* [[리액트]]·[[뷰]] 대비 여전히 작은 생태계와 구인 시장.
* Runes라는 새 개념을 다시 학습해야 해서, 기존 Svelte 사용자에게도 러닝커브가 새로 생긴다.
* 대규모 레거시 코드베이스에서는 Svelte 4→5 전환 자체가 별도 작업량으로 발생할 수 있다.

== 여담 ==
* Svelte의 마스코트는 [[고슴도치]]를 형상화한 캐릭터다.
* State of JS 설문 조사에서 만족도 최상위권 프레임워크로 여러 해 동안 꾸준히 언급되고 있다.
* "컴파일러가 프레임워크다"라는 캐치프레이즈로 자주 소개되며, 리액트의 가상 DOM 접근법과 자주 비교 대상이 된다.

== 관련 문서 ==
* [[자바스크립트]]
* [[리액트]]
* [[뷰]]
* [[Next.js]]
* [[Nuxt.js]]
* [[리치 해리스]]

== 참고 자료 ==
* Svelte 공식 웹사이트: [https://svelte.dev Svelte.dev]
* SvelteKit 공식 웹사이트: [https://kit.svelte.dev SvelteKit.dev]

<references/>

[[분류:웹 프레임워크]] [[분류:프론트엔드]] [[분류:자바스크립트]]