스벨트(Svelte) 란

개요

Svelte는 라이브러리나 프레임워크 보다는 컴파일러에 가깝다.

일반적으로 jQuery나 React로 프론트앤드를 개발하면 사용자가 해당 웹에 접속하였을 때 개발자가 작성한 코드와 jQuery 또는 React를 사용자 또한 다운로드 해야 했다.

하지만 Svelte는 알아서 코드를 분석하고 컴파일을 자동으로 해서 브라우저가 바로 이해할 수 있도록 한다. 그래서 사용자가 해당 웹에 접속하였을 때 앱의 작업수행에 필요한 코드만 있으면 되고 이는 작은 앱 사이즈로 이어진다.

Virtual DOM

Virtual DOM을 사용하지 않아도 됨.

Virtual DOM은 앱의 UI를 나타내는데 리액트JS가 메모리에 보관 하고 있음 이는 유저가 보고 있는 실제 UI와 가끔 동기화 되는데 덕분에 리액트 JS로 하여금 새로고침이 필요한 요소를 찾아 유저에게 변경된 UI를 보여주게 된다.

리액트가 처음 출시 되었을 때, 변경사항 체크를 위해 UI사본을 메모리에 저장하는 것은 그 어떤 프레임워크도 하지 않았던 놀라운 것이었지만 Svelte에선 더 나아가서 Virtual DOM이 필요가 없어졌다. 왜냐면 컴파일러가 더욱 최적화된 JS코드를 만들어서 더욱 빠른 속도로 UI를 새로고침 할 수 있다.

하지만 Vitual DOM을 사용하지 않는 것이 크게 속도에 영향을 미친다고는 안보인다. 왜냐하면 React와 마찬가지로 Vitual DOM을 사용하는 Inferno는 Svelte보다 빠르기 때문

개발자들이 좋아하는 이유

개발경험이 좋다 배우기도 쉽고 직관적이다. 기본적인 HTML, CSS, JS를 아는 개발자라면 쉽게 알 수 있는 구조로 되어있다.

기본구조

<script> // JS코드를 넣는 섹션
  let clicks = 0;
  function increaseClicks() {
    clicks = clicks +1
  }
</script>

<style> // CSS코드를 넣는 섹션
  button:active {
    opacity: 0.5;
  }
</style>

<div>  // HTML 코드를 넣는 섹션
  <h2>Total Clicks: {clicks}</h2>
  <button on:click|once={increaseClicks}>Click me!</button>
</div>

// once는 사용자가 한 번만 누를수 있도록 함
// 이러한 간단함이 개발자들에게 좋은 개발경험으로 남았다.

bindings

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

<input bind:value={name}>
  {#if name === ''}
    <h2>What is your name?</h2>
  {:else}
    <h2>Hello {name} !</h2>
  {/if}

Svelte Kit

  • Svelte 프레임워크
  • 아직 베타버전
  • 아직 커뮤니티가 충분히 갖춰지지 않았다.

links

social