SvelteKit

SvelteKit은 Svelte를 사용하여 강력하고 성능이 뛰어난 웹 애플리케이션을 빠르게 개발하기 위한 프레임워크이다.

Vue와 비교하면 SvelteKit은 Nuxt와 유사한 프레임워크이다.

 

Svelte는 UI 구성 요소를 렌더링합니다. Svelte만으로 이러한 구성 요소를 구성하고 전체 페이지를 렌더링할 수 있지만 전체 앱을 작성하려면 Svelte 이상의 것이 필요하다. SvelteKit은 링크를 클릭할 때 UI를 업데이트하는 라우터 및 서버 측 렌더링(SSR) 과 같은 기본 기능을 제공하고, HMR(핫 모듈 교체)을 수행하기 위해 Svelte 플러그인과 함께 Vite 를 활용함으로써 매우 빠르고 기능이 풍부한 개발 경험을 제공하기 위해 브라우저의 코드 변경 사항을 즉시 반영한다.

 

프로젝트 만들기

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

실행 후 console에 출력되는 URL로 접속해 보자. ( 옵션에 따라 다른 페이지가 보일 수 있다. )

SvelteKit은 2가지의 기본 개념이 있다.

 

• 앱의 각 페이지는 Svelte 구성요소이다.
• src/routes 디렉토리에 파일을 추가하여 페이지를 생성한다. 이는 사용자가 처음 앱을 최대한 빠르게 방문할 수 있도록 서버에서 랜더링되며 그 이후에는 클라이언트측 앱이 대신한다.

생성된 프로젝트는 일반적으로 다음과 같다.

# tree -I node_modules
.
├── README.md
├── package-lock.json
├── package.json
├── playwright.config.js
├── src
│   ├── app.html
│   ├── index.test.js
│   ├── lib
│   │   └── index.js
│   └── routes
│       └── +page.svelte
├── static
│   └── favicon.png
├── svelte.config.js
├── tests
│   └── test.js
└── vite.config.js

 

 

라우팅

 

라우팅은 SvelteKit의 핵심기능으로 파일 시스템 기반 라우터이다. 앱의 경로, 즉 사용자가 호출하는 URL경로는 디렉토리에 의해 정의된다.

 

• src/routes : 루트 경로. /src/routes/+page.svelte 파일을 생성하여 첫 페이지을 구성한다.
• src/routes/about : /about 경로를 생성한다. /src/routes/about/+page.svelte 파일을 생성하여 페이지를 구성한다.

동적라우팅

• src/routes/blog/[slug] : /blog/hello-world와 같이 사용자가 page를 요청할 때 

  여려개의 게시글을 조회하고자 하는 겨웅 모든 경로를 만드는 것은 어려울 것이다. 예를들어 /blog/1, /blog/2 ...

  이를 방지하려면 변수 이름 주위에 대괄호를 사용하여 동적 매개변수가 있는 경로를 생성할 수 있다.

 

# tree
.
├── +page.svelte
└── blog
    └── [slug]
        └── +page.svelte

 

# src/routes/blog/[slug]/+page.svelte
<script lang="ts">
  import { page } from '$app/stores'
</script>

<h1>Post</h1>

<pre>
  {JSON.stringify($page, null, 2)}
</pre>

 

실행결과

 

다음과 같이 구성할 수 있다.

# src/routes/blog/[slug]/+page.js
import { error } from '@sveltejs/kit';

/** @type {import('./$types').PageLoad} */
export function load({ params }) {
	if (params.slug === 'hello-world') {
		return {
			title: 'Hello world!',
			content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
		};
	}

	throw error(404, 'Not found');
}

# src/routes/blog/[slug]/+page.svelte
<script>
	/** @type {import('./$types').PageData} */
	export let data;
</script>

<h1>{data.title}</h1>
<div>{@html data.content}</div>

 

<실행결과>

 

Layout

 

반복되는 내용 ( 예를 들어 header, footer 등 )은 +page.svelte 대신에 +layout.svelte 파일에 정의하여 사용할 수 있다.

 

# src/routes/+layout.svelte
<nav>
	<a href="/">Home</a>
	<a href="/about">About</a>
	<a href="/settings">Settings</a>
</nav>

<slot></slot>

 

<실행결과>