[SVELTEKIT] Layout, Loading

Layout

 

1. +layout.svelte

• 웹페이지의 공통 레이아웃에 대한 설정
• Navigation bar 이나 전체 reset.css 등 앱 전체에 공통으로 들어가는 요소들을 src/routes/+layout.svelte 파일을 만들어서 넣어준다
• 기본 레이아웃 
• <slot></slot>

레이아웃 페이지에는 어떤 것이든 추가할 수 있지만 무조건 <slot> 을 포함하고 있어야 한다. 만약 레이아웃에 <nav>를 추가한다고 하면 다음과 같이 작성해야만 한다.

 

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/settings">Settings</a>
</nav>

<slot></slot>

-> 위의 코드에서 nav 영역은 공통으로 들어가는 부분이고, slot이 각 페이지마다 다르게 들어가는 부분이다. = +layout을 설정하면, 네비게이션이 모든 페이지에 공통으로 들어가고 각 페이지는 slot에 들어가게

 

2. nested layouts(중첩 +layout)

실제 앱에서는 /settings 페이지 하나만 존재하는 경우는 잘 없다. 대부분 /settings/profile, /settings/notifications 등 nested page를 가지고 있고 이 페이지들은 중복되는 요소들을 가지는 경우가 많다. 따라서 /settings 밑에 있는 파일들에게만 적용되는 layout을 만들고 싶다면 src/routes/settings/+layout.svelte 라는 파일을 만들면 된다.
= settings 하위에 있는 +page 는 해당 레이아웃을 추가 적용 받게 됨

 

<!-- src/routes/settings/+layout.svelte -->
<h1>Settings</h1>

<div class="submenu">
    <a href="/settings/profile">Profile</a>
    <a href="/settings/notifications">Notifications</a>
</div>

<slot></slot>

 

3. Reset layouts

만약 admin 페이지를 만든다고 가정해보면, admin 페이지(back-office)는 client page 의 레이아웃을 가져갈 필요가 없다. 이때 reset layout 을 사용하면 된다.

ex) 예를 들어서 /admin/* 페이지가 root layout 을 상속받지 않으려면 src/routes/admin/+layout.reset.svelte 라는 파일을 만들면 된다. 그 파일 내에서 새로운 layout 을 짜주면 된다.
= /admin 폴더 아래에 있는 파일들은 모두 기본 레이아웃을 사용

 

Loading

page나 layout으로 지정된 컴포넌트들은 load 라는 함수를 사용할 수 있다. load 함수는 컴포넌트가 생성되기 전에 실행되는 함수이다. 이 함수를 사용한다면 컴포넌트가 생성되기 전에 데이터를 fetch 할 수 있어 로딩을 없앨 수 있다.
-> 데이터가 엔드 포인트로부터 온다면 이 함수가 필요하지 않겠지만 외부 API에서 데이터를 로드하는 등 client 단에서 처리 할 수 있는 일을 할 때 더 유용하게 사용될 수 있다.

• load 함수는 client와 server 모두 위에서 작동한다

 

load function은 url, params, props, fetch, session, stuff 등 이 포함된 object 를 받는다. 또한 반드시 return 이 있어야 한다!!

 

ex)외부 api를 통해 data를 받아오는 예시

<!-- src/routes/blog/[slug].svelte -->
<script context="module">
  /** @type {import('@sveltejs/kit').Load} */
  export async function load({ params, fetch, session, stuff }) {
    const response = await fetch(`https://cms.example.com/article/${params.slug}.json`);

    return {
      status: response.status,
      props: {
        article: response.ok && (await response.json())
      }
    };
  }
</script>