저도 Svelte를 처음으로 접해 보았습니다. 대체 얼마나 대단하길래 다들 난리인건지 말입니다. Svelte 프로젝트 생성 방법 소개합니다.
Svelte란?
Svelte는 React나 Vue 같은 js 개발 프레임워크입니다. 사실 프레임워크라 하는 게 맞을지 모르겠지만, 무엇보다도 Svelte의 가장 큰 특징은 가상 DOM을 사용하지 않고 VanillaJS로 컴파일해 낸다는 것입니다. 그래서 배포를 위한 빌드를 했을 때 js 용량이 상당히 줄어듭니다. 웹 페이지 로딩 시간을 줄일 수 있죠. 그러므로 사용자에게 조금 더 빠르게 페이지를 보여주고자 한다면 Svelte가 도움이 될 것입니다.
Svelte는 Svelte 제작자인 Rich Harris가 만든 RollUp에서 SnowPack으로, 그리고 현재는 에반 유의 Vite를 공식 번들러로 사용하고 있습니다. 자신이 만든 RollUp에 목숨걸지 않고, 길지 않은 기간에 공식 번들러를 저렇게 변경했다는 건 그만큼 변화에 빠르게 대응한 것이라는 점, 그리고 그의 유연성을 엿볼 수 있습니다.
그럼 본격적으로 Svelte 프로젝트를 만들어 보겠습니다.
Svelte 프로젝트 생성을 위한 명령어
매우 간단한 명령어 한 줄이면 Svelte 프로젝트를 생성할 수 있습니다. yarn이나 npm 모두 사용할 수 있습니다. npm을 사용하는 경우에는 npm create vite project_name이라고 입력해 주시면 됩니다. 저는 yarn 명령어를 사용해서 프로젝트를 만들어 보도록 하겠습니다.
yarn create vite project_name위의 명령어를 입력하면, framework를 어떻게 할 것인지 물어봅니다. Svelte를 선택합니다.
이제 Variant를 선택할 차례입니다. JavaScript, TypeScript, SvelteKit 중에 선택하면 됩니다. 저는 Typescript를 선택해 보겠습니다.
Svelte TypeScript 프로젝트가 생겼습니다.
그럼 만들어진 프로젝트 디렉토리로 이동합니다.
cd project_name이제 프로젝트의 package.json에 따라 node_modules에 관련 패키지를 설치해 주어야 하므로, yarn이나 npm install을 실행해 주도록 합니다.
설치가 다 됐다면, 이제 개발 서버를 띄우면 됩니다. 매우 간단하죠. yarn dev라고 입력하면 간단히 서버가 구동됩니다. npm 이용시에는 npm run dev 하시면 됩니다.
yarn dev개발서버를 띄우면 아래와 같이 포트는 5173에 띄웠고, 외부 접속을 가능하게 하려면 –host 옵션을 사용하라고 나와있습니다. 도움말을 확인하고 싶으면 h를 누르면 됩니다.
h를 누르면 단축키를 알려줍니다. 서버 재시작은 r, 서버 url을 확인하고 싶으면 u, 브라우저에서 확인하고 싶으면 o, 개발서버를 종료하고 싶으면 q를 누르면 됩니다.
제대로 브라우저에서 어플리케이션이 작동하는지 확인해 봐야겠죠. 저는 o를 눌러보았습니다. 웹 브라우저가 열리고 아래와 같은 화면이 나오는 것을 확인했습니다.
개발을 다 했으면 배포를 해야겠죠. 따라서 배포를 원한다면 yarn build 명령으로 빌드를 수행합니다. 빌드가 완료되면 dist 디렉토리에 배포할 녀석들이 생깁니다. npm 이용시에는 npm run build 명령어를 사용하시면 됩니다.
Svelte 프로젝트 생성과 개발서버 구동 그리고 배포 방법까지 간단히 살펴봤습니다. 프로젝트 생성부터 매우 간단하네요. Svelte를 이용한 어플리케이션은 가볍다고 하는데, 얼마나 가벼운지 해봐야 알겠죠?
그나저나 React, Vue, Angular는 종착점이 아니었죠. 또, Svelte도 생태계가 무르익을 즈음이면 새로운 녀석이 나타나지 않을까 조심스레 생각해 봅니다. 아니면 Svelte가 종결자가 될 수 있을지 벌써부터 궁금해집니다.
관련 자료
Svelte 공식 홈페이지에 가면 공식 문서를 통해서 자세한 내용 살펴볼 수 있습니다.