svelte 설치 및 세팅

프론트엔드 개발자는 아니지만, 프로토타이핑을 할 일이 있어서 몇가지 프레임워크를 보다가 svelte(스벨트)를 접하게 되어서 사용하다보니 편의성에 매료되었습니다.

 

svelte의 특징은 다른 글에서 정리해보도록 하고, 오늘은 svelte를 세팅하는 글을 작성해보겠습니다.

 

먼저 svelte도 react나 vue처럼 node를 기반으로 하고 있습니다.

node를 기반으로 하고 있으므로 node가 설치되어 있어야 합니다.

참고로 mac os에서 brew install node 명령어로 brew를 활용해서 간단하게 node를 설치할 수 있습니다.

 

공식 홈페이지에서는 svelte를 설치하는 2가지 방법을 알려주고 있습니다. (https://svelte.dev/blog/the-easiest-way-to-get-started)

 

REPL 활용

REPL을 활용하는 방법은 다음의 주소(https://svelte.dev/repl)에 접속해서, 압축된 샘플 프로젝트를 다운받는 방법입니다.

표시된 버튼을 누르면 svelte-app.zip으로 압축되어 프로젝트를 다운받을 수 있습니다.

 

압축을 풀고, npm install을 통해서 라이브러리를 설치하면 끝입니다.

 

이제 npm run dev 명령을 실행하면, 서버가 실행됩니다.

 

참고로 REPL에서는 내 컴퓨터에 환경을 세팅하지 않고 웹페이지 상에서 왼쪽 화면의 App.svelte에 코드를 짜고 오른쪽에서 결과를 확인할 수 있습니다.

 

DEGIT 활용

DEGIT은 git repository를 다운 받는 툴입니다.

 

git clone을 통해서 git repository를 받을 수 있지만, clone을 활용하는 경우엔 프로젝트가 기존의 git 프로젝트 정보를 모두 가지고 있게 됩니다. 

sample project를 받아서 나만의 git repository로 세팅하기 위해서는 기존의 git 관련 history를 지워야하는 불편함이 있는데, DEGIT을 활용하면 그런 것들을 모두 지우고 깔끔한 프로젝트로 받을 수 있습니다.

 

DEGIT을 활용하는 방법은 다음과 같습니다.

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev

npx degit sveltejs/template my-svelte-project 명령어를 실행하면 my-svelte-project라는 디렉토리에 github에서 sveltejs/template 레포(https://github.com/sveltejs/template)를 받아와서 프로젝트를 생성해줍니다.

 

그러면 이제 나머지는 REPL과 같습니다.

 

svelte 프로젝트를 세팅하는 방법을 알아보았는데, 앞으로는 svelte의 특징이나 svelte 문법을 추가적으로 포스팅해보도록 하겠습니다.