스벨트킷(SvelteKit) 레이아웃 정의하기 - 07

지금까지 우리는 라우팅을 다루면서 각 페이지를 독립적인 컴포넌트로 취급했습니다.
하지만 애플리케이션을 개발할 때는 모든 페이지에 고정된 레이아웃을 정의하는 것이 흔합니다. 예를 들어, 상단에 헤더와 하단에 푸터를 배치하는 것과 같은 구조가 자주 사용됩니다. SvelteKit에서는 레이아웃을 정의하기 위해 +layout.svelte 파일을 생성할 수 있습니다.

레이아웃 정의하기

1단계: +layout.svelte 파일 생성

우선, routes 폴더 안에 +layout.svelte 파일을 생성합니다. 이 파일이 기본 레이아웃 파일이 됩니다. 이 레이아웃 파일은 모든 페이지에 공통으로 적용됩니다.

2단계: 슬롯 태그 사용하기

이제 +layout.svelte 파일에 HTML 구조를 추가할 건데요, 여기에서 중요한 것은 slot 태그입니다. 이 태그는 모든 페이지가 렌더링될 위치를 지정해 줍니다. 예를 들어 홈 페이지로 이동하면 홈 페이지 HTML이 slot 태그에 대체되고, 블로그 페이지로 이동하면 블로그 페이지가 그 자리를 차지하게 됩니다.

<header>여기에 헤더가 들어갑니다</header> 
<slot /> 
<footer>여기에 푸터가 들어갑니다</footer>

 

이렇게 하면 헤더는 상단, 푸터는 하단에 고정되고, 중간 부분에 페이지 내용이 렌더링됩니다.

3단계: 스타일 추가하기

스타일을 추가하기 위해서는 style 태그를 사용하여 간단한 CSS를 작성할 수 있습니다. 예를 들어, 헤더와 푸터에 배경색과 패딩을 적용하려면 다음과 같이 할 수 있습니다.

<style> 
.layout-header 
{ background-color: #f5f5f5; 
  color: #333; 
  text-align: center; 
  padding: 10px; 
  } 
.layout-footer 
{ background-color: #f5f5f5; 
color: #333; 
text-align: center; 
padding: 10px; 
} 
</style>

4단계: 브라우저에서 확인하기

<style> 
    .layout-header 
    { background-color: #18be81; 
      color: #333; 
      text-align: center; 
      padding: 10px; 
      } 
    .layout-footer 
    { background-color: #42d9c2; 
    color: #333; 
    text-align: center; 
    padding: 10px; 
    } 
</style>

<header class="layout-header">여기에 헤더가 들어갑니다</header> 
<slot /> 
<footer class="layout-footer">여기에 푸터가 들어갑니다</footer>

이제 브라우저로 돌아가 보면 상단에 헤더, 하단에 푸터가 있고, 그 사이에 페이지 내용이 잘 렌더링되는 것을 확인할 수 있습니다. 홈 페이지를 보거나, 블로그 페이지로 이동하더라도 동일한 레이아웃이 유지됩니다.

중첩 레이아웃 정의하기

SvelteKit에서는 중첩 레이아웃도 가능하다는 점을 알아두어야 합니다. 예를 들어, 특정 제품 상세 페이지에만 적용되는 별도의 레이아웃을 정의할 수 있습니다.

1단계: product/[id] 폴더에 +layout.svelte 파일 생성

먼저, routes/products/[id]/+layout.svelte 파일을 생성합니다. 여기에도 기본적으로 slot 태그를 사용하여 페이지 내용을 렌더링할 위치를 지정해야 합니다.

<h3>추천 상품</h3> 
<slot />

2단계: 브라우저에서 확인하기

이제 브라우저에서 특정 제품 페이지로 이동하면, 상단에 "추천 상품"이라는 제목이 표시되고 그 아래에 해당 제품 페이지가 렌더링됩니다. 다른 제품 페이지로 이동하더라도 동일한 구조를 유지할 수 있습니다.

이렇게 하면 특정 페이지나 경로에만 적용되는 레이아웃을 정의할 수 있습니다. 따라서 애플리케이션의 구조가 좀 더 유연해지고, 필요한 경우 개별 페이지마다 다른 레이아웃을 제공할 수 있습니다.

---

이제 SvelteKit에서 레이아웃을 정의하는 방법이 명확해 졌을것입니다.