[Svelte] 스벨트 시작하기

thyoondev·2021년 7월 24일
3

Svelte

목록 보기
2/2
post-thumbnail

스벨트 공식 페이지
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
  1. 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
  1. Svelte template를 받고나서 해당 폴더로 이동해줍니다.
npx degit sveltejs/template svelte-app
cd svelte-app
  1. npm에서 모듈을 설치해줍니다.
npm install
  1. 개발 환경으로 실행해줍니다.
npm run dev
  1. 브라우저에서 http://localhost:5000 로 이동합니다.

    http://localhost:5000 로 이동해보면 Svelte 프로젝트가 실행되고 있는 것을 확인하실 수 있습니다!

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

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

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

profile
Practice and repeat

2개의 댓글

comment-user-thumbnail
2021년 8월 30일

감사합니다 :)

1개의 답글