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


== 개요 ==
== 개요 ==
'''Svelte'''는 현대적인 [[자바스크립트]] 프론트엔드 프레임워크 중 하나로, [[2016년]] [[리치 해리스]](Rich Harris)에 의해 개발되었다. Svelte는 기존 프레임워크와는 달리 런타임 대신 컴파일 타임에 애플리케이션 코드를 처리하여, 더욱 가벼운 애플리케이션을 제작할 수 있도록 설계되었다.
'''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>


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


== 주요 개념 ==
== 주요 개념 ==
Svelte는 사용법이 간단하고 직관적이다. 기본적인 사용법은 아래와 같다:
=== 컴포넌트 기본 구조 ===
 
=== 컴포넌트 ===
Svelte에서는 모든 파일이 기본적으로 컴포넌트 단위로 구성된다. 파일 확장자는 `.svelte`를 사용하며, HTML, CSS, JavaScript를 포함한다.
 
<syntaxhighlight lang="svelte">
<syntaxhighlight lang="svelte">
<script>
<script>
   let name = 'Svelte';
   let name = 'Svelte';
</script>
</script>
<h1>Hello {name}!</h1>


<style>
<style>
33번째 줄: 54번째 줄:
   }
   }
</style>
</style>
</syntaxhighlight>


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


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


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


   function increment() {
<script>
    count += 1;
   // Svelte 5 Runes 스타일
   }
  let count = $state(0);
   let doubled = $derived(count * 2);
</script>
</script>


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


=== Props ===
=== Props ===
컴포넌트 간 데이터를 전달할 때는 `export` 키워드를 사용한다.
<syntaxhighlight lang="svelte">
<syntaxhighlight lang="svelte">
<script>
<script>
   export let message;
   // Svelte 5
  let { message } = $props();
</script>
</script>


65번째 줄: 91번째 줄:
</syntaxhighlight>
</syntaxhighlight>


== 장단점 ==
=== 반복문/조건문 ===
=== 장점 ===
<syntaxhighlight lang="svelte">
* 컴파일 타임 최적화를 통한 빠른 성능.
{#if count > 0}
* 사용하기 쉬운 직관적인 문법.
  <p>양수입니다</p>
* 런타임 의존성이 없어 결과물이 가볍다.
{:else}
* 작은 프로젝트부터 대규모 프로젝트까지 유연하게 적용 가능.
  <p>0 이하입니다</p>
{/if}


=== 단점 ===
{#each items as item}
* 에코시스템이 [[리액트]]나 [[뷰]]에 비해 상대적으로 작다.
  <li>{item}</li>
* [[TypeScript]]와의 통합이 초기 버전에는 제한적이었으나, 현재는 개선되고 있다.
{/each}
* SvelteKit(풀스택 프레임워크)이 안정화되기까지 시간이 걸렸다.
</syntaxhighlight>


== SvelteKit ==
== SvelteKit ==
SvelteKit은 Svelte를 기반으로 한 풀스택 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR) 등을 지원한다. [[Next.js]]와 [[Nuxt.js]]와 유사한 역할을 하지만, Svelte의 장점을 최대한 활용할 수 있도록 설계되었다.
'''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">
<syntaxhighlight lang="bash">
npx create-svelte@latest my-app
npx sv create my-app
cd my-app
cd my-app
npm install
npm install
87번째 줄: 116번째 줄:
</syntaxhighlight>
</syntaxhighlight>


== 기타 ==
== 생태계 및 위상 ==
* Svelte의 마스코트는 고슴도치를 형상화한 심볼이다.
[[리액트]]나 [[뷰]]에 비하면 라이브러리, 커뮤니티 규모, 채용 시장에서의 존재감은 여전히 작은 편이다. 다만 "번들 크기와 런타임 성능이 생태계 크기보다 중요한" 프로젝트 — 예를 들어 인터랙티브 대시보드, 임베디드 위젯, 경량 SaaS 내부 툴 등 — 에서는 꾸준히 대안으로 거론된다. UI 컴포넌트 라이브러리, 테스트 도구, 인증/배포 관련 생태계도 SvelteKit 2 시점에서 예전보다 많이 성숙해졌다는 평가가 나온다.
* [[2023년]] 기준 [[State of JS]] 설문 조사에서 가장 만족도가 높은 프레임워크로 선정되었다.
 
== 장단점 ==
=== 장점 ===
* 컴파일 타임 최적화 덕분에 런타임 오버헤드가 거의 없다.
* HTML에 가까운 직관적인 문법으로 진입장벽이 낮다.
* 결과물 번들이 가볍다.
* Runes 도입 이후 반응형 흐름이 명시적이라 디버깅·코드리뷰가 수월해졌다는 평가.
* Svelte 5 컴포넌트와 구 Svelte 4 컴포넌트가 공존 가능해 점진적 마이그레이션이 가능하다.
 
=== 단점 ===
* [[리액트]]·[[]] 대비 여전히 작은 생태계와 구인 시장.
* Runes라는 새 개념을 다시 학습해야 해서, 기존 Svelte 사용자에게도 러닝커브가 새로 생긴다.
* 대규모 레거시 코드베이스에서는 Svelte 4→5 전환 자체가 별도 작업량으로 발생할 수 있다.
 
== 여담 ==
* Svelte의 마스코트는 [[고슴도치]]를 형상화한 캐릭터다.
* State of JS 설문 조사에서 만족도 최상위권 프레임워크로 여러 해 동안 꾸준히 언급되고 있다.
* "컴파일러가 프레임워크다"라는 캐치프레이즈로 자주 소개되며, 리액트의 가상 DOM 접근법과 자주 비교 대상이 된다.
 
== 관련 문서 ==
* [[자바스크립트]]
* [[리액트]]
* [[뷰]]
* [[Next.js]]
* [[Nuxt.js]]
* [[리치 해리스]]


== 참고 자료 ==
== 참고 자료 ==
95번째 줄: 149번째 줄:
* SvelteKit 공식 웹사이트: [https://kit.svelte.dev SvelteKit.dev]
* SvelteKit 공식 웹사이트: [https://kit.svelte.dev SvelteKit.dev]


<!-- 분류 -->
<references/>
[[분류:웹 프레임워크]] [[분류:프론트엔드]]
 
[[분류:웹 프레임워크]] [[분류:프론트엔드]] [[분류:자바스크립트]]

2026년 7월 31일 (금) 15:32 기준 최신판

Svelte
개발자 리치 해리스 외 Svelte 코어팀
최초 출시 2016년
최신 버전 Svelte 5.x (Runes 기반)
장르 컴파일러 기반 프론트엔드 프레임워크
라이선스 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 버전대에서 유지보수되는 중이다.[1]

특징[편집 / 원본 편집]

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

주요 개념[편집 / 원본 편집]

컴포넌트 기본 구조[편집 / 원본 편집]

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

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

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

Runes: Svelte 5의 반응성 재설계[편집 / 원본 편집]

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

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

<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>

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

Props[편집 / 원본 편집]

<script>
  // Svelte 5
  let { message } = $props();
</script>

<p>{message}</p>

반복문/조건문[편집 / 원본 편집]

{#if count > 0}
  <p>양수입니다</p>
{:else}
  <p>0 이하입니다</p>
{/if}

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

SvelteKit[편집 / 원본 편집]

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

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

npx sv create my-app
cd my-app
npm install
npm run dev

생태계 및 위상[편집 / 원본 편집]

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

장단점[편집 / 원본 편집]

장점[편집 / 원본 편집]

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

단점[편집 / 원본 편집]

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

여담[편집 / 원본 편집]

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

관련 문서[편집 / 원본 편집]

참고 자료[편집 / 원본 편집]

  1. 커뮤니티 개발 블로그 및 패키지 트래킹 사이트 기준(2026년 상반기 시점 관측치이며, 정확한 최신 버전은 npm 등에서 직접 확인 필요).

최근 바뀜

더 보기