2. Quick Start Guide + VS Code 개발 환경 구성

Svelte는 다른 UI 프레임워크와 달리 빌드 과정에서 DOM 변경에 관련된 작업을 처리하기 때문에, 런타임에 관련된 기능을 제공하지 않아 개발 환경을 구성하는 방법이 다른 프레임워크와는 차이가 있다. Svelte는 개발 환경을 구성하기 위해 REPL과 Degit을 이용한 환경 구성 2가지를 소개하고 있다. 이 두 가지 방법을 사용해서 Svelte 개발 환경을 구성해보자.

 

REPL로 개발 환경 구성

 

REPL이란, Read Eval Print Loop의 약자로 단일 사용자의 입력을 받아 이를 실행한 후 결과물을 리턴하는 단순한 상호작용 프로그래밍 환경을 뜻한다. Svelte는 구조상 CDN을 사용할 수 없기 때문에 공식 사이트에서 REPL 환경을 제공한다. 아래의 링크에서 REPL 페이지로 접속할 수 있다.

 

https://svelte.dev/repl/hello-world?version=3.24.1

Loading... • REPL • Svelte

 

REPL 사용 방법은 매우 간단하다. 위의 링크를 클릭해 REPL 환경에 접속한 후 Svelte 애플리케이션을 코딩한다. 나는 아래와 같이 간단한 애플리케이션을 작성하였다.

 

<style>
	h1 {
		color: blue;
	}
	
	li {
		margin-bottom: 5px;
	}
</style>

<script>
	const title = 'Svelte development environment configuration using REPL';
	const setStep = [
		'<a href="https://svelte.dev/repl/hello-world?version=3.18.1">Click svelte REPL.</a>',
		'Write svelte app code.',
		'Click the download button at the top right.',
		'Decompress the downloaded Zip file and execute the "node intall" command in the terminal.',
		'If you run npm run dev, you can see it as localhost:5000.'
	]
</script>

<header>
	<h1>{title}</h1>
</header>
<section>
	<article>
		<ol>
			{#each setStep as step}
				{#if step.indexOf('href') > -1}
					<li>{@html step}</li>
				{:else}
					<li>{step}</li>
				{/if}
			{/each}
		</ol>
	</article>
</section>

 

작성이 완료되면 우측 상단에 다운로드 버튼을 클릭하면 "svelte-app.zip" 이름으로 압축 파일이 다운로드된다. 다운로드한 파일을 압축 해제하면 NodeJS 패키지로 구성되어 있음을 확인할 수 있다. 만약, 컴퓨터에 NodeJS가 설치되어있지 않다면 여기를 클릭하여 NodeJS를 설치하자.

 

package.json 파일이 있다면 NodeJS 패키지 모듈이다.

 

다음 IDE 또는 터미널에서 다운로드한 파일이 있는 경로로 이동하여 "node install" 명령어를 실행한다. 개발에 필요한 npm 패키지가 자동으로 설치된다.

 

npm i를 입력하면 package.json 파일에 명시된 모듈을 자동으로 설치한다.

 

마지막으로 "npm run dev" 명령어를 실행하면 localhost:5000으로 애플리케이션이 실행되는 것을 확인할 수 있다. (참고로 공식 홈페이지의 REPL 환경에서 한글로 코드를 작성하면 글자가 깨지는 현상이 있으니 참고하자.)

 

첫 Svelte 애플리케이션

 

Degit을 이용한 개발 환경 구성

 

Degit은 복사 대상 Git 저장소의 Repository 내용만 가져오고자 할 때 사용하는 NPM 모듈로써, 이 모듈을 사용하여 매우 쉽게 Svelte 개발 환경을 구성할 수 있다. 아래의 명령어 3줄이면 된다.

 

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

 

실행은 REPL과 동일하다.

 

npm run dev

 

환경 문제로 degit이 동작하지 않는 경우, 아래의 주소를 git clone 하여 구성하는 방법도 있다.

 

https://github.com/sveltejs/template

sveltejs/template

 

다만, git clone 시 저장소 정보나 history가 그대로 남아 있어 개인 설정을 하는데 귀차니즘이 동반되니 가능하면 degit으로 구성하도록 하자.

 

IDE 환경 구성

 

Svelte로 애플리케이션을 개발하기 위한 기본적인 환경 구성이 완료되었다. 이제 본격적으로 개발하기 위해 IDE를 설정해줘야 한다. IDE는 가장 인기 있는 VS Code를 사용할 것이며, 오직 Svelte 개발에 필요한 모듈만 설치할 것이다.

 

첫 번째로 VS Code에서 Svelte 파일을 인식할 수 있도록 확장 플러그인을 설치해주자. 나는 Svelte for VS Code 플러그인을 설치하였다.

 

 

Svelte for VS Code를 설치하면 아래와 같이 Svelte 파일을 VS Code에서 정상적으로 인식한다.

 

 

다음은 자바스크립트 문법 및 Svelte 문법을 검사하기 위한 ES Lint를 설정해보자. 프로젝트 경로에서 아래의 명령어를 실행한다.

 

npm i -D eslint eslint-plugin-svelte3

 

설치가 완료되면 프로젝트 경로에 .eslintrc.js 파일을 만들고 아래의 코드를 붙여 넣는다.

 

module.exports = {
    "env": {
        "browser": true,
        "es2020": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    plugins: [
      'svelte3'
    ],
    overrides: [
      {
        files: ['*.svelte'],
        processor: 'svelte3/svelte3'
      }
    ],
    "rules": {
    }
};

 

다음 VS Code의 확장 플러그인 중 ESLint를 검색하여 설치한다.

 

 

ESLint 플러그인을 설치하는 순간 프로젝트의 모든 JS 파일과 Svelte 파일은 문법 검사의 대상이 된다. 프로젝트 경로에 .eslintignore 파일을 생성하고 문법 검사에서 제외할 파일 또는 디렉터리를 추가한다.

 

.eslintrc.js
public/
src/dist/
node_modules/

 

마지막으로 VS Code에서 파일 > 기본 설정 > 설정의 검색창에 settings를 입력하고 스크롤을 내린 후 "settings.json에서 편집" 링크를 클릭한다. 그리고 아래의 코드를 추가한다.

 

"eslint.validate": [
  "svelte"
]

 

이제 VS Code에서 자바스크립트의 문법을 틀리거나 Svelte 문법을 틀리면 VS Code에서 경고 또는 에러를 즉시 표시해준다.

 

Svelte에서 타입 스크립트 사용

 

Svelte 3로 오면서 svelte-preprocess 모듈이 기본으로 내장되어 타입 스크립트를 기본으로 지원한다. 따라서, 타입 스크립트에 대한 설정은 위에서 구성한 경로에 있는 scripts/setupTypeScript.js를 node 명령어로 실행한 후 "npm install"을 진행하면 된다.

 

npx degit sveltejs/template svelte-typescript-app
cd svelte-typescript-app
node scripts/setupTypeScript.js
npm install

 

타입 스크립트 설정이 완료되었다면, App.svelte을 열고 Script 태그 상단에 lang="ts"로 타입 스크립트임을 명시하면 끝!!

 

<script lang="ts">
	const title: string = 'Svelte development environment configuration using REPL';
	const setStep: string[] = [
		'<a href="https://svelte.dev/repl/hello-world?version=3.18.1">Click svelte REPL.</a>',
		'Write svelte app code.',
		'Click the download button at the top right.',
		'Decompress the downloaded Zip file and execute the "node intall" command in the terminal.',
		'If you run npm run dev, you can see it as localhost:5000.'
	]
</script>

 

테스트를 위해 엉뚱한 타입으로 코드를 변경해보자. title 변수의 타입을 숫자형으로 변경하였다.

 

<script lang="ts">
	const title: number = 'Svelte development environment configuration using REPL';
	const setStep: string[] = [
		'<a href="https://svelte.dev/repl/hello-world?version=3.18.1">Click svelte REPL.</a>',
		'Write svelte app code.',
		'Click the download button at the top right.',
		'Decompress the downloaded Zip file and execute the "node intall" command in the terminal.',
		'If you run npm run dev, you can see it as localhost:5000.'
	]
</script>

 

터미널을 열고 npm run validate를 실행하면, 에러가 나는 부분을 찾아서 알려주는 것을 확인할 수 있다.

 

---

 

지금까지 Svelte 개발 환경을 구성하는 방법에 대해서 알아보았다. 조만간 Sass / Scss 스터디를 통해 Rollup에 연동을 해본 후 본 게시글을 업데이트할 예정이니, 필요시 본 글을 참고하면 도움이 될 것이다. 다음 3편에서는 Svelte 기본 문법에 대해서 알아보도록 하겠다.

 

참고 링크

https://svelte.dev/blog/svelte-and-typescript
https://www.npmjs.com/package/eslint-plugin-svelte3
https://svelte.dev/blog/the-easiest-way-to-get-started