EN

페이지 2: 라우팅 및 레이아웃

2. 라우팅 및 레이아웃

SvelteKit의 파일 시스템 기반 라우팅은 매우 직관적입니다. src/routes/ 디렉토리 안에 파일을 생성하여 경로를 정의합니다.

2.1. 페이지 (+page.svelte)

각 경로는 +page.svelte 파일을 통해 정의됩니다. 이 파일은 해당 경로의 UI를 렌더링합니다.

// src/routes/about/+page.svelte
<h1>About Us</h1>
<p>This is the about page.</p>

이 파일은 /about 경로에 해당합니다.

2.2. 레이아웃 (+layout.svelte)

+layout.svelte 파일은 여러 페이지에 걸쳐 공유되는 UI를 정의합니다. 모든 페이지의 상위 레이아웃을 생성할 수 있습니다.

// src/routes/+layout.svelte (전역 레이아웃)
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>
<slot /> <!-- 여기에 페이지 콘텐츠가 삽입됩니다 -->
<footer>
  <p>&copy; 2023 My App</p>
</footer>

<slot />은 현재 경로의 +page.svelte 콘텐츠가 삽입될 위치를 나타냅니다. 중첩된 레이아웃도 가능합니다.

2.3. 에러 페이지 (+error.svelte)

예상치 못한 오류가 발생했을 때 사용자에게 표시되는 페이지를 +error.svelte로 정의할 수 있습니다.

// src/routes/+error.svelte
<script>
  import { page } from '$app/stores';
</script>
<h1>{$page.status}: {$page.error?.message}</h1>
<p>Something went wrong.</p>
Contact Us