[ SVELTE.01.시작 - REPL, degit 패키지 ]

SVELTE 시작하기

이전 글에서 SVELTE에 대해 알아봤다. 그럼 직접 물고 빨고 해봐야되지 않겠는가. 노인 대학 입학했다 생각하고 처음부터 차근차근해보자. 이쿠죠..

SVELTE 프로젝트 만들기

SVELTE로 프로젝트 구축하는 방법은 2가지가 있다.

1. REPL (Read-Eval-Print Loop)

SVELTE REPL은 웹 화면에서 코드를 짜고 바로 테스트해볼 수 있는 도구를 지원해준다. 작성 이후 zip파일로 다운로드 받을 수 있다. 얜 그냥 링크타고 들어가면 바로 테스트해볼 수 있다. >> SVELTE REPL 테스트 웹

2. degit 패키지

리치 해리스, SVELTE 개발자가 만든 패키지로 git에 저장된 svelte/template 패키지를 로컬에 clone하여 새 프로젝트를 생성한다. 녀석 귀엽구만

 

1. 일단 npm으로 degit을 설치한다.

npm install -g degit

2. npx로 SVELTE template을 clone하여 새 프로젝트로 만든다.

• 번들러 선택이 가능한데 기본은 Rollup 번들러고 명령어를 추가해 Webpack으로 설정해 줄 수 있다.

Rollup  🦊 : npx degit sveltejs/template svelte-app  
webpack 🐱 : npx degit sveltejs/template-webpack svelte-app

3. 해당 프로젝트로 이동 후 npm install 이후 실행해 주면?

npm install
npm run dev

빰!

🙊 일단 코드 샘플은 REPL 링크에서 진행하겠다.

SVELTE 앱 구조

웹에서 다운로드하던 degit을 통해 clone받던 대충 이런 형태를 띈다. package.json 파일을 보면 SVELTE와 rollup 번들러 디펜던시가 들어있는 것을 확인할 수 있다.

/public/build : SVELTE가 컴파일하고 Rollup 또는 Webpack이 번들링한 번들파일이 들어있다.
/src : 사용자 정의 SVELTE 코드
rollup.config.js : Rollup 모듈 번들러의 설정 파일. Webpack의 경우 webpack.config.js 파일임
sirv-cli : sirv public을 이용해 SPA 서버를 실행

.svelte 파일 구조

<!-- javascript 코드 -->
<script>
	let name = 'durian';
</script>

<!-- HTML template -->
<h1>Hello {name}!</h1>
<button on:click={() => { name = 'carrots'; }}>근본</button>

<!-- css style -->
<style>
   h1 {
      background-color : red;
      color : white;
   }
</style>

.svelte 파일은 다음과 같이 <script>, html-template, <style> 세단계로 나뉘어 구성되어 있다. 딱 봐도 알 수 있듯이 javascript 코드는 <script>, 렌더링될 HTML은 하단 html-template, 해당 component에 적용될 CSS는 <style> 에 작성하여 구현하면 된다.

정리하며

오늘은 SVELTE 프로젝트 생성에 대해 알아봤다. 시작이 반인 만큼 50%를 이뤄보자!

 

오늘 저녁은 부대찌개이다. 🥕

Hello world • REPL • Svelte