Svelte 와 SvelteKit 비교

우리는 Svelte를 사용할 때 Svelte와 SvelteKit를 별도로 구분하지 않지만, 실제로는 Svelte와 SvelteKit은 조금은 다르다고 할 수 있다.

Svelte는 코어적인 부분을 담당하고, Sveltekit은 코어 위에 올라가는 프레임워크라고 할 수 있다.

.Net으로 생각한다면, .Net Framewark 위에 MVC 가 존재하는 그림이라고 할 수 있다.

 

Svelte는 JavaScript를 기본적으로 사용하는 프레임워크이다. 그렇다보니 Svelte 자체만 사용해서는 완성도 높은 웹(다양한 동작을 하는)을 구성하기에는 태생적으로 한계가 있다고 할 수 있다. SvelteKit을 이용하지 않을 때에는 vite를 이용하여 빌드하면 SvelteKit을 제외하고 사용이 가능하다.

Svelte 빌드하기

npm create vite@latest myapp -- --template svelte
cd myapp
npm install
npm run dev

 

Vite, 즉 코어를 보완한 것이 SvelteKit이다. 그리고 현재 Svelte 에서 SvelteKit으로 하나의 환경으로 통합이 이루어지고 있는 상황이다.

즉 Svelte의 JavaScript의 기본적인 부분은 유지하면서 보다 다양한 컴포넌트를 이용할 수 있도록 프레임워크 기반으로 강화한 것이라고 할 수 있다.

따라서 Svelte는 단순하거나 작은 사이트에서 사용하기 유용하고 SvelteKit는 보다 고급 기술을 이용할 때 유용하다고 할 수 있다.

특히 서버사이드 렌더링등을 제공하는 부분이 제공 SvelteKit 를 이용해야 하는 주요 이유중에 하나라고 할 수 있다.

SvelteKit 빌드하기

npm create svelte@latest myapp -- --template svelte
cd myapp
npm install
npm run dev