svelt란 ? 공식문서 해석기 - React와의 차이점

이번 시간에는 요즘들어서 프론트엔드 프레임워크 3대장 React Vue Angular를 이어 새롭게 등장한

Svelte라는 프레임워크에 대해 포스팅 해보겠습니다. svelte는 아직까지는 정식으로 한글 문서를 제공하지 않지만 프레임워크 3대장이라고 불리는 다른 프레임워크보다는 상당히 낮은 러닝 커브를 가집니다.

 

Svelte의 특징

Svelte라는 특징은 날씬한, 호리호리한이라는 뜻입니다. 단어의 뜻과 같이 상당히 적은 코드와 작은 용량을 가진다는 것이 장점입니다. Svelte는 다른 라이브러리에 비해서 가상돔(Virtual DOM)을 사용하지 않습니다.

 

Svelte는 Reactive web app과 interface를 만드는 데 사용되는 일종의 Compiler(컴파일러)입니다. 

여기서 주목해야 할 단어는 Reactive와 Compiler인데 

 

Reactive app아라는 것은 이런 의미를 가지고 있습니다. 만약 오늘 날씨를 보여주는 앱이 있다고 치면. 앱에 날씨 정보를 상태 값으로 저장 한 후 날씨가 바뀔 때마다 상태 값이 업데이트 될 것입니다. 그리고 날씨가 바뀌어 

상태 값이 변경되는 즉시 브라우저에 반영해주어야 합니다. 

 

이렇게 상태의 변화가 즉각적으로 반영되는 앱들을 바로 Reactive(반응성)라고 합니다.

이러한 Reactive app을 구축하기 위해 많은 개발자들이 Angular, Vue, 또는 React와 같은 프레임워크, 라이브러리 등을 이용했습니다.

 

Svelte는 이렇게 Reactive app을 만드는 데 사용된다는 점에 있어 React와 같은 기존의 라이브러리와 유사합니다.Svelte는 SPA(Single Page Application) 전체를 개발하거나 혹은 페이지의 작은 일부분을 개발할 때 사용합니다.

 

Write less code

Svelte를 사용하면 적은 양의 코드로 동일한 동작을 하는 애플리케이션을 만들 수 있습니다. Vue.js와 React,Svelte를 사용해 동일한 동작을 하는 코드를 작성해보겠습니다.

 

Vue.js를 기반으로 작성한 코드는 아래와 같습니다.

<template>
  <div> 
    <input type="number" v-modal-number="a"/>
    <input type="number" v-modal-number="b"/>
  </div>
</template>

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

React를 기반으로 작성한 코드는 아래와 같습니다.

import React from 'react';

export default function Count() {
    const [a, setA] = useState(1);
    const [b, setB] = useState(2);
    
    function hnadleChangeA(event) {
       setA(event.target.value);
    }
    
    function handleChangeB(event) {
       setB(event.target.value);
    }
    
    
    return (
       <div>
         <input type="number" value={a} onChange={handleChangeA} />
         <input type="number" value={b} onChange={handleChangeB} />
         
         <p>{a} * {b} = {a + b}</p>
       </div>
    )
}

Svelte로 작성한 코드는 아래와 같습니다.

<script>
  let a = 1;
  let b = 2;
</script>

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

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

React로 작성된 코드는 422자, Vue로 작성된 코드는 263자, Svelte로 작성된 코드는 145자로 Svelte로 작성된 코드가 가장 간결하고 적은 것을 볼 수 있습니다. Svelte는 높은 가독성을 유지하고 적은 양의 코드를 작성할 수 있습니다.

 

코드량이 줄어든다면 2가지 장점이 있습니다.

 

번들 크기 감소

코드의 양이 줄어든다면 컴파일 되어 생성된 번들 파일의 크기도 같이 줄어듭니다. 번들의 크기가 작으면 

SPA(Single Page Application)의 단점을 보완할 수 있습니다.

 

SPA의 전형적인 단점으로는 첫 로딩 시 사용되는 모든 리소스를 다운받고, 파싱하고, 실행되기 때문에 첫 로딩에 많은 시간이 걸린다는 것 입니다. 번들 크기가 줄어든다면, 그만큼 다운받아야 할 리소스가 줄고 

파싱 할 양이 줄기 때문에 첫 로딩시 속도가 개선됩니다.

 

유지 보수 비용 감소

코드 양이 줄어들면 유지 보수에 드는 비용이 감소합니다. 프로젝트 개발 시간과 버그의 개수는

 

코드의 양에 따라 선형적으로 증가하는 것이 아닌  2차식으로 증가한다고 합니다.

 

코드를 유지보수 하는 입장에서도 코드를 읽고

이해하는데 코드 양이 적으면 좀 더 빠르고 쉽게 이해할 수 있습니다.

 

Not Virtual DOM

Vue.js와 React는 가상돔을 사용합니다. Vue.js & React는 가상돔이 빠르다는 인식을

 

프론트엔드 개발자들에게 심어주었습니다. 물론 가상 돔은 대부분의 경우 실제 돔(React DOM)보다 빠릅니다.

 

가상돔은 항상 빠르지는 않다.

하지만 가상돔을 사용하는 것은 항상 빠른 것은 아닙니다. 가상돔이 변경되면, 새로운 가상돔과 변경되기 전의 

가상돔을 비교해 변경된 내용을 실제돔에 적용을 하는데, 이때 가상돔을 비교하는 오버헤드가 발생합니다.

오버헤드가 발생하지 않는다면 React에서 shouldComponentUpdate를

사용하여 최적화하는 방법은 필요 없습니다.

 

런타임 프레임워크를 포함하지 않는다.

Svelte는 가상 돔을 사용하지 않습니다. 가상돔은 변경된 내용을 알기 위한 수단으로만 사용합니다. Svelte는 

가상돔을 사용하지 않아도 변경된 내용을 알 수 있는 다른 수단을 사용하기 때문에 가상 돔을 사용하지 않습니다.

 

가상돔을 사용하지 않아 번들에는 변경된 내용을 알기 위해 사용되는 런타임 프레임워크가 포함되지 않습니다.

런타임 프레임워크가 포함되지 않기 때문에 번들 크기는 더 작아지게 됩니다.

 

 

Truly reactive

Vue.js와 React는 런타임에 가상돔을 비교하여 변경된 내용을 파악하는 방식을 사용합니다. 반면 Svelte는
빌드 타임(Build Time)에 어느 부분이 변경될지 파악하는 방식을 사용합니다. 

 

Svelte는 어느 부분이 변경될지 파악하고 그 부분의 상태(state)가 변경될 경우 반응형으로 화면을 갱신하는 
반응형 방식입니다.

 

Svelte는 컴파일러 이다.

 

Svelte의 공식 문서에는 Svelte는 컴파일러라고 소개합니다. Svelte는 빌드 타임에서 돔을 업데이트하는 

효율적인 명령 코드로 변환하기 때문에 컴파일이라고 소개하는 것 같습니다.

 

Svelte 사용 시 유의사항

Svelte를 프로젝트로 도입하기 전에는 항상 몇가지 고려해야할 사항이 존재합니다.

 

1.CDN으로는 Svelte를 사용할 수 없다.

Svelte는 앞에서 말했듯 빌드 타임에 반응형이 결정됩니다. 빌드 타임에 결정되기 때문에 런타임에 오베헤드를 

줄여 성능을 향상시킬 수 있는 장점이 있지만, 런타임 프레임워크를 포함하고 있지 않기 때문에 

CDN 등으로 Svelte를 사용할 수 없습니다.

 

2.브라우저 지원 체크가 필요하다.

공식 문서에서 정식으로 어디까지의 브라우저를 지원하는지에 대해서는 이야기 하지 않는것으로 판단됩니다.

IE 11 이하의 구형 브라우저에서는 Svelte를 사용하기 위한 별도의 설정 작업이 필요합니다.

 

참고:https://github.com/sveltejs/svelte/issues/558

Browser support · Issue #558 · sveltejs/svelte

 

Svelte 생태계를 생각해야 한다.

Svelte는 신규 프레임워크인 만큼 지금의 Vue.js나 React.js 만큼 생태계 자체는 그렇기 크지 않습니다.
Svelte관리는 별도의 라이브러리가 아닌 Svelte 자체 앱에서 정식 지원합니다.

 

CLI 라이브러리

React의 CRA(create-react-app)이나 Vue.js의 vue-cli와 같이 간편하게 프로젝트를 생성할 수 잇는 CLI 라이브러리가 

아직 존재하지는 않습니다. 다만 Github에 rollup, webpack 두 가지 버전의 보일러 플레이트(boilerplate)가 

올라와 있어 클론으로 프로젝트를 간단하게 생성할 수 있습니다.

 

Route 라이브러리

Svelte에서 공식적으로 제공하는 Router 라이브러리가 있습니다. (그중 svelte-spa-router를 많이 쓰는 것으로 보임)

 

요약

Svelte의 특징 및 장점

• 구문이 간결하다
• 코드 자체를 간결하게 작성할 수 있다.
• 가상돔을 사용하지 않는다.
  
  • 변경된 위치를 정확하게 알아 돔을 비교하는 런타임 프레임워크가 필요하다.
  • 돔을 비교하는데 드는 오버헤드가 없다.
  • 돔을 비교하는 런타임 프레임워크가 없어 번들의 크기가 작다
• 진짜 반응형 프레임워크이다.
  • 변경된 위치를 찾아 변경하는 것이 아닌, 변경된 위치를 정확하게 아는 반응형이다.
• Vue보다 빠르다(bootup time, main thread cot)
• 용량은 Vue보다 적다(total byte weight)

Svelte 사용 시 유의사항

• CDN으로 Svelte를 사용할 수 없다.
• 구형 브라우저에서 동작하는지 까지 확인해 보아야 한다.
• 신규 프레임워크이기 때문에 아직 생태계가 크지는 않다.

참고 자료

[Svelte] Svelte 소개

svelte.md