# todo 서비스에 적용

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

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

```
meteorAccount
├── .meteor
├── src
│   ├── pages
│   │    ├── blog
│   │    │   ├── [id].velte    => <http://IP> address/blog/1234
│   │    │   └── index.svelte  => /blog
│   │    ├── _layout.svelte
│   │    ├── _fallback.svelte  => /404
│   │    ├── about.svelte       => /about
│   │    └── 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 /> 영역에 표시되는 구조를 공통적으로 가지게 됩니다.

```
svelte
│   └── public
│        ├── favicon.png
│        ├── global.css
│        └── index.html
├── scripts
├── src
│   ├── components
│   │    ├── TodoHeader.svelte
│   │    ├── TodoInfos.svelte
│   │    ├── TodoItem.svelte
│		│		 └── TodoList.svelte
│   ├── pages
│   │    ├── about
│   │    │    ├── [id].svelte
│   │    │  	└── index.svelte
│   │    ├── _fallback.svelte
│   │    ├── _layout.svelte
│   │    ├── index.svelte
│   │    ├── nav.svelte
│   │    ├── posts.svelte
│   │    └── todos.svelte
│   ├── App.svelte
│   ├── constant.svelte
│   ├── main.svelte
│   └── store.js
├── package.json
└── rollup.config.js
```

이제 이전에 만든 todo 서비스에 home, about 페이지를 Routify를 이용해 추가해 보도록 하겠습니다.

일단 처음으로 할일은 Routify를 설치 후 src아래에 pages라는 폴더를 만드는 것입니다. 이미 설명 드렸지만 이 pages를 참고로 해서 라우트 요소들을 만들기 때문입니다.

라우터가 pages 폴더를 기준으로 자동으로 라우팅요소들을 만들므로 App.svelte는 다음처럼 변경합니다.

```
<script>
  import { Router } from "@sveltech/routify";
  import { routes } from "@sveltech/routify/tmp/routes";
</script>

<Router {routes} />
```

이제 pages폴더 아래에 다음과 같은 파일들을 만들어 줍니다.

* index.svelte : 첫 페이지
* about.svelte : about 페이지
* todo.svelte : todo 서비스 페이지
* \_fallback.svelte : 잘 못 된 경로 오류 표시 페이지
* \_layout.svelte : 모든 페이지가 공통적으로 가지는 페이지
* nav.svelte : 네비게이션바 페이지

우선 기존 App.svelte에 있었던 todo 서비스 부분은 src/pages/todos.svelte라는 파일에 넣어줍니다.

* todos.svelte

```
<script>
import TodoHeader from '../components/TodoHeader.svelte'
import TodoInfos from '../components/TodoInfos.svelte'
import TodoList from '../components/TodoList.svelte'
</script>

<TodoHeader />
<TodoInfos />
<TodoList />
```

다음으로 about.svelte, index.svelte 를 만들어 줍니다.

* about.svelte

```
<header>
  <div class="wrap">
    <h1 class="main-title">ABOUT PAGE</h1>
    <p>페이지 소개 : svelte 강좌 소개 페이지 입니다. </p> 
  </div>
</header>
```

* index.svelte

```
<header>
  <div class="wrap">
    <h1 class="main-title">HOME PAGE</h1>
    <p>서비스의 첫번째 페이지 입니다. </p>   
  </div>
</header>
```

\_layout.svelte 는 모든 페이지가 공통적으로 가지는 요소라고 보시면 됩니다. 예제에서는 navigation bar 를 이용해 보도록 하겠습니다.

* nav.svelte

```
<script>

import Nav from "./nav.svelte";

</script>

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

* layout

```
<script>

import { url, isActive } from "@sveltech/routify";
let id = "123"

</script>

<nav class="menu-box">
  <a href="{$url('/index')}" class="btn" >Home</a>
  <a href={$url('/about/:id', {id: id} )}  class="btn">About</a>
  <a href="{$url('./todos')}" class="btn">Todos</a>
  <a href="{$url('./posts')}" class="btn">Posts</a>
</nav>
```

#### 기본 사용법

기본적인 사용방법은 a태그의 href에 $url helper를 사용하는 것입니다. 아래와 같이 `<a href="{$url('./파일경로')}" >` $url 안쪽에 page를 기준으로해서 파일 또는 폴더 경로를 넣어 주면 되겠습니다. 위에서 예제로 든 about.svelte의 경우 pages 폴더에 바로 있으면 ./about 로 경로를 지정해 주면 됩니다. 참고로 그냥 `$url('/about')` 처럼 /경로로 해도 정상 작동 합니다.

```
<script>
import { url } from "@sveltech/routify";
</script>

<a href="{$url('./about')}" >About</a>
```

#### 현재 선택된 페이지 강조하기

메뉴의 경우에 현재 선택된 페이지를 강조해서 표시해야 하는 경우가 종종 발생합니다 이럴 때 사용하는 기능이 `isActive` 라는 helper 입니다. 사용법은 아래와 같습니다. 예제의 경우 경로가 /about일 때 located라는 css class가 활성화 되도록 하는 기능으로 사용 되었습니다.

```
<script>
import { url, isActive } from "@sveltech/routify";
</script>

<a href={$url('./About')} class:located={$isActive('./About')}>About</a>
```

네이게이션은 각각의 각각의 링크가 접속경로를 생성해 주고, 만약 선택된 링크면 css에 `.located` 가 추가되는 형태로 만들겠습니다.

* nav.svelte

```
<script>

import { url, isActive } from "@sveltech/routify";

</script>

<nav class="menu-box">
  <!-- {#each links as [path, name]}
    <a href="{$url(path)}" class:located={$isActive(path)}>{name} + {path}</a>
  {/each} -->

  <a href="{$url('/index')}" class:located={$isActive('./index')} class="btn" >Home</a>
  <a href={$url('/about')} class:located={$isActive('./about')} class="btn">About</a>
  <a href="{$url('./todos')}" class:located={$isActive('./todos')} class="btn">Todos</a>
  <a href="{$url('./posts')}" class:located={$isActive('./posts')} class="btn">Posts</a>

</nav>
```

이제 이렇게 만들어진 네이게이션 파일을 \_layout.svelte에 적용해보도록 하겠습니다.

* \_layout.svelte

```
<script>

import Nav from "./nav.svelte";

</script>

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

라우터는 메우 빈번하게 사용되는 기능입니다. Routify를 이용하면 보신 것 처럼 pages 폴더에 파일을 만들어 주는 것으로 라우팅 요소를 관리 할 수 있는 편리함이 있습니다.

#### 전달된 파라미터 받는 방법

앞에서 잠깐 설명 한 것 처럼 값을 받기 위해서는 폴더 내에 파일 이름을 전달받는 파라미터이름을 \[]로 감싸는 형태로 만들어 주면 됩니다.

만약 `/blog/:id` 이런 형태로 id값을 받기 위해서는 blog 폴더 아래에 \[id].svelte라는 파일을 만들어 주면 됩니다. 그리고 파라미터 값이 여러 개일 경우에는 \[첫번째]\[두번째].svelte 이런식으로 만들어 주면 됩니다.

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

그리고 이렇게 전달된 파일은 `params` 라는 helper를 사용해 받을 수 있습니다. 아래 예제를 기준으로 설명드리면, 위에서 id값을 넘겼기 대문에 `{$params.id}` 와 같이 id값이 params helper의 하위 객체처럼 받아서 사용할 수 있습니다.

* about.svelte

```
<script>
import { params } from '@sveltech/routify'
</script>

<header>
  <div class="wrap">
    <h1 class="main-title">ABOUT PAGE</h1>
    <p>페이지 소개 : svelte 강좌 소개 페이지 입니다. </p> 
		<p>param : {$params.id}</p>  
  </div>
</header>
```



[\[만들면서 배우는 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>



