Svelte의 특징 및 개념

1.1 스벨트란?

Svelte는 2016년에 출시한 오픈 소스, 웹 프론트엔드 프레임워크입니다.

svelte의 영어 뜻은 날씬한, 호리호리한 이라는 뜻으로 기존에 여러 플러그인을 설치하여 무겁게 사용했던 웹 프론트엔드 프레임워크들과 다르게 순수 자바스크립트를 이용하여 보다 가볍게 사용하는 프레임워크라는 뜻을 담고 있습니다.

"Frameworks without the framework”

따라서 “스벨트는 프레임워크 없는 프레임워크” 입니다.

1.2 Svelte 의 장단점

1.2.1 Svelte 장점

• Wirte less code! 스벨트는 적은 코드로 높은 가독성을 유지하고, 개발 시간을 단축시켜줍니다. 가독성이 좋기 때문에 리팩토링이 보다 쉬워지며 쉬운 디버깅, SPA에 최적화된 더 작은 번들 사용, 낮은 러닝 커브가 장점입니다.
  
• No virtual DOM! virtual DOM은 DOM에 직접 접근하여 조작하는 것이 아닌, 가상돔을 만들어 비교하여 조작하는 방법입니다. 이렇게 가상돔을 통해 diffing작업을 하는 다른 프레임워크들과 다르게 svelte는 virtual DOM을 사용하지 않고도 DOM을 가볍게 제어할 수 있습니다. 웹팩[webpack]을 이용해서 번들링 하는 과정 | 출처 : https://webpack.js.org/
  

💡 번들링이란 복잡한 DOM이나 CSS, 요소들을 나눠 Node.js로 작업하고 배포 시 하나의 파일로 모이게 만드는 것을 말합니다.

번들링 과정에서 여러 js파일들은 하나의 js파일로 모이고, sass나 css파일은 하나의 css로 모이게 됩니다.

리액트나 뷰`는 이 과정에서 자신의 규칙과 패턴으로 이루어진 자신의 언어로 js파일로 들어가며 브라우저가 인식할 수 있도록 라이브러리도 함께 들어갑니다.

그러나 Svelte는 이 과정에서 언어를 컴파일만 하고, 순수 자바스크립트로 들어가게 되기 때문에 Svelte는 프레임워크라고 소개하지 않고, 최적화된 자바스크립트로 변환하는 컴파일러라고 소개합니다.

또한 라이브러리 없이 순수 자바스크립트로 들어가기 때문에 빌드 될 때 용량이 작아진다는 장점도 생기게 됩니다.

• Truly reactive! 스벨트는 반응성이 좋습니다. 하나의 이벤트가 발생할 때 나머지 이벤트들이 자동으로 발생할 수 있습니다
  

1.2.2 Svelte 단점

• Svelte는 아직까지 대중적으로 사용하고 있지 않기 때문에 낮은 성숙도, 다양한 소스코드나 플러그인들이 많지 않은 작은 생태계라는 점이 단점이라고 볼 수 있습니다.
• Svelte는 IE를 지원하지 않습니다.