[Svelte] 초기 환경 세팅하기

안녕하세요. J4J입니다.

 

이번 포스팅은 Svelte 사용을 위한 초기 환경 세팅에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

Svelte에서도 React에서 기본 환경 세팅이 되어 있는 템플릿인 CRA와 같은 기능들이 존재합니다.

 

다만 어떤 번들러를 사용하냐에 따라 사용되는 명령어가 구분되어집니다.

 

 

 

SPA기술들을 사용할 때 일반적으로 많이 사용되는 번들러는 Webpack이 있습니다.

 

그리고 최근에 관심도가 높아지고 있는 번들러 중에 Rollup이라는 것이 있습니다.

 

Svelte에서 제공해주는 CRA기능에선 Webpack을 사용하냐 또는 Rollup을 사용하냐에 따라 명령어가 구분되고 그에 따라 사용하기 원하는 번들러에 맞게 명령어를 입력해주시면 됩니다.

 

 

반응형

 

 

번들러 사용에 있어 부가적인 정보를 더 드리자면 Svelte는 Rollup번들러를 주로 사용하는 생태계가 더 커지고 있다고 합니다.

 

Rollup의 장점이 있어서 그런 것도 있겠지만 아무래도 Svelte를 만든 개발자와 Rollup번들러를 만든 개발자가 동일 인물이어서 그러지 않을까라는 개인적인 생각을 해봅니다.

 

 

 

Rollup 템플릿 생성

 

[ 1. NodeJS 설치 ]

 

Svelte도 기본적으로 NodeJS가 설치되어 있어야 합니다

 

설치가 안되어 있으신 분들은 NodeJS 공식 사이트에 접속하셔서 설치해주시면 됩니다.

 

개인적으로 안정적, 신뢰도 높음으로 되어 있는 버전으로 설치하시는 것을 추천드립니다.

 

 

 

[ 2. extension에서 Svelte for VS Code 설치 ]

 

extension

 

※ 추가 → Svelte 3 Snippets, Svelte Auto Import도 설치를 하시면 개발할 때 더 편리하게 개발하실 수 있습니다.

 

 

 

[ 3. 템플릿 생성 ]

 

$ npx degit sveltejs/template {프로젝트 명}

 

 

 

[ 4. 모듈 설치 ]

 

$ cd {프로젝트 명}
$ npm install

 

 

728x90

 

 

Webpack 템플릿 생성

 

[ 1. NodeJS 설치 ]

 

Webpack을 사용한다고 해서 NodeJS가 필요 없는 것은 아닙니다.

 

Rollup부분을 참고하셔서 동일하게 설치해주시면 됩니다.

 

 

 

[ 2. extension에서 Svelte for VS Code 설치 ]

 

해당 부분도 Rollup 부분과 동일합니다.

 

 

 

[ 3. 템플릿 생성 ]

 

$ npx degit sveltejs/template-webpack {프로젝트 명}

 

 

 

[ 4. 모듈 설치 ]

 

$ cd {프로젝트 명}
$ npm install

 

 

 

 

 

이상으로 Svelte 사용을 위한 초기 환경 세팅에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.