Sveltekit 변경 사항: 경로

소개

아시다시피, 지난 기사에서 새로운 경로 변경에 대해 언급한 곳을 설명했으며 이제 어떻게 작동하는지 살펴보고 지금은 무엇인지 살펴보겠습니다.

If you see a tree I'll will be showing it from src/routes directory.

새로운 디렉터리 기반 라우팅

이제 sveltekit에서는 모든 것이 새 것처럼 보이며 라우팅에도 적용됩니다. 우리 모두는 파일 기반 라우팅의 팬이었지만 sveltekit은 디렉토리 기반의 새로운 라우팅과 함께 제공됩니다.
이제 필요에 따라 +page.svelte , +page.js , +page.server.js 파일을 추가하는 것보다 폴더를 정의합니다.

+page.svelte는 클라이언트용 html, css 및 js가 모두 있는 클라이언트 측 코드용입니다.

+page.js는 앞에서 자세히 설명한 Load 기능에 대한 것입니다.

+page.server.js는 이전에 shadow endpoint라는 이름으로 알 수 있는 모든 서버 측 코드용입니다. 여기에서 경로에 대한 모든 form actions를 정의합니다.

That's the overview we need to get some more details. So we start from layout and gonna end at server routes.

레이아웃

이제 __layout.svelte 와 같은 것은 없고 +layout.svelte 로 대체되었으며 이제 더 많은 것을 살펴봐야 합니다.

// +layout.svelte

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

<slot></slot>

+layout.js는 layout.server.js와 동일하게 작동하지만 +layout.svelte 내부에 __layout.svelte를 정의해야 합니다. 그리고 Load Function 서버에서 실행해야 하는 경우 +layout.js 를 사용할 것입니다.

export function load() {
  return {
    sections: [
      { slug: 'profile', title: 'Profile' },
      { slug: 'notifications', title: 'Notifications' }
    ]
  };
}

그러나 여기에 Load Function에서 layout.server.js만 할 수 있는 트위스트가 있습니다.

+layout.js, +layout.server.js can export page options — prerender, ssr and csr.

오류 페이지

Load Functions 중에 오류가 발생하면 SvelteKit에서 기본 오류 페이지를 렌더링합니다. layout.server.js 파일을 추가하여 경로별로 이 오류 페이지를 사용자 정의할 수 있습니다(따라서 현재 http request가 없음).

<script>
  import { page } from '$app/stores';
</script>

<h1>{$page.status}: {$page.error.message}</h

+페이지

+page.server.js 구성 요소는 앱의 페이지를 정의합니다. 따라서 load 경로는 +error.svelte 내부 __error.svelte 가 됩니다. 클라이언트 측 코드는 무엇입니까?

// `+page.svelte`
<script>
  /** @type {import('./$types').PageData} */
  export let data;
</script>

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

A+page.svelte 파일이 해당 경로의 로드 기능을 처리합니다. 자세한 설명은 을 읽어보십시오.
/ 파일은 양식 작업을 처리하는 서버 측 코드를 처리합니다.

// page.server.js or `+page.js`
import { error } from '@sveltejs/kit';

/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
  const post = await getPostFromDatabase(params.slug);

  if (post) {
    return post;
  }

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

If load lets you read data from the server, actions let you write data to the server using the

element

따라서 +page.svelte라는 경로를 원하면 src/routes/라는 이름으로 +page.js 디렉토리 안에 디렉토리를 생성해야 합니다. 그 안에 page.server.js를 추가하고 필요한 경우 about 추가하고 양식 작업 및 서버 측 렌더링 광고src/routes를 사용하고 싶습니다.

I know it's alot to degist first but after one project you are sold for the idea.

+서버 경로

때로는 about에 +page.svelte 또는 load function가 필요한 경우 간단히 +page.js를 사용할 수 있습니다. 따라서 +page.server.js라는 이름으로 API 또는 endpoints를 만들려면 http requests라는 이름으로 +server.js 안에 디렉터리를 만들고 그 안에 API 파일을 추가합니다.

이러한 끝점은 예를 들어 메서드를 요청할 수 있습니다Endpoint. login , src/routes , login , +server.js AND HTTP 및 http 요청의 GET 및 POST 메서드에서 작동합니다.

// `+server.js`

import { error } from '@sveltejs/kit';

/** @type {import('./$types').RequestHandler} */
export function GET({ url }) {
  const min = Number(url.searchParams.get('min') ?? '0');
  const max = Number(url.searchParams.get('max') ?? '1');

  const d = max - min;

  if (isNaN(d) || d < 0) {
    throw error(400, 'min and max must be numbers, and min must be less than max');
  }

  const random = min + Math.random() * d;

  return new Response(String(random));
}

new Response is a reponse object that will return a response to client.

마지막으로 Routes Tress

.
├── (authed)
│   ├── +layout.server.ts
│   ├── +layout.svelte
│   └── dashboard
│       ├── +page.svelte
│       └── +page.ts
├── (unauthed)
│   ├── +layout.server.ts
│   ├── +layout.svelte
│   ├── +page.svelte
│   ├── +page.ts
│   ├── createAdmin
│   │   ├── +page.server.ts
│   │   └── +page.svelte
│   └── login
│       ├── +page.server.ts
│       └── +page.svelte
└── api

여기에서 내 프로젝트의 파일 구조를 볼 수 있으며 괄호 안에 이름이 있는 이상한 폴더를 보았을 수 있습니다. 그룹화된 레이아웃입니다. 나중에 논의하겠습니다.

I'll suggest you to migrate your old projects to newer one to understand it more better.

이것은 내가 당신을 위해 쓰는 것입니다. 묻고 싶은 것이나 제안하고 싶은 것이 있다면 댓글에 적어주세요.