갑자기 Svelte를 사용하게 됬다.

나는 사전 과제로 인해 5일 내에 SvelteKit을 사용한 과제를 진행했어야 했다.

하지만 나는 React와 Next.js만 사용해 봤다....

그래도 다행히 Svelte 자체가 러닝 커브가 났기 때문에 해볼 만하다고 생각해 사전과제를 진행해 보기로 했다.

Svelte의 등장

Svelte가 등장하기 전 해당 기술이 왜 등장했는지에 대해 알아보았다.
등장을 알기 위해서는 현재 많이 사용되는 React, Vue와 같은 프레임워크(라이브러리)의 동작 원리에 대해서 알고 있어야 한다.
우선 내가 알고 있는 React와 비교해보고자 한다.

React의 경우에는 가상돔을 바탕으로 동작하기 때문에 변경 사항이 있을 때마다 돔을 다 바꾸는 것이 아닌 가상돔을 이전 돔과 비교해 가며 차이점이 있다면 차이점을 파악하고 이를 실제 돔에 적용하는 과정을 거치게 된다.

그래서 우리는 가상돔을 사용한 React가 빠르다고 느끼고 있는 것이다.

Screenshot from Rethinking Best Practices at JSConfEU 2013

가상돔이 빠른 것은 맞는 말이지만 앱의 규모가 커지게 될수록 React Hook을 사용하여 앱을 최적화하는 과정을 거쳐야 한다.

또한 돔의 업데이트 과정에서도 불필요한 작업이 있다.

예를 들어 <div class='text'> hello </div>에서 hello가 bye로 바뀐다고 가정할 때 아래의 단계를 거치게 된다.

1. div 노드를 비교
2. 노드의 속성(class) 비교
3. hello 비교

하지만 대부분의 업데이트는 1,2 단계의 기본 구조는 변하지 않기 때문에 1,2단계를 거치지 않고 바로 3단계로 건너뛰게 하는 게 더 효과적이라고 할 수 있다.

그래서 Svelte는 돔의 업데이트 과정을 효율적으로 단축하고 가상돔을 사용하기에 생기는 최적화 작업을 하지 않음으로써 성능이 개선된 프레임워크이다.

Svelte의 코드 구조

Svelte는 순수한 자바스크립트를 사용했을 때를 떠올리게 하는 구조를 가지고 있다.
아래의 코드만 봐도 바로 이해가 된다.
sciprt부분에 js코드를 작성하고 아래에 UI를 구성하는 Html 태그를 작성한 후 CSS코드를 style 안에 작성하면 된다.
파일명은. svelte,. js를 사용하는 것이 가능하다.
. svelte 파일은 아래와 같은 로직을 작성하는 파일이며. js는 JS 로직들을 작성하는 파일이라고 생각하면 된다.

<script>
  let count = 0;
  $: doubleCount = count*2;
</script>

<div>
  <button on:click={()=>count+=1}/>
  {count}
  {doubleCount}
</div>

<style>
</style>

나는 위의 코드를 보고 $:에서 위하감이 느껴졌다.
도대체 해당 기능이 뭐하는 기능인지에 대해서 전혀 감이 잡히질 않았다.

그래서 버튼을 클릭해보니 count가 1 증가할 때마다 doubleCount가 동작했다.
그래서 $: 대해서 찾아보았다.
$:는 count 값이 변할 때마다 실행되는 것으로 아래와 같이 이해하면 된다.

let doubleCount = function(){
    return count * 2;
}

위와 같은 구조로 count가 증가할 때마다 위의 함수가 실행되는 것이다.

SvelteKit은?

Svelte에 기본적인 기능들을 추가해서 확장된 프레임워크로 아래와 같이 이해하면 단번에 이해될 것이다.

• React => Svelte
• Next.js => SvelteKit

SvelteKit의 경우에는 기존 Svelte와 동일한 기능에 몇 가지 추가된 기능들이 있는 것이다.
(SEO, Dynamic Routing, Server...)
나 또한 모든 기능들을 사용해보지 않았기에 다 작성할 수 없지만 Svelte와 거의 동일하고, A기능이 SvekteKit에 있나 하고 찾아보면 대부분 지원되는 기능이다.

단점

1. 너무 작은 커뮤니티
   SvelteKit의 정식 버전은 작년에 나왔기 때문에 필요한 정보를 얻기가 너무 힘들었다.
   React의 경우에는 엄청 큰 커뮤니티들이 많기 때문에 잘 작성된 코드의 정보 혹은 모르는 내용들을 찾는 것이 매우 쉬웠지만 SvelteKit의 경우에는 필요한 정보를 찾는 것이 어려웠다.
   그래서 코드를 작성하는 내내 이게 옳바른 코드인지에 대한 의문이 계속 들었다.

후기

오랜만에 새로운 프레임워크를 공부하고 사용해보면서 재밌었다.
하지만 React만 사용해서 프로젝트를 진행했기 때문에 나의 뇌는 이미 React에 절여 저 있었다.
그래서 React에서는 A기능을 구현하기 위해 필요한 함수들과 로직들을 어떻게 작성할 것인지에 대해서 큰 틀이 잡혀있었는데 Svelte를 사용하면서 어떻게 작성할지 막막함이 있었다.

하지만 언젠간 Svelte가 엄청 좋아져서 React의 전성 시대를 Svelte가 끊어주면 재밌을 것 같다는 생각이 들었다.