라우팅 생성

라우팅 생성 원리 및 폴더 구조

routify의 경우 src아래의 pages 폴더에 넣어둔 파일들에 따라 라우트가 자동으로 생성되는 형태로 작동합니다.

아래 표를 참고 하여 알아보도록 하겠습니다.

meteorAccount
├── .meteor
├── src
│   ├── pages
│   │    ├── blog
│   │    │   ├── [id].velte    => /about/1234
│   │    │   └── index.svelte  => /about
│   │    ├── _layout.svelte
│   │    ├── _fallback.svelte  => /404
│   │    ├── about.svelte       => /blog
│   │    └── index.svelte       => /
---------------------------------

1. 첫번째 시작페이이지는(ex: localhost:5000/) 경우 pages폴더 바로 아래의 index.svelte를 인식합니다.

2. 그리고 _로 시작하지 않는 파일들은 바로 그 이름이 라우팅 경로가 됩니다. 예를 들어 pages 바로 아래에 있는 about.svelte는 localhost:5000/about 와 같은 형태의 주소로 인식이 됩니다.

3. 만약 하위페이지가 있거나 전달 파라미터가 있는 경우라면 예를 들어 /pages/blog 라는 폴더가 있다면 blog폴더 아래에 다시한번 index.svelte를 만들면 localhost:5000/blog 로 접근이 되는 구조가 되고 여기에 localhost:5000/blog/123 과 같이 123을 파라미터로 받아야 하는 경우라면 이름 폴더 아래에 파라미터명을 []로 해서 파일을 생성해주면 됩니다. (ex: pages/blog/[id].svelte 와 같이 하면 위처럼 localhost:5000/blog/123 의 형태의 주소에서 123값을 받을 수 있음.)

4. _layout.svelte의 경우는 기본이 페이지들 모두가 기본적으로 가지는 layout을 설정하는 파일입니다. 예를 들어 _layout.svelte가 다음과 같은 내용이라고 한다면, 표시되는 모든 페이지 들은 <Nav /> 컴포넌트가 상단에 있고, 각 페이지 들은 <slot /> 영역에 표시되는 구조를 공통적으로 가지게 됩니다.

<script>
import Nav from "./Nav.svelte";
</script>

<div class="app">
  <Nav />
  <slot />
</div>

1. _fallback.svelte의 경우 특정 주소로 페이지를 찾을 수 없을 때 표시해 주는 404 오류 페이지라고 보시면 되겠습니다.

[만들면서 배우는 Svelte]

만들면서 배우는 svelte