Svelte는 Rich Harris가 제시한 새로운 접근 방식을 가진 Front-End framework이다. 2016년 1.0 버전, 2018 2.0 버전, 2019년 3.0버전을 출시하였고 3.0버전부터 주목을 받기 시작했다. Vue나 React에 비해서 비교적 늦게 출시되었으나 front framework들을 비교한 한 사이트에서는 아래와 같이 만족도가 제일 높은 프레임워크(실제 동작을 보면 컴파일러에 가깝다)로 꼽히기도 했다.
https://2019.stateofjs.com/front-end-frameworks/ 프론트엔드 프레임워크 만족도 랭킹
Svelte의 특징
앞 문단에서 Svelte는 기존에 비해 새로운 접근 방식을 지닌 framework라는 언급을 했다. 그렇다면 Svelte는 기존의 Vue, React, Angular와 같은 framework들과 무엇이 다를까? svelte.dev 공식 사이트에 들어가 보면 크게 3가지의 특징이 나열되어 있는데 이는 다음과 같다.
Svelte의 대표적 특징 3가지
Write less code 간단한 덧셈 예제에 대한 세 프레임워크의 코드양 차이
위 그림은 두 개의 input 박스에 숫자를 입력받아 두 숫자의 합을 출력하는 간단한 예제를 Svelte, Vue, React로 각각 구현한 예제이다. 각 프레임워크의 문법은 제쳐두고 한 눈에 보더라도 동일한 기능을 구현했음에도 불구하고 Svelte의 코드량이 훨씬 적은 것을 확인할 수 있다.
Svelte는 이렇게 코드량이 적음으로 인해서 높은 가독성 유지, 개발 시간 단축, 보다 쉬운 리팩토링과 디버깅, SPA 최적화, 낮은 러닝 커브의 장점을 가진다.
No virtual DOM virtual DOM 현재 많이 쓰이고 있는 Vue나 React는 가상 DOM과 이전 Snapshot의 차이를 감지하여 변경된 부분만 렌더링을 갱신하는 방식을 쓰고 있다. 이렇게 두 DOM의 차이를 감지하는 것을 Diffing이라고 하며 이러한 과정을 그림으로 나타내면 아래와 같다. Virtual DOM Diffing
이러한 virtual DOM 방식을 사용하면 화면 전체를 갱신하지 않아도 되지만 virtual DOM을 생성하고 실제 DOM과 비교하는데 오버헤드가 걸릴 수 있다.
Svelte는 가상 DOM을 사용하지 않기 때문에 변경된 부분의 DOM을 갱신하는 동작은 존재하지만 가상 DOM과 Snapshot을 비교하는 Diffing 과정이 존재하지 않으며 따라서 오버헤드에 대한 걱정도 덜 수 있다(성능 향상).
Truly reactive Svelte는 다른 front-end-framework들과는 다르게 런타임에 실행되지 않으며 빌드 시에 동작하게 된다. 더 정확히 말하자면 Svelte의 문법으로 작성된 파일은 빌드 시에 Svelte에 의해 Vanilla JS로 컴파일되며 컴파일 된 js가 브라우저에서 실행되게 된다.
런타임에 실행되지도 않고 가상 DOM도 사용하지 않는다면 Svelte는 과연 어떻게 변화를 감지할 수 있을까? 앞에서 말했듯이 Svelte는 프레임워크 보다는 컴파일러로 동작하기 때문에 작성된 코드를 컴파일 하는 과정에서 어떤 경우에 데이터가 변경될 수 있는지를 미리 파악한다. 따라서 React와 같이 별도의 Setter를 사용하지 않고도 변수의 값만 변경하면 그것을 감지하여 동작할 수 있다. Svelte 문법으로 작성한 예제
위 예제를 보면 button이 눌리는 순간 익명함수를 통해 name 변수의 값이 변경되는 것을 컴파일 시점에 알게 되고 그것을 vanilla JS에서 이벤트 핸들러로 등록하게 된다. Svelte로 컴파일된 vanilla JS 파일 일부
이렇게 Svelte는 컴파일러로 동작하기 때문에 런타임에 별도의 라이브러리가 필요없고 개발 시에 devDependencies만 사용하여 개발해서 배포할 수 있다.
단점
앞에서는 장점만 나열했지만 모든 프레임워크가 다 그렇듯 Svelte 또한 단점을 가지고 있다.
Svelte는 등장한 지 얼마 되지 않았기 때문에 생태계가 매우 작다는 단점이 있다. 또한 런타임에 동작하지 않기 때문에 CDN으로 제공될 수가 없으며 비교적 최신에 등장했기 때문에 IE를 공식적으로 지원하고 있지는 않다(폴리필을 이용하면 가능하기는 함).
여기까지 Svelte의 기본 개념과 특징들에 대해 정리해 보았다. 아직 기술적 숙성도는 높지 않지만 프론트 엔드 개발자들 사이에서 서서히 관심이 높아져가고 있고, 토이 프로젝트에 적합하다는 평을 듣는 기대가 되는 프론트 엔드 프레임 워크라고 생각한다.
최근 토이프로젝트로 간단한 프론트 웹을 만들 일이 생겼는데 앞으로 Svelte의 기본 문법을 학습한 후에 간단하게 사용해볼 예정이다.
댓글