svelte란?

요즘 개발자 블로그나 유튜버 개발자 채널 등을 보면 svelte를 소개하는 게시물을 적잖이 접한다.

국내에서 프론트엔드 프레임워크로 React, vue가 대중적인 인기를 끌고 있고 현재 기업의 웹 서비스도 두 프레임워크를 중심으로 도입하고 있는 곳이 많이 있는 한편 최근에는 svelte로 구현되어 있는 웹 서비스도 있으며 심지어 개발자 채용을 보면 svelte 개발자를 찾는 기업도 적잖이 보았다.

이렇게 svelte가 무서운 기세(?)로 핫해지는 이유는 뭘까 궁금해서 공식사이트에서 설명하는 svelte는 무엇인지 알아보았고 최근에는 공식 사이트 튜토리얼을 통해 svelte를 공부하고 있다.

 

그럼 svelte는 무엇인가?

구글로 검색하면 바로 확인할 수 있듯이 Rich Harris가 개발하였으며 Svelte 핵심 팀 구성원이 유지 관리하는 무료 오픈소스 프론트 엔드 컴파일러이다.

흔히 프론트엔드를 개발하면 React, angular, vue와 같은 프레임워크나 라이브러리를 떠올리지만 갑자기 컴파일러가 나와서 의아해할 수도 있다.

컴파일러는 간단하게 말하자면 소스코드를 빌드시에 바이너리코드로 만들어주는 도구로 덕분에 코드의 실행속도가 빠르다는 장점이 있다.

이러한 컴파일러의 장점을 살려서 svelte를 사용하면 좋은 점과 그 외 편리한 점 등을 다음과 같이 설명할 수 있다.

 

svelte의 장점

1. 가상 DOM을 사용하지 않는다.

가상 DOM은 메모리상에서 바뀔 DOM만 수정하여 실제 DOM에 반영하기 때문에 렌더링 속도가 빠르다는 장점을 들고 있다.

하지만 가상 DOM은 결국 브라우저 환경에서 즉 런타임에서 실행되는 것이기 때문에 런타임이 아닌 빌드타임에 해당 작업을 미리 해놓는 svelte가 더 렌더링 속도가 빠르다.  

 

2. 적은 코드량

흔히 React, vue, angular 등과 같이 많은 보일러플레이트를 작성해야 하는 것에 비해 svelte는 보일러플레이트 없이 컴포넌트를 간편하게 작성할 수 있다.

 

3. 리액티브한 상태관리

리덕스와 React의 useState, useContextAPI의 경우 상태 값을 관리할 경우 콜백함수를 실행하거나 상태관리 라이브러리 만의 데이터 흐름 규칙을 이해하여 기존의 상태 값을 변경해야 한다.

하지만 svelte의 경우 기존의 상태값을 할당한 변수에 새로운 값을 재할당하는 개념으로 간단하게 상태 값을 갱신해준다.

그렇기 때문에 상태 값을 변경하기 위한 라이브러리나 프레임워크만의 특유의 데이터 흐름을 이해할 필요가 없이 상태 값을 할당한 변수에 새로운 값을 재할당함으로써 해당 상태값을 참조하는 여러 컴포넌트에서도 갱신된 상태값을 참조하도록 리액티브하게 상태를 관리해주는 장점이 있다. 

 

현재 svelte를 짬이 날 때 공부하면서 적은 코드량으로 UI 렌더링 및 상태관리를 간편하게 할 수 있어 매우매우 만족하고 있다.

아직 svelte를 공부한지 얼마 안되서 불편한 점은 크게 느낀 건 없지만 추후에 새롭게 느낀 것이 있으면 게시물로 설명하고자 한다.

 

참고 : https://svelte.dev/

Svelte • Cybernetically enhanced web apps