https://github.com/meeyoungchoi-front-dev/svelte-overview
프로젝트에 적용하기위해 svelte 찍먹하기
https://github.com/meeyoungchoi-front-dev/svelte-overview
css html javascript svelte
Last synced: 9 months ago
JSON representation
프로젝트에 적용하기위해 svelte 찍먹하기
- Host: GitHub
- URL: https://github.com/meeyoungchoi-front-dev/svelte-overview
- Owner: meeyoungchoi-front-dev
- Created: 2024-04-16T05:55:17.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-17T00:41:15.000Z (over 1 year ago)
- Last Synced: 2025-02-08T09:30:58.458Z (10 months ago)
- Topics: css, html, javascript, svelte
- Language: Svelte
- Homepage:
- Size: 43 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# svelte-overview
## Quick Start Guide
+ Svelte 공식 문서에서 Svelte 프로젝트를 빠르게 만들 수 있는 2가지 방법(REPL과 digit)을 이야기합니다.
+ REPL, digit으로 프로젝트를 만들수 있는 방법을 이야기하도록 하겠습니다. 자세한 내용은 quickstart guide를 참고 바랍니다.
### REPL 사용
+ REPL(Real Eval Print Loop)이란 사용자의 입력을 받아 실행하고 결과를 사용자에게 보여주는 프로그래밍 환경을 말합니다.
+ CDN으로 Svelte를 사용할 수 없어서 CodePen 등의 웹 IDE를 사용할 수 없습니다.
+ Svelte는 이런 단점을 보완하기 위해 자체적으로 REPL을 제공하는 것으로 보입니다.
+ Svelte는 빌드 타임에 반응형이 결정됩니다
+ 이런 특징은 런타임 동안에 변경사항을 찾아야 하는 오버헤드를 줄여 속도를 개선하는 장점이 있지만, CDN 등으로 Svelte를 사용할 수 없는 단점도 있습니다.
+ Svelte REPL에서 코딩한 후 코딩한 프로젝트를 다운로드할 수 있습니다
+ svelte-app.zip으로 다운로드되는데, 파일의 압축을 풀고 아래와 같이 프로젝트를 실행할 수 있습니다.
```
cd /path/to/svelte-app
npm install
npm run dev
+ 이 방법을 사용하면 rollup 번들러(bundler)를 사용한 프로젝트가 만들어집니다.
### digit 사용
+ digit를 사용하여 프로젝트를 만들 수 있습니다.
+ Svelte는 template와 template-webpack 두 가지 템플릿 프로젝트를 제공합니다.
#### template
+ sveltejs/template은 rollup 번들러를 사용하는 템플릿입니다.
+ 템플릿을 다운로드 하는 방법은,
```
npx degit sveltejs/template my-svelte-project
## or download and extract this .zip file
cd my-svelte-project
npm install
npm run dev
```
+ 위의 코드와 같이 rollup 번들러를 사용하는 템플릿을 다운로드할 수 있습니다.
+ 이 방법을 사용하면 sveltejs/template에 올라와 있는 프로젝트가 만들어집니다.
#### webpack template
+ sveltejs/template-webpack은 webpack을 사용하는 템플릿입니다. 템플릿을 다운로드하는 방법은,
```
npx degit sveltejs/template-webpack my-svelte-project
## or download and extract this .zip file
cd my-svelte-project
npm install
npm run dev
```
#### 프로젝트 구성 커스터마이징
+ sveltejs/template(혹은 sveltejs/template-webpack)의 깃허브(github) 레파지토리(repository)를 포크(fork) 하여 커스터마이징 한다면,
```
npx degit your-name/template my-new-project
```
+ 위의 코드로 커스터마이징한 프로젝트 구성으로 손 쉽게 프로젝트를 만들 수 있습니다.