[Svelte] 스벨트, sapper, 스벨트 킷 차이점 정리

안녕하세요, 성조입니다.

요즘 회사에서 웹 프론트 프로젝트를 새로 만드는 담당하고 있다 보니 프레임워크에서 스벨트가 Next.js와 Vue.js 보다 가볍게 개발하기 좋고 준수한 러닝 커브를 가지고 있다는 얘기를 듣고 관심을 가지고 공부하기 시작했어요.

 

만들고자 하는 프로젝트가 복잡도가 높지 않고, PoC 수준에서 조금 덧 붙인 MVP 레벨의 기능을 목표로 하고 있기 때문에 공부하기 시작했습니다. 스벨트를 도입하려고 공부하다 보니 초기에  관심이 생길 수 있는 부분들을 이번 주제를 정하게 됐습니다.(쉽게 찾을 수 있는 내용이지만, 정리해봤어요 🫡)

---

스벨트(Svelte)와 Sapper, 스벨트 킷(SvelteKit)는 모두 Svelte 생태계에서 웹 애플리케이션을 구축하는 데 사용되는 도구이지만, 다른 목적과 기능을 가지고 있다.

 

 

https://svelte.dev/docs/kit/introduction

Introduction • Docs • Svelte

공식 홈 페이지를 참조하면 스벨트는 단일 UI 컴포넌트 레벨에서 페이지를 만들 수 있지만, SSR, SSG, 파일 기반 라우팅, 다중 페이지 앱을 만드는 기능이 부족하다. 그래서, 나온 것이 Svelte Kit이다.

뒤에 추가로 설명하겠지만, Sapper가 정식 버전인 1.0 ver으로 출시되면서 변경된 이름이 Svelte Kit이다.

 

스벨트(Svelte)

스벨트에서 얘기하는 컴포넌트 기반 개발은 사용자 인터페이스 즉, UI를 작은 재사용 가능한 단위인 컴포넌트 단위로 나누어 관리하는 방식을 말한다. 각 컴포넌트는 자체적인 상태와 UI를 관리하며, 다른 컴포넌트와 독립적으로 동작하게 되는데 <script>, <style>, <template>로 구분되어 구성되어 있다.

 

 

스벨트 킷(SvelteKit)

스벨트 킷은 스벨트에서 부족한 페이지 라우팅, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 프리렌더링, 데이터 패칭 및 상태 관리, 빌드 최적화, 코드 스플리팅, PWA 지원, 이미지 최적화, Vite와 HMR 기능들을 제공해 주는 프론트 엔드 개발 프레임워크이다.

Express.js가 없이 React만 사용하는 경우 간단한 api를 개발할 수 없어서 Next.js가 등장했다면 Svelte Kit는 Svelte의 프론트 개발을 도와주기 위해 생겨난 Next.js와 같은 프레임워크라고 생각된다.

Vite는 빠른 빌드 속도와 개발 환경을 제공하는 빌드 도구이고, HMR의 경우 플러터에 있는 핫 리로드, 핫 리스타트와 같이 코드 변경 시 브라우저를 새로 고침하지 않고도 즉각적으로 반영하는 기능을 얘기한다.

 

주요 차이점 요약

 

기능적 범위

Svelte: UI 컴포넌트를 렌더링하고 관리하는 데 중점을 둔다. Svelte로는 개별 컴포넌트를 구성해 웹 페이지를 만들 수 있지만, 라우팅, 데이터 페칭, SEO, 빌드 최적화 등은 직접 설정해야 한다.

SvelteKit: Svelte를 기반으로, 라우팅, SEO, 데이터 페칭, SSR, SSG, 이미지 최적화 등 애플리케이션 전반의 기능을 기본 제공하여, 앱을 전체적으로 완성된 상태로 배포하기 쉽도록 합니다.

 

라우팅과 파일 구조

Svelte: Svelte 자체에서는 라우팅 기능이 없기 때문에 Svelte로 다중 페이지 애플리케이션을 구성하려면 서드파티 라우터를 도입하거나 별도로 라우팅을 구현해야 한다.

SvelteKit: 파일 기반 라우팅을 제공하여 폴더와 파일 구조만으로도 페이지 라우팅을 간편하게 설정할 수 있다. src/routes 폴더에 파일을 생성하면 자동으로 라우트가 된다. (Next.js에서 사용되는 폴더 라우팅이라 생각하면 좋을 것 같다.)

 

서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)

Svelte: 기본적으로 클라이언트 사이드에서 동작하는 컴포넌트를 렌더링한다. SSG나 SSR 기능은 없으므로 별도의 서버나 빌드 설정이 필요하다.

SvelteKit: SSR, SSG, 프리렌더링 등 다양한 렌더링 옵션을 제공한다. (서버 사이드의 장점들을 가져오는데 스프링 부트와도 혼용하여 사용할 수 있어서 적절히 설계하기 좋다) 설정에 따라 서버 사이드에서 렌더링하거나, 클라이언트에서 렌더링하거나, 빌드 시점에 정적으로 렌더링할 수 있어 SEO와 초기 로딩 속도에서 유리하다.

 

데이터 페칭과 상태 관리

Svelte: Svelte 자체에는 데이터 페칭에 대한 공식적인 방식이 없으며, 상태 관리도 store를 통해 직접 관리해야 한다.

SvelteKit: 로드 함수를 통해 페이지별 데이터 페칭을 효율적으로 처리할 수 있다.(정상화..) 페이지가 렌더링되기 전에 필요한 데이터를 미리 로드하고, 페이지 전환 시 클라이언트 사이드에서 로드된 데이터를 활용하여 빠른 내비게이션이 가능하다.

 

빌드 및 최적화

Svelte: Svelte는 컴포넌트 수준에서의 최적화만 담당하며, 전체 애플리케이션을 빌드할 때 최적화 작업은 개발자가 직접 수행해야 한다.

SvelteKit: Vite 기반의 빌드 시스템을 사용해 성능을 최적화하고, 필요한 코드만 로드하도록 하는 최적화 옵션을 기본으로 제공한다. 추가로, 오프라인 지원과 코드 스플리팅, 이미지 최적화 등 Next.js에서 유용하게 사용되는 모던한 웹 성능 최적화 기능들이 내장되어 있다.

 

※ Sapper는 정식 출시되면서 Svelte kit이 됐다.

 

요약

Svelte는 UI 컴포넌트를 쉽게 만들 수 있도록 돕는 컴포넌트 라이브러리이다. 작고 단순한 프로젝트나 단일 페이지 애플리케이션에 적합하다.

SvelteKit은 Svelte를 기반으로 하는 웹 애플리케이션 프레임워크로, 라우팅, SSR, SSG, 데이터 페칭, 빌드 최적화 등의 기능을 제공하여 완전한 애플리케이션을 구축하는 데 필요한 모든 기능을 포함한다.

본인이 부족한 지식을 가지고 있어서 이렇게 생각할 수 있지만, 스벨트와 스벨트 키트는 React와 Next.js라고 생각한다.

 

---

 

처음엔 공식 문서를 보기 전에, 예전에 유데미에서 구매해 둔 스벨트 강의가 떠올라 보았는데 너무 구 버전이더라고요 🤔

새로운 강의를 구매할 생각은 아직 없어서 공식 문서를 보며 정리한 내용을 공유드리려고 합니다.

 

다르게 전달된 내용이 있다면 언제든지 댓글로 알려주시면 감사드리겠습니다

다음 포스트에서 뵙겠습니다 🙂