[Svelte 튜토리얼] Part 1 - Welcome to Svelte
이번 튜토리얼에서는 Svelte에 대해서 소개합니다.
Svelte?
React, Vue.js, Angular는 대표적인 프론트엔드 프레임워크입니다. Svelte는 이러한 프레임워크들과 같은 종류의 프론트엔드 프레임워크입니다.
Svelte의 특징
Svelte 공식문서는 Svelte를 세 문장으로 표현하고 있습니다.
1. Write less code
React, Vue.js, Svelte 세 가지 프레임워크를 이용한 다음과 같은 컴포넌트의 구현 코드입니다.
React로 작성된 코드
import React, { useState } from 'react';
export default () => {
const [a, setA] = useState(1);
const [b, setB] = useState(2);
function handleChangeA(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>
);
};Vue.js로 작성된 코드
<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>
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, Vue.js, Svelte 코드 중 Svelte 코드가 가장 짧습니다. 더 많은 코드 비교를 보고 싶다면 이 링크에서 확인할 수 있습니다.
프로젝트의 개발 시간과 버그의 수는 코드의 양에 비례해 2차식으로 늘어난다고 합니다.
코드가 짧아지게 되면 코드 가독성이 좋아져 실수할 확률이 줄어들고 빠르게 개발할 수 있습니다. 게다가, 버그가 줄어들어 유지 보수 시간도 줄어듭니다.
이렇게 코드가 짧아진 이유는 Svelte는 boilerplate 없이 순수 HTML, CSS, Javascript를 사용하기 때문입니다.
2. No virtual DOM
React, Vue.js는 virtual DOM을 변경된 부분을 효율적으로 찾아내기 위한 수단으로 사용합니다. 이 때문에 런타임 환경에서 해당 프레임워크를 실행하기 위한 코드도 같이 포함되어서 실행되어야 합니다.
하지만 Svelte는 virtual DOM을 이용해 런타임에 작업을 수행하기를 기다리는 것과 달리 빌드 시 앱에서 요소가 어떻게 변경될 수 있는지 알 수 있도록 하는 컴파일과정을 거쳐 vanilla Javascript 코드를 생성합니다. 그래서 Svelte를 컴파일러라고 부르기도 합니다.
이렇게 되면, 번들 크기가 줄어들어 첫 로딩이 느리다는 SPA의 단점이 해결됩니다. 아래 이미지는 RealWorld에서 조사한 프레임워크 번들 크기 및 성능 비교 자료입니다.
3. Truly reactive
Svelte는 복잡한 상태관리 라이브러리 없이 Javascript 문법만으로 변경된 위치를 정확하게 알고 반응하는 truly reactive입니다. 즉, 빌드 단계에서 어느 부분이 변경될 수 있는지 파악하고 그에 따른 코드를 Javascript 문법으로 작성해줍니다. 따라서 해당 값이 변경되었음을 알리는 수단(ex, React의 hook)이 필요 없습니다.
Svelte의 단점
- 작은 커뮤니티
새로 나온 프레임워크인만큼 커뮤니티가 크지 않습니다. - 브라우저 지원 범위 이슈
Svelte github issue에 올라와있습니다.
출처
https://ui.toast.com/weekly-pick/ko_20191002