개발환경 구성과 프로젝트 생성 (Hello World) : Svelte 3 강좌

이제, 본격적으로 시작해봅시다. 우선, https://code.visualstudio.com/ 에서 Visual Studio Code를 다운로드하여 설치합니다. 에디터는 자신이 원하는 다른 것(IntelliJ IDEA, Atom, Eclipse 등)으로 하셔도 괜찮습니다.

 

Svelte에 관련된 확장프로그램은 아래와 같이 설치하였습니다.

 

https://nodejs.org/ 에서 Node.js를 다운로드하여 설치한다.

 

node.js 설치를 마치고 다음처럼 설치가 잘 되었는지 확인해보자~! 저는 LTS버전을 설치했는데, 아무거나 설치하셔도 됩니다.

 

yarn도 설치해봅시다. npm 보다 설치속도가 더 빠르다고 하네요. 전역(-g 옵션)으로 설치하는 패키지는 npm을 사용하고, 그 외에는 yarn을 설치하는 것이 좋다고 합니다.

 

Svelte 프로젝트 생성합니다. : > npx degit sveltejs/template svelte-tutorial

 

이제, 웹브라우저가 자동으로 실행이 되며, http://localhost:5000 으로 접속되어, 아래와 같은 화면이 나오게 됩니다. 그러면 일단 성공~!!!

 

Svelte 코드 컨벤션을 지키기 위해 Prettier를 적용해보고자 합니다. prettier-plugin-svelte를 디펜던시로 받아줍니다.

npm i --save-dev prettier-plugin-svelte prettier
# or yarn add prettier-plugin-svelte prettier -D

 

Prettier에도 기본 설정이 있는데, 프로젝트의 루트 디렉토리에 .prettierrc 파일을 생성해서 설정을 변경할 수 있습니다.

{
  "svelteSortOrder": "scripts-styles-markup",
  "svelteStrictMode": true,
  "svelteBracketNewLine": true,
  "svelteAllowShorthand": false
  // ... 기타 커스텀 옵션
}

 

라우팅 설정을 위해서 svelte-routing 을 설치합니다.

npm install --save svelte-routing

 

크롬 확장프로그램을 설치할거에요. chrome 웹 스토어에서 Svelte를 검색하여, Svelte Devtools를 설치합니다. 크롬에서 Vue 디버깅할때 아주 유용하다고 합니다.

 

CSS Framework로는 Svelte Material UI 를 사용할 것입니다. 이 녀석은 다른 프레임워크와는 다르게 컴포넌트마나 매번 별도의 설치를 해야 합니다. 그래서, 튜토리얼을 진행하면서 설치를 그때마다 하겠습니다.

 

이제, 코드를 살짝 수정해볼까요? App.svelte 파일을 열어서, 다음처럼 바꾸어봅니다. ~.svelte 파일을 컴포넌트라고 합니다. 컴포넌트는 script, style, html 로 구분이 되고, 순서는 상관이 없습니다. 일반적으로 HTML파일도 거의 같은 구조로 되어 있고, Vue의 컴포넌트 파일도 거의 같은 모양입니다. html 코드 내에서 중괄호{} 안에 변수를 넣으면, 변수의 내용을 출력합니다. 백엔드 프레임워크의 일반적인 템플릿(뷰)의 형식과 거의 비슷합니다. Vue도 역시 비슷한 방법을 사용하고 있습니다.

<script>
	let name = "세상아";
</script>

<main>
	<h1>안녕, {name}!</h1>
</main>

<style>
	h1 {
		color: #2ab11e;
		font-size: 4em;
		font-weight: 100;
	}
</style>

 

결과는 아래처럼 나오겠지요~!! 여기까지가 Svelte를 위한 개발환경 구성 및 프로젝트 생성, 헬로월드 만들어보기 였습니다. 기존의 다른 프레임워크들보다는 상당히 단순하게 구성이 되어 있어서 공부하는데 어렵지 않을거에요.