Svelte
Svelte는 프레임워크가 없는 프레임워크 혹은 컴파일러라고 소개합니다.
이는 Virtual DOM이 없고, Runtime에 로드할 프레임워크가 없음을 의미합니다.
기본적으로 Build 단계에서 구성 요소를 컴파일하는 도구입니다.
Svelte의 특징
Compiler
Svelte는 프레임워크, 라이브러리가 아닌 컴파일러에 가깝습니다.
우리가 VueJS를 사용해 만든 웹서비스를 배포한다면 사용자는 우리의 웹사이트에 들어올때
- 작성한 코드
- VueJS 코드
이 두가지의 코드를 다운받아야합니다.
우리의 코드는 VueJS로 작성되었기에 사용자 역시 VueJS를 다운 받아야 실행이 가능합니다.
이건 너무 일반적인 얘기입니다.
하지만 Svelte는 다르게 작동합니다.
Svelte는 배포 시 브라우저가 바로 이해할 수 있는 Vanilla JS 코드로 컴파일 됩니다.
그렇기에 브라우저는 Svelte가 무엇인지 알 필요가 없습니다.
즉 스벨트로 작성된 웹사이트에 들어간 유저는
1.작성한 코드
만 다운받으면 되는 것이며 이건 즉 프로젝트의 사이즈가 작아짐을 뜻합니다. 그렇기에 Svelte는 VueJS, React보다 빠릅니다.
No Virtual DOM
Virtual DOM은 실제 DOM 문서를 추상화하여, 변화가 많은 화면을 DOM에서 직접 처리하는 방식이 아닌,
가상의 DOM을 만들어서 메모리에서 처리를 한 후 실제 DOM과 동기화함으로써
기존 DOM이 가지고 있던 단점을 개선하고 웹에서도 고성능 애플리케이션을 구현할 수 있도록 하였습니다.
새로운 Virtual DOM을 이전 Snapshot과 비교하거나, 상태 변화에 따른 새로운 가상 요소 생성 등에 많은 오버헤드가 있을 수 있으며
최종적으론 실제 DOM을 업데이트해야 하므로 그 과정을 생략하는 것이 더욱 빠를 수 있다고 합니다.
Svelte는 이러한 Virtual DOM을 사용하지 않고도 최적화 된 JS 코드를 생성하여 빠른 속도로 UI를 새로고침 할 수 있습니다.
허나 Virtual DOM을 사용하지만 Svelte보다 빠른 프레임워크(Inferno)도 있기에 Svelte의 특징으로만 알고 있으면 좋을 것 같습니다.
Svelte의 구조
<script>
</script>
<style>
</style>
<div>
</div>
Vue JS를 사용해봤다면 매우 친숙한 구조입니다.
Unisurvey 랜딩 페이지내 적용
Special elements
<svelte:head>
<meta charset="utf-8">
<title>유니서베이</title>
</svelte:head>
위와 같이 Special elements 중 svelte:head를 사용하여 head에 요소를 추가할 수 있습니다.
이 외에도 svelte:component, svelte:self 등이 있습니다.
Props, If block
<script>
export let form;
</script>
<div>
{#if form?.missing === 'name'}
<p class="error">The name field is required</p>
{/if}
</div>
script 태그내에 export를 사용하여 prop를 전달받을 수 있습니다.
해당 html 태그 내에 조건을 넣는 VueJS와 달리 시작에 # 붙여 {#if}, 끝에 /를 붙여 {#if} 해당 태그를 감싸는 형태입니다.
처음보는 문법이라 어색할 수 있지만 이해하는데 큰 어려움은 없을것입니다.
추가적으로 if else문의 예시입니다.
<script>
let x = 7;
</script>
{#if x > 10}
<p>{x} is greater than 10</p>
{:else if 5 > x}
<p>{x} is less than 5</p>
{:else}
<p>{x} is between 5 and 10</p>
{/if}
Lifecycle
<script>
import {onMount} from 'svelte';
onMount(async () => {
const mapContainer = document.getElementById('map');
const mapOption = {
center: new kakao.maps.LatLng(37.51216800709268, 127.01979389605017),
level: 4,
};
const map = new kakao.maps.Map(mapContainer, mapOption);
});
</script>
Svelte 에서 라이프 사이클을 사용할 때는 onMount 메서드를 사용합니다.
랜딩 페이지에서는 앱이 마운트 된 후 카카오 맵을 생성해주었습니다.
더 많은 기능들…
Svelte Tutorial 에서 연습해보세요.
소감
간단한 페이지 작업으로 Svelte의 많은 기능을 사용하지 않았지만
기존에 Vue 또는 React를 사용했던 경험이 있다면 쉽고 빠르게 배우고 사용할 수 있다는 점을 것을 느꼈습니다.
늘 같은 프레임워크, 라이브러리 사용에 무료함을 느낀다면 경험해보는 것을 추천합니다.