1) 스벨트란

Svelte는 2016년 출시한 오픈 소스 프론트엔드 웹 프레임워크이다. 기존의 React나 Vue.js 등의 널리 알려진 웹 프레임워크와 달리, 가상 DOM을 사용하지 않으며 빌드 단계에서 구성 요소를 컴파일하여 성능이 향상되었다.
-출처 : 나무위키

velog 사용자분들은 대부분 svelte를 위의 내용과 같이 생각하실텐데요. 사실 svelte는 가상 DOM을 사용하지 않고 어쩌고 저쩌고가 아닙니다.그렇습니다. svelte는 날씬한이라는 뜨....

2) 스벨트를 알게된 계기

설 연휴를 앞 두고 velog에서 teo님의

Svelte Rxjs Vite AdorableCSS

라는 글을 읽게 되었는데요.

https://velog.io/@teo/Svelte-Rxjs-Vite-AdorableCSS

이 글을 읽을 때에는 솔직히 svelte 뿐만 아니라 React나 Vue 같은 프론트엔트 프레임워크를 사용하여 웹 개발을 해야할 필요성에 대해 전혀 느끼지 못했습니다.

프론트엔트 프레임워크로 구연할 수 있는 것들은 HTML & CSS & 바닐라 JavaScript로도 구연할 수 있다.
-어디서 주워들은 얘기

그냥 킬링 타임으로 그 글을 읽은 후... 설 연휴가 찾아왔습니다.

3) '우연한' 발견

https://velog.io/@semicolon/developmentjournal#%ED%98%81%EB%AA%85%EC%A0%81-%EB%B0%9C%EA%B2%AC

제가 위 글에서 썼던 것처럼 https://thebook.io/ 이 사이트에서 프로그래밍을 배우기도 합니다.

이번에 새 책이 올라왔더군요. 설날 때 접속해 알게 되었습니다.

가장 빨리 만나는 "스벨트"

곧장 들어가 읽어봤죠. 이 책에 따르면

스벨트(Svelte 3.0)는 새로운 프레임워크입니다. 직관적이고 짧은 문법으로 양방향 바인딩(two-way binding)과 리액티비티 코드를 작성할 수 있어 빠르고 쉽게 앱을 만들 수 있습니다.
스벨트는 동시에 컴파일러입니다. 스벨트를 사용하기 위해 코드에 script src='svelte.js' 형태로 js를 삽입하거나 import 나 require를 이용하여 모듈 형태로 포함시키지 않습니다. 스벨트 컴파일러가 우리가 작성한 코드를 순수한 자바스크립트로 변환해줍니다.
또한, 가상 돔(Virtual DOM) 같은 추상화 계층을 만들어 내지 않고 일반적인 프레임워크가 런타임에 할 일을 빌드 시에 해결하면서 사용자의 브라우저 부하를 최소화합니다.

랍니다. 그리고 다음장에

더하기 프로그램은 사용자가 두 개의 input 박스에 값을 바꾸면 하단에 두 개의 값을 더해주는 연산식과 결과를 보여줍니다. 전체 코드는 다음과 같습니다.

<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>

라고 나와있었습니다. 너무나 혁신적이었습니다. 바닐라 자바스크립트로 작성하려면 querySelector를 일일이 끼워준 후, addEventLisener에 "(on)change" 메소드로 비교적 복잡하게 했어야 할 작업을 이토록 간단하게 할 수 있었습니다.

4) 실망

저는 코드가 섞이는 걸 굉장히 더럽게 생각하는 타입입니다. 줄도 똑바로 맞춰야 하고, 들여쓰기도 완벽히 해야 속이 시원한 느낌이 듭니다. 코드 길이가 심하게 차이 나는 것도 더럽게 여겨

const select = v => document.querySelector(v);

를 항상 사용합니다.

그런데 스벨트는 코드가 너무 더럽게 섞이는 겁니다.

<script>
    let a = 1; 
</script>

{#if a == 0}
 <p>{a}입니다</p>
{:else if a > 0}
    <p>{a} 은(는) 양수입니다</p>
{:else}
    <p>{a} 은(는) 음수입니다</p>
{/if}

출처 : 가장 빨리 만나는 스벨트

위의 코드와 같이 if문을 (쉽게 말하면) HTML코드에서 작성하는 꼴이 너무 더러웠습니다. 심지어 if문, else if문, else문의 형태가 좀.... 이상하지 않습니까?

그래서 때려치웠습니다.

5) 또 하나의 깨달음

svelte를 계속하는 게 맞나 싶어

https://j3sung.tistory.com/693

이 글을 읽어 봤습니다. 이 글에 따르면

<인기도>
React > Vue > Angular > Svelte

<커뮤니티 & 리소스>
React > Angular = Vue > Svelte

<성능>

<학습곡선>
Svelte > React = Vue > Angular

였습니다. svelte가 성능이나 난이도는 좋으나 인기도와 커퓨니티&리소스 활성화가 현저히 떨어진다는 결과였습니다.

-출처 : 나무위키

2016년에 나온 따끈따끈한 신상 프레임워크다 보니 그런 거 같습니다. 이해는 되나 배우는 입장에서 인기가 없고 배움에 도움을 많이 주는 커퓨니티&리소스가 많이 없다는 건 치명적이죠.

6) 결론은?

그래서 결국 가장 많이들 쓰고, 배우기 위한 환경이 더 좋은 리엑트를 배우기로 마음을 바꿨습니다.

하지만 svelte는 성장하는 프레임워크이기 때문에 충분히 인기가 생기고, 커뮤니티&리소스가 활성화된다면 리엑트를 버리고 svelte로 갈아탈 예정입니다.