Svelte

<colbgcolor=#ffffff,#1f2023><colcolor=#4A4A55,#ddd> 스벨트 Svelte
제작자	리치 해리스(Rich Harris)
분류	웹 프레임워크
출시	2016년 11월 26일
언어	JavaScript
버전	5.1.13
라이선스	MIT 라이선스
| | |

1. 개요

2. 특징

• 실제 DOM을 사용, 컴파일러
  가상 DOM을 사용하는 대표적인 웹 프레임워크인 React는 각 구성 요소를 만들면 가상 DOM 객체가 만들어지고, 실제 DOM과 가상 DOM을 비교하여 변경 사항을 실제 DOM으로 업데이트하는 방식으로 작동한다.
  
  반면, Svelte는 이 과정을 생략하고 바로 실제 DOM을 반영한다. Svelte는 앱을 실행 시점(Run time)에서 해석하지 않고 빌드 시점(Build time)에서 Vanilla JavaScript Bundle로 컴파일하여 속도가 빠르고 따로 라이브러리를 배포할 필요가 없어 간편하다.
  
  document.querySelector 등의 함수를 사용하여 실제 DOM 접근 및 제어가 더욱 간편한 장점이 있다. 가상 DOM을 사용하는 리액트, 뷰에서는 성능 저하 등의 이유로 실제 DOM을 제어하는 걸 되도록 피하기 위해서 Vue에서는 ref를 사용하고, React에서는 refs, useRef 등의 편법을 사용해야 한다.

• 비교적 간소화된 소스코드, 상대적으로 작은 용량
  React나 Vue.js와 비교했을 때 훨씬 적은 양의 코드로 동일한 결과물을 만들어낼 수 있으며, 가독성이 좋은 점도 장점이다.
  웹사이트가 거대해질수록 그로 인한 소스코드의 비대화는 수반될 수 밖에 없는데, 상대적으로 간소화된 소스 코드를 가지고 있음으로써 유지보수와 기능 추가 개발에서 효율성이 높아지는 것이다.

• use: 특성 등을 통한 기존 라이브러리 친화력
  React, Vue의 경우, 기존 JS 라이브러리를 해당 환경에 맞게 컴포넌트를 재구성하여 만들어야 하는 대신, 생태계가 많이 발달하여 어렵지 않게 각 환경의 대체제를 구할 수 있으나, Svelte의 경우, 좁은 생태계에도 불구하고 사용하려고 하는 이유 중 가장 큰 비중을 차지하는 부분이 바로 기존 JS 라이브러리와의 친화력이다. SolidJS도 이 use: 특성을 사용하여 좁은 생태계를 타파하는 방법을 사용하고 있으며, use: 특성을 사용하는 함수에 초기화부터 정리(cleanup)까지 모두 구현할 수 있고, 액션 함수만 다르다면 복수 구현이 가능하여 특정 태그를 기준으로 여러 라이브러리와 생명주기까지 한 번에 해결할 수 있다. 이는 실제 DOM을 주력으로 사용함으로써 얻을 수 있는 이점이다.

2.1. 4.0

• 3.x 대비 최대 12% 빠른 성능과 최대 75% 가벼운 메인 패키지를 포함한 최대 50% 가벼운 번들 크기.[1]
• 최소 요구사항이 node.js 16, webpack 5, vite 4로 상향.
• 향상된 개발자 경험을 위한 주요 IDE 지원 확대

2.2. 5.0

• 더 좋아진 성능
• runes 기술을 통한 세분화된 반응성 시스템
• 스니핏과 이벤트 특성을 통해 더 풍부해진 템플릿 표현력
• 네이티브 TypeScript 지원
• 이전 버전 구문과의 호환성

3. 룬(Rune)

3.1. 최초 발표(5.0 이전)

• 최상위 컴포넌트와 하위 컴포넌트의 let 문법 차이
• export let 문법
• $: 구문 등의 구형 문법
• <script> 태그와 <script context="module"> 태그 사용처
• $$props 및 $$restProps 속성
• 생명주기 함수 (예를 들면, afterUpdate 함수를 $effect 매크로에 통합)
• 저장 API와 반응형을 위한 $ 접두어 처리 (더 이상 불필요하지만 제거하진 않을 예정)

3.2. 정식 발표(5.0 이후)

#!syntax html
<script>
  let list = [];
  let count = 0;
  $: doubled = count * 2;
</script>


<button on:click|preventDefault|stopPropagation={() => {
  count++;
  list = [...list, count];
}}>
	{doubled}
</button>

<ol>
  {#each list as item}
    <li>{item}</li>
  {/each}
</ol>
<p>{count} doubled is {doubled}</p>

#!syntax html
<script>
  let list = $state([]);
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>


<button onclick={(e) => {
  e.preventDefault();
  e.stopPropagation();
  count++;
  list.push(count);
}>
	{doubled}
</button>

<ol>
  {#each list as item}
    <li>{item}</li>
  {/each}
</ol>
<p>{count} doubled is {doubled}</p>

• 다만 Svelte4도 최신 업데이트에서 어느정도 가능해졌다(object의 경우 pure object에 한해, array는 기존에 선언된 원소에 한해, 혹은 index를 사용한 직접 원소 할당을 통해).

#!syntax html
<script>
  let list = $state([]);
  $effect(() => {
    window.__list = list;
  });
</script>

<ul>
  {#each list as item}
    <li>{item}</li>
  {/each}
</ul>
<button onclick={() => (list = [])}>Reset</button>

4. 예시

#!syntax javascript
import React, { useState } from 'react';

export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  return (
    <div>
      <input type="number" value={a} onChange={(e)=>setA(+e.target.value)}/>
      <input type="number" value={b} onChange={(e)=>setB(+e.target.value)}/>

      <p>{a} + {b} = {a + b}</p>
    </div>
  );
};

#!syntax xml
<template>
  <div>
    <input type="number" v-model.number="a">
    <input type="number" v-model.number="b">

    <p>{{a}} + {{b}} = {{a + b}}</p>
  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        a: 1,
        b: 2
      };
    }
  };
</script>

#!syntax xml
<script>
  let [a, b] = [1, 2];
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

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

1. React에서는 input 태그에서의 양방향 바인딩을 지원하지 않아, input에 onchange 이벤트를 일일이 걸어 변수값을 변경해주도록 만들어줘야 하며, 또한 변수의 초기값 외에 setter 함수로 쓰일 변수와 useState라는 특유의 선언함수를 이용해야 한다(React Hooks). 그나마 과거 class 기반의 방식보다는 간단해진 버전이다. class 기반에서는 react.component 상속 및 생성자에서의 변수 설정이 추가적으로 필요했다. 또한 일반적인 html 렌더링 방식이 아닌 JSX(JavaScript eXtension)라는 특수한 방식으로 결과를 반환해주고 있다. (svelte에서는 @html과 비슷하다.[3])
2. vue에서는 v-model이라는 양방향 바인딩 지원으로 onchange를 선언할 필요는 없지만, 여전히 template 태그를 별도로 선언해야 하며, 일반적인 자바스크립트 방식의 방식과 다르게 객체 선언 등으로 데이터를 초기화해주고 있다.
   참고로 반응형 문법을 쓰는 방식으로도 구현할 수 있다.[4]
   svelte에서는 $:로 끝나지만, vue.js에서는 'computed, watch'로 별도로 선언해야 하며, react에서는 해당 기능이 존재하지 않으며, 해당 효과를 흉내내기 위하여 일반적으로 useeffect(이전의 componentDidUpdate)등의 생명주기 hook를 이용해야 한다.

#!syntax xml
<script>
	let v = $state([1, 2]);
</script>

<input type="number" bind:value={v[0]} />
<input type="number" bind:value={v[1]} />
<p>{v[0]} + {v[1]} = {v[0] + v[1]}</p>

5. SvelteKit

6. Svelte를 사용하는 웹 사이트/프로그램

• 뉴욕 타임스: 제작자가 해당 업체 소속 당시 일부 기사 페이지에서 사용.
• 스포티파이: 랜딩 페이지에서 사용.
• Brave: 검색 기능에 사용.
• Google Arts&Culture: Cultural Crosswords에 사용. 출처
• Facebook Your Home: Your Home 프로젝트에 사용. 출처
• 오라클: 오라클 CMS 서비스 개발에 사용. 출처
• IBM: IBM 카본 컴포넌트 프로젝트에 사용. 출처
• IKEA: IKEA 웹 사이트에 사용. 출처
• 스퀘어: Square 개발자 페이지에 사용. 출처
• Razorpay: Razorpay 결제 다이얼로그에 사용. 출처
• Les Echos: 인터렉티브 뉴스 페이지에 사용. 출처
• 리그 오브 레전드: 클라이언트 웹 컴포넌트에 사용. 출처
• 빌리빌리: 라이브 송출 페이지에 사용. 출처
• Stone Payments: SDK에 사용. 출처
• Godaddy: 홈페이지에 사용.
• 어베스트: 홈페이지에 사용.
• 1Password: 홈페이지에 사용.
• 라쿠텐: 홈페이지에 사용.
• Alaska Airline: 홈페이지에 사용.
• Chess.com: 홈페이지에 사용.
• Fickett.io: 홈페이지에 사용.
• 비디오스튜: 편집페이지에 사용.
  

7. 학습

7.1. 유튜브

• Svelte 기초 학습

7.2. 웹페이지

7.2.1. 공식 튜토리얼

• Svelte, SvelteKit 튜토리얼 영어판
• Svelte, SvelteKit 튜토리얼 일본어판
• Svelte, SvelteKit 튜토리얼 한국어판(번역 진행중)

7.2.2. 블로그

• 예제로 배우는 Svelte - 초급편 예제로 배우는 Svelte와 SvelteKit - 고급편

7.2.3. 기타 웹페이지

• Svelte 완벽 가이드

7.3. 도서

• 가장 빨리 만나는 스벨트
• 실전 스벨트 & 스벨트킷 입문

8. 기타

9. 관련 문서

• 웹 프레임워크
• 라이브러리
• React(라이브러리)
• Vue.js
• JavaScript
• TypeScript