Day 1. 프로젝트 설정
새로운 프로젝트 생성 (package.json)
$ npm init -y
Install svelte package
$ npm install -D svelte snowpack @snowpack/plugin-svelte
소스 작성
- Snowpack 설정
- Hello Svelte
script 작성 (package.json)
"scripts": {
"dev":"snowpack dev",
"build":"snowpack build"
},
개발서버 실행
$ npm run dev
Github 소스 관리
git init
git add readme.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/javapark/Svelte-movie-app.git
git push -u origin main
.gitignore 설정
touch .gitignore
node_modules
패키지 설치
$ npm i -D autoprefixer postcss node-sass @snowpack/plugin-sass $ npm i -D @snowpack/plugin-babel babel-plugin-transform-remove-console $ npm i -D @snowpack/plugin-dotenv $ npm i -D @snowpack/plugin-optimize $ npm i -D svelte-spa-router
SPA 라우츠 링크와 하이라이팅(active)
<script>
import { link } from 'svelte-spa-router'
</script>
Google Fonts
- Google Fonts : Roboto, Oswald
reset.css
Packages
- snowpack : 프로젝트를 빌드하기 위한 핵심 패키지이다.
- svelte : Svelte API를 사용하기 위한 핵심 패키지이다.
- @snowpack/plugin-svelte : Snowpack 에서 Svelte 를 해석할 수 있다. svelte-preprocess 가 같이 설치된다
- autoprefixer: CSS 에 자동으로 공급 업체 접두사(vendor prefix)를 적용한다
- postcss: CSS 후처리 패키지로 autoprefixer 를 사용하기 위해 설치한다
- @snowpack/plugin-babel :
- babel-plugin-transform-remove-console : 배포할 제품에서는 불필요한 콘솔 명령을 제거한다
- @snowpack/plugin-dotenv
- @snowpack/plugin-optimize : 결과를 압축하고 번들링하는 등 최종 결과를 최적화한다
- svelte-spa-router :
Tip
- 강의 예제 모듈 버전 일치 시키기 : package.json, package-lock.json 복사
Ref
