[svelte] 시작하기 (with typescript)

※ 이 글은 node.js 개발 환경이 구성되어 있다는 전제하에 쓰여진 글 이다.

※ vscode를 사용하고 있다면 Svelte for VS Code plugin 사용을 추천한다.

 

https://github.com/sveltejs/template 에서 프로젝트 템플릿을 제공하고 있다.

위의 프로젝트 템플릿을 기반으로 새 프로젝트를 시작해 보자

# npx degit sveltejs/template [프로젝트명]
$ npx degit sveltejs/template svelte-app
> cloned sveltejs/template#HEAD to svelte-app

# 프로젝트 폴더로 이동한다.
$ cd svelte-app

 

아래와 같이 프로젝트 폴더와 파일이 생성된다.

svelte-app
├── .gitignore
├── package.json
├── public
│   ├── favicon.png
│   ├── global.css
│   └── index.html
├── README.md
├── rollup.config.js
├── scripts
│   └── setupTypeScript.js
└── src
    ├── App.svelte
    └── main.js

 

아래의 명령을 실행하면 typescript를 사용할 수 있는 환경이 설정된다.

$ node scripts/setupTypeScript.js
Converted to TypeScript.

 

typescript를 사용할 수 있는 환경이 설정 되면 아래와 같이 파일들이 변경된다.

svelte-app
├── .gitignore
├── .vscode
│   └── extensions.json
├── package.json       
├── public
│   ├── favicon.png    
│   ├── global.css     
│   └── index.html     
├── README.md
├── rollup.config.js   
├── src
│   ├── App.svelte     
│   ├── global.d.ts    
│   └── main.ts        
└── tsconfig.json

 

프로젝트에 필요한 모듈들을 설치 한다.

$ npm install

 

프로젝트를 실행할 수 있는 모든 환경이 갖춰졌다. 바로 실행해 보자.

$ npm run dev
> svelte-app@1.0.0 dev
> rollup -c -w        

rollup v2.63.0
bundles src/main.ts → public\build\bundle.js...
LiveReload enabled
created public\build\bundle.js in 1.3s

[2022-01-06 01:44:23] waiting for changes...

> svelte-app@1.0.0 start
> sirv public --no-clear "--dev"


  Your application is ready~! 🚀

  - Local:      http://localhost:5000
  - Network:    Add `--host` to expose

────────────────── LOGS ──────────────────

 

웹 브라우저에서 http://localhost:5000을 보면 아래와 같이 Hello World를 볼수 있다.