# 라우팅 생성

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

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`](http://localhost:5000/blog) 와 같은 형태의 주소로 인식이 됩니다.
3. 만약 하위페이지가 있거나 전달 파라미터가 있는 경우라면 예를 들어 /pages/blog 라는 폴더가 있다면 blog폴더 아래에 다시한번 index.svelte를 만들면 [`localhost:5000/blog`](http://localhost:5000/blog) 로 접근이 되는 구조가 되고 여기에 [`localhost:5000/blog/123`](http://localhost:5000/blog) 과 같이 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\]](https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EC%8A%A4%EB%B2%A8%ED%8A%B8)

<div align="left"><img src="https://2456181503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFoRG7N_kopXKHrUIam%2F-MGqndftNeXvP53tyaae%2F-MGqwZuQK1aEaE5Bp21i%2F%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%86%E1%85%A7%E1%86%AB%E1%84%89%E1%85%A5%20%E1%84%87%E1%85%A2%E1%84%8B%E1%85%AE%E1%84%82%E1%85%B3%E1%86%AB%20svelte%20small.png?alt=media&#x26;token=e769cba7-bb5e-40a9-89c6-2879e60242bf" alt="만들면서 배우는 svelte"></div>
