광복절인 오늘, 오랜만에 글을 적는다.
요즘 진행하는 프로젝트의 기술 스택이 스벨트라, 새롭게 학습하면서 느꼈던 점들을 리액트와 뷰와의 비교를 통해 설명하고자 한다. 해당 글은 특히 스벨트의 관점에서 바라보는 글이다.
먼저 스벨트의 개념에 대해 알아보자.
Svelte(스벨트)
스벨트는 개발자 Rich Harris에 의해 2016년에 출시된 오픈 소스 프론트엔드 웹 프레임워크이다. 리액트와 달리 가상돔을 사용하지 않는 것이 큰 특징이며, 빌드 단계에서 구성 요소를 컴파일하여 성능이 향상됐다.
스벨트는 라이브러리나 프레임워크가 아닌 컴파일러이다. 리액트나 뷰와 같은 다른 프레임워크들은 모두 런타임 환경에서 실행되기 때문에 프레임워크를 돌리기 위한 엔진이 소스코드에 포함돼 있지만 스벨트는 빌드 타임에 소스코드를 해석하고 가장 최적화된 작은 번들로 컴파일 되기 때문에 빠르고 성능이 좋다는 장점이 있다.
스벨트의 특징
1. 컴파일러
Svelte는 컴파일러다. HTML 템플릿 돔을 직접 조작하는 특수 코드로 컴파일하므로 전송된 파일의 크기를 줄이고 브라우저 성능을 향상시킬 수 있다. 기본적으로 빌드 단계에서 구성 요소를 컴파일하는 도구이므로 페이지에 단일 번들(bundle.js)을 로드하여 앱을 렌더링할 수 있다.
2. 가상돔이 없다
리액트의 경우 가상돔을 사용하며 각 요소를 만들면 가상돔 객체가 만들어지고 실제 돔과 가상돔을 비교하여(diffing) 변경 사항을 실제 돔에 반영하는 형태로 동작한다. 새로운 Virtual DOM을 이전 Snapshot들과 비교하거나, 상태 변화에 따른 새로운 가상 요소 생성 등 오버헤드가 발생할 수 있으며 실제 DOM을 업데이트 하는 과정이 필요하다. 그러나 스벨트는 리액트의 이런 과정을 모두 생략하고 구성 요소의 변경을 실제돔에 바로 반영한다. 실제돔을 직접 변경하기 때문에 document.querySelector 등을 활용하여 실제돔에 접근하고 제어하기 간편하다.
3. 적은 코드양, 번들 크기
일반적으로 리액트 컴포넌트는 스벨트 컴포넌트보다 40% 가량 코드 양이 더 많다고 한다. 아래는 동일한 기능을 하는 코드의 실제 번들 크기의 비교 그래프이다. 수치가 작을수록 번들 크기가 작다는 의미이며, 번들 크기가 작을수록 다운로드 및 파싱 시 더 빠르다. (일반적으로 코드의 양이 적어지면 번들 크기도 작아지고 로딩 속도가 빨라지기 때문에 앱의 성능이 좋다.)
4. 성능 비교
아래는 각 프레임워크들의 성능을 비교한 그래프다. 수치가 높을 수록 성능이 뛰어난 것이다.
5. 양방향 바인딩
스벨트는 부모가 자식으로 전달한 props에 bind 지시어를 더하여 양방향 바인딩을 구현할 수 있다. 이와 비슷하게 vue 에서는 v-model을 통해 양방향 바인딩을 지원하고 있다. 그러나 리액트에선 양방향 바인딩을 위한 장치가 없어 별도로 처리해야 한다.
6. 반응성
반응성은 변경된 값이 DOM에 자동으로 반영됨을 의미한다. 필자의 경우도 스벨트를 사용할 때 이 반응성을 많이 활용했었다. $달러 표시를 통해 작성하면 되고, $달러로 나타낸 상태값이 변경되면 자동으로 리렌더링이 나타나는 구조다. 별도의 setter 없이 값의 할당만으로 업데이트를 트리거 할 수 있다. 리액트는 변경된 값을 돔에 자동 반영하지 않는다. 훅(useState)를 사용하여 상태값을 변경하여 이를 반영하는 구조다.
스벨트와 리액트의 비교
스벨트를 활용하여 프로젝트를 할 때 가장 많이 느꼈던 건 스벨트가 물론 성능도 좋고 사용하기에 직관적이긴 하지만, 아직까지 마이너한 기술이지 않나 싶었다. 그 동안 커뮤니티가 크다는 게 언어나 프레임워크에 있어 엄청난 장점이라고 생각한 적이 없었는데, 스벨트를 사용해보니 절실히 느껴졌다. 커뮤니티를 통해 많은 문제가 해결되고, 또 활용할 수 있는 관련 라이브러리가 많다는 건 엄청난 장점이라는 걸 느꼈다. 이는 곧 개발 속도와 효율성을 높이는데 도움을 주기 때문이다. 이번 프로젝트 기회로 스벨트를 경험해본 만큼 개발자로서 커뮤니티에 기여할 수 있는 방법은 무엇일지 고민해보면 좋을 거 같았다. 간단한 스벨트 라이브러리를 직접 만드는 도전을 할 수도 있을 것 같다..!
결론
사실 어떤 도구가 더 유용한지 결정하기란 쉽지 않고, 최신 트렌드를 무조건 따르기 보다 본인의 프로젝트의 문제를 효율적으로 해결할 수 있는 기술을 선택하는 것이 좋을 것 같다. 많은 기술이 필요하지 않고, 작은 규모의 프로젝트를 빠르게 제작할 때는 스벨트가 굉장히 편리할 것 같았다.
기타 스벨트를 학습하기 좋은 자료의 링크를 남깁니다.
저는 실제 프로젝트 전 다음 자료들을 통해 스벨트 기본 사용 방법을 익혔습니다.
스벨트 공식홈
Svelte • Cybernetically enhanced web apps
Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Instead of using tec
svelte.dev
HEROPY 님의 블로그 및 무료 인강 강의
https://heropy.blog/2019/09/29/svelte
Svelte.js 완벽 가이드(Renew)
Svelte는 Rich Harris가 제작한 새로운 접근 방식을 가지는 프론트엔드 프레임워크입니다. Svelte는 자신을 '프레임워크가 없는 프레임워크' 혹은 '컴파일러'라고 소개합니다. 이는 Virtual(가상) DOM이 없
heropy.blog
https://www.inflearn.com/users/@heropy
HEROPY님의 소개 - 인프런 | 온라인 강의 플랫폼
인프런 HEROPY님의 소개 페이지 입니다. - HEROPY님 소개 | 인프런...
www.inflearn.com