Svelte 기본 개념과 사용 방법

스벨트란?

스벨트(Svelte)는 2019년 출시한 굉장히 따끈따끈한 웹 프레임워크이다.

스벨트는 기존 웹 프레임워크 3대장 Angular, React, Vue와는 완전히 다른 접근법을 시도한다.

Frameworks without framework

보통의 모던 프레임워크들은 자체 엔진에 의존을 하여 렌더링을 한다. (즉, 런타임에서 렌더링 준비를 한다.)

하지만 스벨트의 경우 컴파일 단계에서 최대한 렌더링 준비가 끝날 수 있도록 노력한다.

스벨트는 결국 Vanilla JS를 지향한다는 것을 알 수 있다. 그 어떤 방법론이 등장하더라도 Vanilla JS보다 빠를 수 없기 때문이다.

스벨트의 특징

Write less code (적은 코드)
No Virtual DOM (가상 돔 없음)
Truly reactive (진정한 반응성)

Write less code

<script>
  let count = 0
  const increment = () => {
    count += 1
  }
</script>

<button on:click={increment}>
  Clicks: {count}
</button>

다른 프레임워크들과 비교해봐도 컴포넌트가 굉장히 심플한 구조를 따르고 있다.

스벨트는 별도의 클래스나 객체를 따로 정의하지 않고도 상태(state)를 추적할 수 있도록 해준다.

No Virtual DOM

애플리케이션이 복잡해지고 DOM Tree의 크기가 커지게 되면 화면을 업데이트할 때 성능 문제가 발생한다.

가상 돔(Virtual DOM)은 이런 기존의 문제점을 해결하기 위해 React나 Vue에 등장했다.

하지만 버추얼 돔 없이도 최적화가 가능하다는 것이 밝혀졌고, 스벨트는 컴파일 단계에서 최적화된 소스코드를 제공한다. 따라서 Virtual DOM 없이도 최적의 성능을 발휘할 수 있다.

이미 어느정도 성숙기에 들어간 React나 Vue가 당장 Virtual DOM을 버리지는 않을 것 같기 때문에 현재로썬 스벨트가 동일한 성능에서 가장 작은 소스코드를 만든다고 할 수 있다.

Truly Reactive

React는 이름부터 리액티브하고 Vue도 Reactive 리액티브 프로그래밍을 지향한다.

리액티브 프로그래밍은 이벤트가 발생했을 때 바인딩 되어 있는 상태(state)가 자동으로 갱신되는 것을 뜻한다.

리액티브 프로그래밍은 선언적 방식으로 코드를 매우 간결하고 직관적으로 만들어준다는 장점이 있다.

스벨트의 Truly Reactive…의 의미는 React나 Vue에 비해 더 성능이 뛰어나다는게 아니라 설계 측면에서 더 컴팩트해졌다는 것을 의미하는 것 같다.

<script>
  let count = 0
	$: doubled = count * 2
  const increment = () => {
    count += 1
  }
</script>

<button on:click={increment}>
  Clicks: {count}
</button>

const vm = new Vue ({
	el: '#example',
	data() {
		return {
			count: 0,
		}
	},
	computed: {
		double: function() {
			return this.count * 2
		},
	},
})

스벨트의 $는 Vue의 computed와 유사한 개념이다. 동일한 동작을 수행하지만 Vue에 비해서 확실히 컴팩트해졌다.

스벨트 설치

1
2
3

npx degit sveltejs/template project-name
cd project-name
npm install

참고: https://github.com/sveltejs/template

스벨트 템플릿을 사용하면 기본적으로 rollup 번들러를 사용한다.

자바스크립트 → 타입스크립트 (선택 사항)

타입스크립트로 개발하기 원한다면 scripts/setupTypeScript.js를 실행하라.

1 2	node scripts/setupTypeScript.js # 자바스크립트 → 타입스크립트 npm install # 전환 이후에는 다시 설치해줘야한다.

프로젝트 빌드와 테스트

1	npm run dev # 개발 서버 실행

npm run dev 혹은 npm run build 를 실행하면 public/build 폴더에 컴파일된 js 코드가 생성된다.

public/index.html을 보면 /build/bundle.js를 불러오고 있다.

이 템플릿의 경우, public 폴더를 루트로 하는 static 서버를 실행한다.

npm run start 명령어는 아무런 빌드를 하지 않고 static 서버만 실행한다.

SSR 솔루션은 SvelteKit을 사용하라. 스벨트의 Next.js라고 생각하면 된다.

스벨트 구조

main.js는 엔트리 파일이다.

App.svelte는 최상위 컴포넌트이다.

스벨트의 컴포넌트는 *.svelte의 확장자를 갖는다.

컴포넌트는 script, markup, style의 3단구조로 이루어져 있다.

시맨틱(Semantic) 설계

시맨틱 웹을 설계하면서 스벨트의 기본 사용법을 익혀보자.

설계대로 컴포넌트 파일을 만들자.

App.svelte

만들어진 컴포넌트들을 모두 import한다.

Header.svelte

헤더를 작성해보자. 딱히 스크립트나 스타일이 필요 없다면 쓰지 않아도 무방하다.

HMR(hot module replacement)을 지원하기 때문에 개발 웹 페이지는 별도로 새로고침을 하지 않아도 업데이트 된다.

Nav.svelte

Nav(navigation)은 breadcrumb 스타일로 만들어보자.

Aside.svelte & Section.svelte

Aside는 자유 게시판의 인기글, 최신글을 분류하는 개념 정의한다.

Section은 자유 게시판의 글을 표시하는 영역으로 정의한다.

slot은 다른 임의의 컴포넌트가 중첩되어 전달된다는 의미이다.

Article.svelte

이제 Section안에 들어가게될 Article을 만들어보자.

Article의 경우 재사용을 하기 때문에 부모 컴포넌트로부터 props를 받아서 렌더링 해보자.

스벨트의 props는 export 키워드를 사용하여 정의한다.

export let 으로 선언된 변수를 초기화하면 prop이 전달되지 않았을 때 기본값으로 해석할 수 있다.

이제 App.svelte 로 이동해서 prop을 넘겨주자.

이로써 스벨트의 기본적인 사용법을 알아보았다.

다음 포스팅에는 State, Prop, Event에 대해 자세히 알아보겠다.

참고

스벨트로 시작하는 웹 프론트엔드