스벨트 공식 페이지
HEROPY님의 Svelte.js [Core API] 완벽 가이드

시작하기전에

Svelte 개발 환경을 구축하기 전에 VSCode와 Node.js가 설치되어있는지 체크합니다.

1. VSCode
   https://code.visualstudio.com

2. NodeJS
   https://nodejs.org
   가급적 LTS 버전으로 설치하는 것을 추천합니다.

Bundler 선택하기

Svelte를 개발 환경을 구축하기 위해 Svelte Template Package를 받아주세요.
(Rollup bundler와 Webpack bundler 중 한가지 선택)

1. Use Rollup bundler
   https://github.com/sveltejs/template

//install
npx degit sveltejs/template svelte-app

2. Use Webpack bundler
   https://github.com/sveltejs/template-webpack

//install
npx degit sveltejs/template-webpack svelte-app

degit이란?
degit은 github 저장소를 현재 경로에 clone하기 위한 패키지입니다.

npm install -g degit

시작하기

현재 Svelte는 Rollup bundler를 중심으로 생태계가 형성되고 있다고합니다.
따라서 저도 Rollup bundler를 사용하는 템플릿으로 시작해보겠습니다.

1. 먼저 degit을 이용하기 위해 degit을 전역으로 설치해줍니다.

npm install -g degit

2. Svelte template를 받고나서 해당 폴더로 이동해줍니다.

npx degit sveltejs/template svelte-app
cd svelte-app

3. npm에서 모듈을 설치해줍니다.

npm install

4. 개발 환경으로 실행해줍니다.

npm run dev

5. 브라우저에서 http://localhost:5000 로 이동합니다.
   
   http://localhost:5000 로 이동해보면 Svelte 프로젝트가 실행되고 있는 것을 확인하실 수 있습니다!
   

이로써 Svelte를 이용해서 웹어플리케이션을 실행하였습니다.

VSCode에서 Svelte 태그 하이라이팅하기

VSCode의 Extention 탭에서 Svelte를 검색하면 Svelte코드를 하이라이팅해주는 확장프로그램을 찾을 수 있습니다.
install하고 Svelte file를 보면 코드가 하이라이팅 되어있는 것을 확인하실 수 있습니다.