[Svelte] 프로젝트 시작하기

1. 소개 

- Svelte 키워드로 구글링을 하는 경우 Svelte, SvelteKit 두 프레임워크에 대한 내용을 접할 수 있습니다.

일반적으로 Svelte라고 하면 프론트엔드 개발을 위한 오픈소스 프레임워크를 뜻하며, SvelteKit은 Svelte를 베이스로한 SSR 기반 프레임워크를 뜻합니다.

 

- Svelte 공식 문서에서의 설치 가이드는 오직  SvelteKit(SSR) 프레임워크 프로젝트 구축에 대한 내용만을 제공하고 있습니다. Svelte에서는 공식적으로 SvelteKit(SSR)을 권장하는 듯 합니다. 

 

- 만일 SvelteKit 프로젝트에 SSR 관련된 코드들이 불필요하여 Svelte 프레임워크만을 사용하고 싶다면, Vite 빌드도구에서 프로젝트를 생성하는 방법이 있습니다. 하지만 Sveltekit에는 Routing, SSR, Service Worker 등 웹, 앱 개발에 필요한 다양한 기능들이 포함되어 있는 반면에 Svelte만 사용할 경우 필요한 라이브러리(ex. svelte-spa-router)는 직접 설치해야 합니다.

2. Svelte or SvelteKit 프로젝트 생성

$ npm create vite@latest

? Select a framework:
> Vue
> React
...
> Svelte // 선택

? Select a variant: 
> TypeScript
> Javascript
> SvelteKit    //여기서 SvelteKit을 선택하면 SvelteKit 프레임워크로 프로젝트가 생성됨

 

SvelteKit의 경우 기본 빌드도구는 vite이기 때문에 아래와 같은 방법으로도 생성할 수 있습니다.

$ npm create svelte@next

? Where should we create your project?
> project_name

? Which Svelte app template?
>   SvelteKit demo app - 데모 App을 포함
>   Skeleton project - 기본 뼈대만 있는 SvelteKit App
>   Library skeleton project - 라이브러리 프로젝트

// 이후 언어 타입, lint, prettier 등의 옵션은 필요에 따라선택
√ Add type checking with TypeScript? »  No / Yes
√ Add ESLint for code linting? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes
√ Add Playwright for browser testing? ... No / Yes
√ Add Vitest for unit testing? ... No / Yes

 

 

 

참고사이트

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

https://wooncloud.tistory.com/141#Vite%EB%A-%-C%--CSR%EA%B-%B-%EB%B-%--%--Svelte%--%EC%-B%-C%EC%-E%--%ED%--%--%EA%B-%B-