[Svelte] 스벨트란 무엇인가? Reactive App 개발을 위한 새로운 접근법

 

 

요즘 관심가는 기술 중 하나인 스벨트(Svelte)에 대해서 차근 차근 공부해보려고 한다.

 

Svelte(스벨트)란?

스벨트가 뭔지 궁금해서 Svelte 홈페이지에 들어가서 소개문을 읽어보았다.

 

Svelte is a tool for building fast web applications.

Svelte는 빠른 웹 어플리케이션을 구축하기 위한 도구이다.

 

It is similar to JavaScript frameworks such as React and Vue, which share a goal of making it easy to build slick interactive user interfaces.

Svelte는 interactive한 유저 인터페이스를 구축한다는 데 있어 React나 Vue와 같은 JavaScript 프레임워크, 라이브러리와 비슷하다.

But there's a crucial difference: Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at run time. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads.

그러나 매우 중요한 차이점이 있는데, Svelte는 우리의 앱을 실행 시점(Run time)에 해석하는 것이 아니라 빌드 시점(Build time)에 JavaScript로 변환한다. 이 말의 의미는 프레임워크 추상화를 위한 퍼포먼스에 더 이상 비용을 들이지 않아도 된다는 뜻이다. 그리고 앱의 첫 로드 시에도 빠른 구동이 가능하다.

 

You can build your entire app with Svelte, or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere, without the overhead of a dependency on a conventional framework.

전체 앱을 Svelte로 구축할 수도 있고, 이미 존재하는 코드 베이스에 점진적으로 적용할 수도 있다. 또한 전통적인 프레임워크와의 dependency와 상관없이 어디서든 사용할 수 있는 독립적인 컴포넌트로 만들어 사용할 수도 있다.

 

---

그러니까 Svelte는 Reactive web app과 interface를 만드는 데 사용되는 Compiler이다. 여기서 주목해야 할 단어는 Reactive와 Compiler이다.

 

Reactive app이라는 것은 이런 의미이다. 만약에 오늘 날씨를 보여주는 앱이 있다고 하자. 앱에 날씨 정보를 상태 값으로 저장한 후 날씨가 바뀔 때마다 상태 값이 업데이트될 것이다. 그리고 날씨가 바뀌어 상태 값이 변경되는 즉시 브라우저에 반영해주어야 한다. 이렇게 상태의 변화가 즉각적으로 반영되는 앱들을 reactive라고 한다.

 

이러한 Reactive app을 구축하기 위해 많은 개발자들이 Angular, Vue, 또는 React와 같은 프레임워크, 라이브러리 등을 이용했다. (React는 심지어 이름부터 "React"다. 😂) Svelte는 이렇게 Reactive app을 만드는 데 사용된다는 점에 있어서 React와 같은 기존 라이브러리와 유사하다. Svelte는 SPA(Single Page Application) 전체를 개발하거나 혹은 페이지의 작은 일부분을 개발할 때 사용 가능하다.

 

그렇다면 Svelte가 기존의 React같은 라이브러리와 다른 점이 무엇일까?

 

 

Svelte와 React의 차이

Framework가 아닌 Compiler

Svelte는 Framework가 아닌 Compiler이다. 즉, 기존에 React와 같은 라이브러리는 production 배포 시 React 라이브러리 자체가 같이 배포되며, 실행 시점에 우리 앱의 코드들을 해석한다. 

 

그러나 Svelte는 실행 시점이 아닌 빌드 시점에 모든 코드들을 single vanilla JavaScript 번들로 컴파일한다.

 

기존의 React와 같은 프레임워크 라이브러리들을 생각해보자. 프로젝트를 컴파일하기 위해 우리는 Webpack과 Babel 등을 호출하여 프로젝트 파일들을 번들하고, React와 React-dom 라이브러리 또한 번들에 포함된다. 반면에 Svelte는 컴파일러이기 때문에 자체적으로 컴포넌트를 컴파일한다. 또한 Rollup(Webpack과 비슷한 모듈 번들러)의 트리 쉐이킹을 잘 활용하여 실제 코드에서 사용하는 부분만 번들링한다.

 

즉, Svelte로 앱을 만든 후 빌드하면 단 하나의 자바스크립트 파일이 생성되어 이 파일 하나만 배포하면 되고 Svelte 라이브러리는 배포할 필요가 없다. 그렇기 때문에 Svelte로 만든 결과물들은 대개 앱 running이 매우 빠르다.

 

 

No Virtual DOM

React는 가상 DOM을 사용하는 대표적 프레임워크 라이브러리이다. 우리가 React에서 render() 메소드를 사용해 component를 만들면, 가상 DOM 객체가 만들어진다. 앱의 상태가 업데이트되는 매 순간마다 새로운 가상 DOM 객체가 만들어진다. 프레임워크의 업무는 실제 DOM과 가상 DOM을 비교해서 진짜 필요한 변화만 실제 DOM에 적용하는 것이다. 

 

React 팀은 라이브러리를 런칭하면서 대부분의 DOM operation은 매우 느리기 때문에 가상 DOM을 이용하여 필요할 때만 실제 DOM을 업데이트하는 방식이 매우 빠르다고 설명했다. 그리고 또한 React는 state가 업데이트되어 매 번 전체 앱을 다시 렌더할 때 성능에 대한 걱정이 전혀 필요없다고 말해왔다.

그러나 현실은 모든 경우에 가상 DOM 방식이 빠르고 좋은 것은 아니다. 만약 정말로 React가 주장한대로 re-render 시에 성능을 걱정할 필요가 전혀 없다면, shouldComponentUpdate와 같은 Life Cycle이 생기지 않았을 것이다.

 

가상 DOM과 실제 DOM을 비교하는 작업은 많은 에너지를 소모한다. 만약 어떤 컴포넌트에서 name이라는 prop이 'John'에서 'Sam'으로 바뀌었다고 해보자. 가상 DOM과 실제 DOM을 비교하여 업데이트하는 과정은 간단하게 다음과 같이 설명할 수 있다.

 

function HelloMessage(props) {
  return (
    <div className="greeting">
      Hello {props.name}
    </div>
  );
}

 

1. 기존 스냅샷과 새로운 스냅샷은 동일한 div를 가지고 있을 것이다.
2. 기존 div의 모든 attribute를 새로운 div와 비교하여 하나라도 변경된 것이 있는지 확인한다. (이 경우에는 className이라는 attribute만 존재하며 변경되지 않았다.)
3. 자식 요소들을 모두 비교한 후 text 요소만 변경된 것을 확인하여 실제 DOM을 업데이트한다.

위 케이스의 경우 1, 2, 3번 중에서 3번만 의미가 있는 작업이다. 따라서 1, 2번을 생략하고 바로 3번 작업만 수행하게 된다면 지금보다 훨씬 효율적일 것이다! 그리고 이 것이 바로 Svelte의 컨셉이다.

 

즉, Svelte는 실제 DOM에 변경 사항을 적용하기 전에 diff를 비교하고 컴포넌트를 그리기 위한 시간을 소비하는 과정을 모두 생략하고 바로 실제 DOM을 변경한다. 또한 어떤 요소에 변화가 일어나는 지 알고 있기 때문에 빠르게 타겟 요소만 변경할 수 있다.

 

Svelte는 가상 DOM을 사용하지 않고도 React와 비슷한 프로그래밍 모델을 사용할 수 있도록 만들었고, 그 덕분에 매우 빠른 성능적 이점이 있다.

 

 

---

 

넘나 재미있는 컨셉이고 실제로 React로 만든 앱보다 실행 속도가 얼마나 빠를 지 궁금하다.

얼른 공부해서 이것 저것 만들어봐야겠다.

 

(Svelte 웹 사이트를 대충 둘러보니 정리가 매우 잘 되어 있어서 좋다. ☺️)

 

 

https://svelte.dev/

Svelte • Cybernetically enhanced web apps