Svelte와 소개팅하기

안녕하세요, 36기 YB 조성하입니다!

React, Vue 등등 익숙한 프론트엔드 프레임워크 사이에서 조용히 주목 받고 있는 Svelte, 들어본적 있으신가요?

 

저는 최근에 개발자 동기로부터 리액트보다 훨씬 간단하고 가볍다는 설명과 함께 Svelte에 대해 처음 접하게 되었는데요, 정확히 기존의 프레임워크들과 어떤 점에서 다른지, 그리고 왜 요즘 떠오르고 있는지 궁금해져서 이번 아티클 주제로 선정하게 되었습니다.

 

저처럼 처음 들어보시는 분들도 많을 것 같아서..

오늘은.. Svelte와 소개팅..(//) 정도로 알아가보아요!

---

 

Svelte란?

Svelte는 자바스크립트 라이브러리 중 하나로, React나 Vue처럼 UI를 구성하는 라이브러리이지만 React보다는 가볍고 Vue보다는 쉽다는 장점을 내세운 최신 프론트엔드 프레임워크입니다.

 

 

Svelte는 2016년에 출시된 이후 꾸준한 업데이트를 통해 발전하고 있습니다. 개발자인 Rich Harris는 Svelte를 "a framework without the framework"라고 설명하는데요, 그 의미는 Svelte의 세 가지 주요 키워드인 Compiled, Compact, Complete에 담겨 있습니다.

 

Compiled

Svelte와 기존의 익숙했던 JS 라이브러리들을 비교했을 때 가장 큰 차이점은 '컴파일 시점에 모든 것을 처리'한다는 점입니다. 즉, 동작 중에 화면을 그리는 프레임워크가 아니라는 것입니다.

 

 

.svelte 파일로 작성한 코드는 빌드 과정에서 최소한의 바닐라 JS로 변환되고, 이후에는 어떠한 런타임도 필요 없이 브라우저에서 바로 실행됩니다. 그렇기 때문에 런타임 오버헤드가 거의 없고, 번들 크기도 작으며, 동작 속도 또한 매우 빠르다는 장점이 있습니다.

 

이러한 접근 방식은 Virtual DOM을 사용하는 기존 프레임워크보다 렌더링과 전환을 더 빠르게 가능하도록 해줍니다.

 

Compact

Svelte의 문법은 아주아주 간결합니다. React에서는 상태를 관리하려면 useState나 useEffect와 같은 훅 개념들을 익혀야 하지만, Svelte에서는 HTML과 JS 등등 이미 알고 있는 언어를 사용해서 간단하게 코드를 작성할 수 있습니다.

 

다른 프론트엔드 프레임워크에 비해 작성해야할 코드들이 적고, 특정한 기능을 구현하기 위해 가독성은 떨어지지만 어쩔 수 없이 작성해야 하는 보일러 플레이트 코드가 거의 없다고 합니다. 그래서 Svelte는 이렇게 리액티브한 문법을 큰 강점으로 내세우고 있습니다.

 

Complete

Svelte는 반응형 선언 방식을 통해 상태 변화를 자동으로 감지하고 UI를 업데이트합니다.

 

의존성 배열을 추적하는 React의 useEffect와 비슷한 기능을 하지만, 컴포넌트 내부의 어떤 값이라도 반응형 선언에 사용할 수 있고, 별도 훅이나 상태 관리 없이 코드 한 줄이면 어떤 값이 다른 값에 의존해서 변할 때 그 계산을 자동으로 다시 실행하도록 만들 수 있습니다.

 

또 Svelte는 컴포넌트 기반 아키텍처를 채택하여 HTML, CSS, JS를 한 파일에 통합하고 컴포넌트를 작성할 수 있도록 하여 코드 재사용성과 유지보수성을 높여줍니다.

 

 

 

어떤 프로젝트에 사용하면 좋을까?

 

>> 작고 빠른 웹앱, 성능이 중요한 환경

 

Svelte는 빌드 타임에 코드를 최적화해주기 때문에 성능이 중요하게 작용하는 상황에서 강점을 가집니다!

1. 모바일 웹앱이나 PWA:
   느린 네트워크 환경에서도 빠르게 로드되어야 하는 경우
2. 임베디드 UI 컴포넌트:
   다른 시스템에 삽입되는 위젯처럼 메모리 사용량과 로딩 속도가 중요한 환경
3. 데이터 시각화 대시보드:
   변화가 많은 UI에서 리렌더링을 최소화해 바른 반응 속도가 필요한 경우
4. 사이드 프로젝트나 프로토타이핑:
   빠른 개발 속도, 적은 설정, 직관적인 문법으로 빠르게 MVP를 만들어야 할 경우

 

하지만 규모가 큰 앱이나 복잡한 상태 관리가 필요한 서비스에서는 React나 Vue만큼의 지원이 아직 충분하지 않을 수 있으므로 신중하게 사용하는 것을 권장한다고 합니다!

 

 

Svelte 생태계와 커뮤니티

 

Svelte도 React나 Vue처럼 커뮤니티가 크고, 유지보수는 잘 되고 있을까요?

https://svelte.dev/

Svelte는 SvelteKit라는 공식 풀스택 프레임워크와 함께 성장 중이고, 최근에는 Vercel에 인수되면서 장기적인 지원 가능성도 높아졌습니다. 공식 문서도 깔끔하게 정리되어 있고, Discord나 Reddit과 같은 커뮤니티도 꽤 활발한 편이라고 합니다.

 

다만, React만큼의 라이브러리 다양성이나 기업 채택 사례는 아직 제한적이지만, 강력한 장점을 가지고 있는만큼 조금씩 입지를 넓혀나가고 있습니다.

 

그래서 지금은 '작고 빠른, 웹앱에 실전 투입도 가능한 프론트엔드의 신흥 프레임워크' 정도로 보면 좋을 것 같습니다!

 

---

 

마무리하며

Svelte는 가볍게 도전해볼만한 아주 매력적인 선택지라는 생각이 듭니다.

한 번 써보면 간결하고 빠른 성능에 반해 "강추"를 외치는 개발자들이 꽤 있다고 하더라고요!! 

 

 

이번 아티클을 준비하면서 저도 나중에 기회가 된다면 간단한 프로젝트에라도 한번 사용해보고 싶다는 생각을 했어요.

 

빠르고 가벼운 웹 서비스를 더 쉽게 만들어보고 싶다면, Svelte 여러분도 한번 도전해보세요!!