[Tutorial] Part 3-1. SvelteKit, Routing, Loading

1. What is SvelteKit?

Svelte: 컴포넌트 프레임워크

SvelteKit: 앱 프레임워크

 

SvelteKit이 제공하는 기능

• Routing
• 서버 렌더링, 서버 작업
• Data fetching
• 등등...

 

2. Routing

SvelteKit은 파일 시스템 베이스 라우팅을 사용한다: 즉, URL로 라우팅한다.

<nav>
	<a href="/">home</a>
	<a href="/about">about</a>
</nav>

<h1>home</h1>
<p>this is the home page.</p>

about을 누르면 -> about으로 이동(about 폴더 속의 +page.svelte로 이동)

 

서로 다른 페이지들이 공통 UI를 공유하는 경우, +layout.svelte로 같은 경로에 있는 라우터들이 UI를 공유할 수 있다.

예를 들어 +layout.svelte에 다음과 같이 공동으로 쓸 컴포넌트를 넣으면 하위 폴더의 +page.svelte에도 자동으로 들어간다.

<nav>
	<a href="/">home</a>
	<a href="/about">about</a>
</nav>

<slot />

 

라우팅을 동적으로 할 때는 [] braket을 사용한다.

예를 들어) src/routes/blog/[id]/.page.svelte

 

 

3. Loading data

SvelteKit의 핵심 업무는 다음 3가지이다:

1. Routing

2. Loading

3. Rendering

 

각 페이지의 +page.server.js가 load function을 정의할 수 있다.

 

목표: 블로그 리스트에서 title 보여주기

 

먼저 가져올 데이터를 임시로 data.js에 정의한다.

// blog/data.js

export const posts = [
	{
		slug: 'welcome',
		title: 'Welcome to the Aperture Science computer-aided enrichment center',
		content:
			'<p>We hope your brief detention in the relaxation vault has been a pleasant one.</p><p>Your specimen has been processed and we are now ready to begin the test proper.</p>'
	},

	{
		slug: 'safety',
		title: 'Safety notice',
		content:
			'<p>While safety is one of many Enrichment Center Goals, the Aperture Science High Energy Pellet, seen to the left of the chamber, can and has caused permanent disabilities, such as vaporization. Please be careful.</p>'
	},

	{
		slug: 'cake',
		title: 'This was a triumph',
		content: "<p>I'm making a note here: HUGE SUCCESS.</p>"
	}
];

 

그리고 +page.server.js에 데이터를 로딩하는 함수를 작성한다.

posts 리스트의 값들을 가공한 후 summaries로 저장한다.

load 함수로 리턴되는 값은 +page.svelte에서 사용 가능하다.

// blog/+page.server.js

import { posts } from './data.js';

export function load() {
	return {
		summaries: posts.map((post) => ({
			slug: post.slug,
			title: post.title
		}))
	};
}

🔻 load function
- url, params, props, fetch, session 등을 받을 수 있다.
- 반드시 값을 return 해야한다.

 

 

이제 +page.svelte에서 `data` prop를 사용하여 가져온 값들을 보여줄 수 있다.

<!-- blog/+page.svelte -->

<script>
	export let data;
</script>

<h1>blog</h1>

<ul>
	{#each data.summaries as { slug, title }}
		<li><a href="/blog/{slug}">{title}</a></li>
	{/each}
</ul>

 

 

 

다음 목표: 해당 slug 링크로 들어갔을 때, blog 제목과 내용도 보여줄 수 있게 수정해보자.

 

// blog/[slug]/+page.server.js

import { error } from '@sveltejs/kit';
import { posts } from '../data.js';

export function load({ params }) {
	const post = posts.find((post) => post.slug === params.slug);

	if (!post) throw error(404);

	return {
		post
	};
}

• 동적 라우팅한 페이지의 load 함수에서는 params를 인자로 받을 수 있다.
• params.slug와 일치하는 post를 찾아서 반환한다. 반환한 post로 +page.svelte에서 데이터를 보여줄 수 있다.

<script>
	export let data;
</script>

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

 

 

 

 

다음 목표: 모든 블로그 포스트 사이드바에 전체 리스트 보여주기

즉, 모든 child route에 데이터를 로딩해주자.

 

=> blog/+page.server를 blog/+layout.server.js로 이름을 변경한다.

이제 하위 디렉토리(blog/[slug]/+layout.svelte)는 부모(+layout.server.js)에게서 data.summaries를 상속받아서 사용할 수 있다.