[프론트엔드 101] Svelte

SPA(Single Page Applications)의 증가로 인해 프론트엔드에 많은 변화가 생겼고 일반적으로 서버 측에서 수행되던 대부분의 작업이 이제는 클라이언트 측에서 편리하게 수행되고 있습니다. Javascript로만 다루기 힘들었던 것들은 편리한 프레임워크의 등장으로 쉽게 구현이 가능해졌고, 가상 DOM을 사용해서 기존의 DOM에 직접 접근하는 위험성을 최소화할 수 있었습니다.

하지만 기존의 Angular, React 및 Vue와 같은 프레임워크는 사용자가 앱을 실행할 때, 런타임 환경에서 프레임워크가 실행되고 코드를 동작시켜왔습니다. 이것은 두 가지 면에서 불리한데, 우선, 프레임워크 코드와 함께 앱을 동작시키기 때문에 그만큼 용량이 무겁습니다. 둘째, 프레임워크가 부팅되는 동안의 지연시간이 존재합니다.

이런 단점을 보완해서 등장한 것이 Svelte입니다.

---

Svelte란?

Svelte는 2019년 새로운 버전으로 릴리즈된 신개념 프론트엔드 Framework입니다.
기존의 리액트, 뷰 등의 자바스크립트 프레임워크와 동일하며, 매끄러운 interactive user interface를 쉽게 구축할 수 있다는 목표를 공유하고 있습니다. 작년부터 엄청난 관심을 끌어모은 이 Svelte는 놀랍게도 올해 React를 제치고 개발자 만족도 통계에서 1위를 했습니다.

Docs here

React vs Svelte

React와 Svlete의 가장 큰 차이는, React가 run time에서 코드를 해석하고 실행한다면, Svelte는 해당 작업을 build time에서 진행하며 모든 코드를 Javascript로 컴파일하는 작업을 수행한다는 것입니다.

또한 Svelte는 React가 사용하는 가상의 Virtual DOM을 사용하지 않아 런타임환경에서 훨씬 뛰어난 성능을 나타내며, React나 Vue와 비교했을때 코드 작성방식이 명확하고 간단해서 리팩토링과 디버깅이 쉽다는 장점이 있습니다.

---

Svelte 설치

Svelte Tutorial 보러가기

npx degit sveltejs/template my-svelte-project
# or download and extract 
cd my-svelte-project
# to use  run:
# node scripts/setupTypeScript.js

npm install
npm run dev

---

Svelte 미리보기

파일 만들기

.svelte 로 끝나는 파일을 생성하고 , <script> 태그로 javascript/typescript를 작성, <style>태그로 css/scss를 작성한다.

counter.svelte

<script lang="ts">
  // Javascript here
</script>
<style lang="scss">
  /* CSS here */
</style>

<!-- HTML here -->
<button>Click me</button>

Reactive & Event binding

변수는 간단히 괄호 {} 를 사용해서 불러오고 함수 이벤트는 키워드 on 을 입력해 적용합니다.

<script lang="ts">
  let count = 0;
  function addOne(){
     count += 1;
  }
</script>

<!-- HTML here -->
<button on:click={addOne}>Clicked {count} Times</button>

Conditional Logic & Loops

템플릿 내부에서 if 조건문 , each 반복문 등 사용가능합니다.

  {#if count > 0}
     <p>Nice Work!</p>
  {/if}
  
  {#each ['😊', '😭', '😱'] as face}
     <p>Hello {face}</p>
  {/each}

Export & Spread props

props를 내보내서 다른 파일로 값을 전달 할 수 있으며 전달하는 prop의 개수가 많은 경우 spread 연산자를 사용할 수 있습니다.

<script lang="ts">
  export let myProps = {
    name: 'Joy',
    color: 'blue',
    age: 20
  };
</script>

<!-- HTML here -->
<User {...myProps} />

Observable Stores

React의 context API와 비슷한 개념으로 store라고 불립니다. 컴포넌트 트리 내부에서 쉽게 공유해서 쓸수있고 html 템플릿에서는 $ 기호를 사용해 호출해서 사용합니다. ($ubscribe)

<script lang="ts">
  import { writable } from 'svelte/store';
  const user = writable({ icon: '❤' });
</script>

<!-- HTML here -->
{ $user.icon } 

출처 : https://www.youtube.com/watch?v=rv3Yq-B8qp4