Svelte
Svelte는 새롭게 웹 개발 생태계의 강자로 떠오르고 있는 개발 도구입니다.
특징
Svelte가 주장하는 자신들의 세 가지 특징이 있습니다.
- 적은 코드
- 가상 DOM을 사용하지 않는다
- 진정한 반응성
적은 코드
Svelte를 이용하여 직접 Todo 앱을 만들어 본 결과, Hook처럼 다른 프레임워크에서 사용할만한 부분들을 사용하지 않아 차지하는 코드의 양이 적어지는 것이 체감되었습니다.
다만 단순 Todo앱만 개발해 보았기 때문에 실제 현업에 적용했을 때도 코드가 간결해질지는 아직 잘 모르겠습니다.
가상 DOM을 사용하지 않는다
제가 Svelte를 라이브러리나 프레임워크라고 칭하지 않는 이유도 이 특징에서 비롯합니다.
공식 문서에서도 Svelte를 개발 툴이라고 칭하고 있죠.
Virtual DOM 원리
React와 Vue는 UI의 원본을 메모리에 집어넣고 실제 사용자에게는 모습이 보이지 않는 상태로 관리하는데, 이를 Virtual DOM이라고 부릅니다.
해당 Virtual DOM과 연결 된 State가 변경되면 우선 메모리에서 변경 된 상태를 집어넣은 UI를 가상으로 그린 후에 이를 실제 화면에 반영하는 형태로 구성되어 있습니다.
하지만 이 방식은 한가지 문제점이 있는데, 브라우저 상에 UI를 표시하는 과정에서 Reflow 과정을 피할 수가 없습니다.
Reflow는 화면 상에서 Layout들이 배치 되어 있는 구조를 나타낸 Tree를 Layout의 변경 등으로 인해 재탐색 하는 것을 말합니다.
Reflow는 렌더링 과정에서 가장 많은 자원과 시간을 쏟는 작업인데, Virtual DOM 과정으로 UI를 변경하게 되면 Virtual DOM을 어디에 배치해야 할 지 레이아웃 구조를 처음부터 다시 살펴보기 때문에 탐색 과정을 피할 수 없는 것입니다.
Compile 원리
반면 Svelte는 Virtual DOM 방식이 아닌 Compile 방식을 사용하기 때문에 어떤 변수가 어떤 UI에 묶여있는지 이미 알고 있는 상태에서 시작합니다. 그러므로 해당 변수를 건드리는 이벤트가 실행이 된 것을 감지한다면, 변경된 값은 이미 들고 있고 해당 값을 어디에 배치해야 하는지도 알고 있으니 Reflow 과정 없이도 즉각적으로 UI를 다시 그릴 수 있는 것입니다.
번들 파일의 가벼움
심지어 Compile 타임에 UI와 Javascript 로직에 대한 연결을 모두 끝내놓으니 React나 Vue처럼 Runtime에 관여할 이유가 없기 때문에 Runtime 로직을 번들 과정에서 제거하게 됩니다. React, Vue, jQuery의 경우에는 사용자가 해당 서비스에 접속했을 때 개발자가 작성한 코드와 함께 React, Vue, jQuery 라이브러리도 같이 다운 받습니다. 해당 코드가 없으면 서비스가 동작할 수 없기 때문이죠.
하지만 Svelte는 위에 기재한 이유로 Runtime때 관여하지 않아도 서비스가 동작하기 때문에 번들 파일이 굉장히 가벼워진다는 장점이 있습니다. Svelte 패키지가 빠지니까요.
진정한 반응성
위에 장황하게 설명해놓은 점에서 비롯합니다.
Virtual DOM 방식은 이벤트를 감지하면 Virtual DOM에서 UI를 완성하여 Reflow를 거쳐 Repaint를 진행합니다.
물론 사용자는 알 수 없는 차이겠지만 버튼을 누르자마자 바로 반영하는 것이 아니기에 즉각적인 반응을 한다고 보기는 어렵다는 것이죠.
반면, Svelte는 이벤트를 감지하면 Repaint를 바로 진행하기 때문에 즉각적으로 반응한다고 볼 수 있습니다.
후기
이제서야 본문이 나온 것 같은데, 결론부터 말씀드리자면 Svelte의 개발 경험은 굉장히 긍정적이였습니다.
물론 if, each, export와 같은 기본적인 로직만을 사용해봤지만 기본적으로 Vue와 코드 구조가 비슷하여 접근하기가 쉬웠고, React처럼 개발 도구에 의존적이지 않은 자유분방한 코드를 작성할 수 있었기 때문입니다.
Tutorial 페이지가 정말 잘 만들어져 있다는 점도 무시할 수 없겠군요.
이제부터 가볍게 무언가를 만들어야 할 상황이 온다면 Vue보다는 Svelte를 쓰지 않을까 생각마저 하게될 정도로 너무 좋은 경험이였기에 평소에 Vue를 이용하여 웹 개발을 하고 계셨던 분들이라면 한 번 쯤 찍먹해 보시라고 추천해드리고 싶습니다.
요약
- Vue와 코드 스타일이 비슷하여 접근성이 좋음
- 그렇다고 막 Vue처럼 Framework의 문법을 강요하는 느낌도 아님. Vanila Javascript 쓰는 느낌임.
- 생각한대로 프로그램이 만들어짐
- 튜토리얼 페이지가 정말 잘 만들어졌다 못해 아름다움.