Svelte 란?

Svelte 란?

이번에 Hebees라는 회사에 합류를 하게 되어 Svelte를 사용하게 되었습니다. 바로 업무에 들어가기 전에 Svelte에 대해 정리를 하는 것이 좋다고 판단하였습니다.

Svelte 정의

우선, Svelte는 사용자 인터페이스 구축에 대한 근본적이고 새로운 접근 방식이며 대부분의 작업을 앱을 빌드할 때 발생하는 컴파일 단계로 이동하여 사용한다고 되어있습니다.
또한, 공식 문서를 보면 Svelte를 대표적으로 3가지를 정의 하고 있습니다.

Write less code
이미 알고 있는 언어(HTML, CSS, JavaScript)를 사용하여 상용구가 없는 구성 요소를 구축합니다.

No virtual DOM
코드를 작고 프레임워크가 없는 vanilla JavaScript로 컴파일합니다. 앱이 빠르게 시작되고 빠르게 유지됩니다.

Truly reactive
복잡한 상태 관리 라이브러리가 없습니다. - JavaScript 자체에 반응성을 제공합니다.

Svelte vs React

우선 기본 비교를 해보면 다음과 같습니다.

Compare	Svelte	React
Creator	Rich Harris	Jordan Walke
Company	Vercel	Meta
Creation Year	2016	2011
Performance	Very good	Good
Reactivity	Very High	High
Speed	very High	High
Bundle Size	very small	medium

 

React,Vue등과 비교해가며 조금 더 자세히 우선 표를 보겠습니다.

 

Compare	Svelte	React
Performance	use compiler	use virtual DOM
Learning Curve	similar with vanilla JS	learn JSX(JavaScript XML)
Syntax	simple syntax (HTML, CSS, JS)	little complex (JSX)

 

이 것들 중에서 Performance에 관해서 말하도록 하겠습니다.

브라우저는 웹 페이지를 출력할 때 DOM Tree -> CSSOM Tree -> Render Tree -> Layout -> Painting 과정을 거치게 되는데
DOM Tree + CSSOM Tree를 합쳐 Render Tree를 생성하며 이 과정을 Attachment라고 합니다.
생성된 Render Tree를 기반으로 Layout을 그리게 되는데 이 때 가장 많은 시간 & 자원을 사용하게 되어 최소화를 해야 합니다.
그러나 DOM을 조금이라도 움직이면 위 과정을 계속 실행하기 때문에 React, Vue에서 사용하는 Virtual DOM이 만들어지게 된 것입니다.
Virtual DOM에 대해서 간략하게 설명을 하면, DOM이 변경되면 메모리 상에 있는 Virtual DOM에서 DOM 수정을 거친 뒤 최종 Virtual DOM을 DOM에 적용하여 브라우저에 반영하기 때문에 브라우저는 단 한 번의 Layout으로 최종 결과를 출력하는 것입니다.

그러나 Virtual DOM에도 Virtual DOM끼리 비교하는 과정에서 오버헤드가 발생(그래서 shouldComponentUpdate 메서드 사용)하고, 많은 동적인 동작이 없을 때도 Virtual DOM을 생성하여 메모리를 잡아먹고 비교하는 과정에서 많은 속도를 잡아먹는 문제가 있습니다.
즉, 비교를 할때 Virtual DOM Diffing같은 기술을 사용하여 부화를 증가시켜 frame budget을 잠식시키고 가비지 컬렉터에 비용을 부과하는 문제가 있습니다.

Svelte에서는 변경 요소를 하나하나 비교하는 Virtual DOM을 사용하지 않고 빌드 시간에 변경 상황을 적용하기 때문에 컴파일러라고 불리우며 변경된 값을 빠르게 DOM에 적용시킬 수 있습니다. 추가적으로 설명을 더하면
런타임시에 코드를 해석하는 대신 build시에 코드를 JavaScript로 변환합니다.(프레임워크 추상화의 성능 비용을 지불하지 않으며 앱이 처음 로드될 때 패널티가 발생 X)
또한, dependencies 없이 devDependencies로만 구성되어 번들의 크기가 작습니다. -> 배포할 때 시간 적은 장점도 가지고 있습니다.

Svelte Life Cycle Function(beforeUpdate, onMount, afterUpdate, onDestory)

추가로 많은 문법이 있지만 Svelte의 동작 사이클을 잘 이해하기 위해서는 다음과 같은 함수들이 중요하다고 생각해서 넣게 되었습니다.

beforeUpdate

• DOM 업데이트 전(화면 렌더링 전) 실행
• 반응성있는 값 변화할 때 실행
• onMount 전에 실행

beforeUpdate(() => {
  console.log("before update");
});

onMount

• DOM 렌더링 된 후 실행
• 컴포넌트가 화면에 출력된 후에 사용
• 데이터를 가져오는 것이 좋습니다. (SSR 때문)
  이유: onDestroy를 제외하고 수명 주기 함수는 SSR 중에 실행되지 않습니다.
  즉, 구성요소가 DOM에 마운트된 후 느리게 로드되어야 하는 데이터를 가져오는 것을 피할 수 있습니다.

let data;

onMount(async () => {
  const res = await fetch(`/`);
  data = await res.json();

  return () => {
    // onDestory 함수와 같은 기능
    // onMount에 비동기 넣었을 경우 함수 return은 Promise로 onDestroy기능 무시됩니다.
  };
});

afterUpdate

• DOM이 데이터와 동기화된 후(화면 렌더링 후)
• 반응성 있는 값 변할 때 실행
• onMount 후에 실행

afterUpdate(() => {
  console.log("after update");
});

onDestroy

• 구성 요소가 소멸될 때 코드 실행(컴포넌트 연결 해지 바로 전)
• onMount에서 return와 같은 기능 (onDestroy가 먼저 실행되고 return 실행)

onDestroy(() => {
  console.log("destroy");
});

Life Cycle Function 주의 사항 및 추가 주의사항

값을 갱신시에는 beforeUpdate -> afterUpdate 만 실행하게 됩니다.
그래서 반응성이 있는 데이터를 beforeUpdate, afterUpdate에 넣으면 무한 루프가 발생할 수 있기 때문에
조건을 넣어 관리를 하거나 반응성 데이터를 넣지 않는 것이 좋습니다.

또한 변수의 갱신과 화면 DOM에 대한 갱신은 별개입니다.
Svelte가 화면을 갱신하기 위한 조건은 하나의 테스크가 끝나야 갱신이 일어나는 것입니다.
버튼을 클릭해서 변수 변환한다고 하면 이벤트 함수가 종료되어야 화면 갱신으로 이어진다는 것입니다.
그래서 tick(DOM 업데이트를 보장해줄 때까지 기다려준다.)을 사용합니다.
조금 더 설명을 하면 script 영역에 선언된 변수의 값이 변경된 후 컴포넌트 또는 DOM 요소가 DOM에 바로 적용되지 않고 체크/적용 후 DOM에 적용을 합니다. 그래서 이로인해 생긴 문제들을 해결하기 위해 tick() or onMount()를 사용하게 됩니다.

마치며

이번 회사에서 Svelte를 사용하길래 왜?라는 생각이 강했습니다. 그러나 회사에서 우선적으로 코드를 보기 쉽고 가벼운 것을 선호하였습니다.
또한 서비스를 사용하는 분들이 좋은 컴퓨터를 사용하지 않는 분들이 많다고 판단하셔서 최대한 가볍게 만들어서 배포하는 것이 좋다는 의견이었습니다. 이번 조사를 통해 Svelte의 내부 동작에 대해서는 자세히 알지 못했지만 굉장히 가볍고 직관적인 코드 스타일을 가진 프레임 워크라고 생각이 되어 기대가 됩니다.
그러나 한편으로는 React를 배우지 않았는데.... 라는 두려움도 있지만 사회에 맞는 기술은 틈틈히 공부해서 채워나가야 겠습니다.
SvelteKit을 시작으로 Vercel에서도 Svelte를 키워나가고 있는데 추후에는 React를 넘어서는 프레임워크?가 되었으면 좋겠습니다.

Ref

https://svelte.dev/
https://svelte.dev/blog/svelte-3-rethinking-reactivity
https://learn.svelte.dev/tutorial/introducing-sveltekit
https://ossam5.tistory.com/327
https://www.simform.com/blog/best-frontend-frameworks/
https://www.scaler.com/topics/react/svelte-vs-react/
https://naturaily.com/blog/why-svelte-is-next-big-thing-javascript-development
https://kyounghwan01.github.io/blog/Svelte/svelte-basic/#tick
https://kyounghwan01.github.io/blog/Svelte/svelte-basic/#lefecycle
https://svelte.dev/tutorial/onmount