routify의 경우 src아래의 pages 폴더에 넣어둔 파일들에 따라 라우트가 자동으로 생성되는 형태로 작동합니다.
아래 표를 참고 하여 알아보도록 하겠습니다.
Copy 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 => /
--------------------------------- 첫번째 시작페이이지는(ex: localhost:5000/) 경우 pages폴더 바로 아래의 index.svelte를 인식합니다.
그리고 _로 시작하지 않는 파일들은 바로 그 이름이 라우팅 경로가 됩니다. 예를 들어 pages 바로 아래에 있는 about.svelte는 localhost:5000/about
만약 하위페이지가 있거나 전달 파라미터가 있는 경우라면 예를 들어 /pages/blog 라는 폴더가 있다면 blog폴더 아래에 다시한번 index.svelte를 만들면 localhost:5000/bloglocalhost:5000/blog/123
_layout.svelte의 경우는 기본이 페이지들 모두가 기본적으로 가지는 layout을 설정하는 파일입니다. 예를 들어 _layout.svelte가 다음과 같은 내용이라고 한다면, 표시되는 모든 페이지 들은 <Nav /> 컴포넌트가 상단에 있고, 각 페이지 들은 <slot /> 영역에 표시되는 구조를 공통적으로 가지게 됩니다.
Copy 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는 다음처럼 변경합니다.
Copy <script>
import { Router } from "@sveltech/routify";
import { routes } from "@sveltech/routify/tmp/routes";
</script>
<Router {routes} /> 이제 pages폴더 아래에 다음과 같은 파일들을 만들어 줍니다.
todo.svelte : todo 서비스 페이지
_fallback.svelte : 잘 못 된 경로 오류 표시 페이지
_layout.svelte : 모든 페이지가 공통적으로 가지는 페이지
우선 기존 App.svelte에 있었던 todo 서비스 부분은 src/pages/todos.svelte라는 파일에 넣어줍니다.
Copy <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 를 만들어 줍니다.
Copy <header>
<div class="wrap">
<h1 class="main-title">ABOUT PAGE</h1>
<p>페이지 소개 : svelte 강좌 소개 페이지 입니다. </p>
</div>
</header>
Copy <header>
<div class="wrap">
<h1 class="main-title">HOME PAGE</h1>
<p>서비스의 첫번째 페이지 입니다. </p>
</div>
</header> _layout.svelte 는 모든 페이지가 공통적으로 가지는 요소라고 보시면 됩니다. 예제에서는 navigation bar 를 이용해 보도록 하겠습니다.
Copy <script>
import Nav from "./nav.svelte";
</script>
<Nav />
<div class="app" >
<slot />
</div>
Copy <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') 처럼 /경로로 해도 정상 작동 합니다.
Copy <script>
import { url } from "@sveltech/routify";
</script>
<a href="{$url('./about')}" >About</a> 현재 선택된 페이지 강조하기
메뉴의 경우에 현재 선택된 페이지를 강조해서 표시해야 하는 경우가 종종 발생합니다 이럴 때 사용하는 기능이 isActive 라는 helper 입니다. 사용법은 아래와 같습니다. 예제의 경우 경로가 /about일 때 located라는 css class가 활성화 되도록 하는 기능으로 사용 되었습니다.
Copy <script>
import { url, isActive } from "@sveltech/routify";
</script>
<a href={$url('./About')} class:located={$isActive('./About')}>About</a> 네이게이션은 각각의 각각의 링크가 접속경로를 생성해 주고, 만약 선택된 링크면 css에 .located 가 추가되는 형태로 만들겠습니다.
Copy <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에 적용해보도록 하겠습니다.
Copy <script>
import Nav from "./nav.svelte";
</script>
<Nav />
<div class="app" >
<slot />
</div> 라우터는 메우 빈번하게 사용되는 기능입니다. Routify를 이용하면 보신 것 처럼 pages 폴더에 파일을 만들어 주는 것으로 라우팅 요소를 관리 할 수 있는 편리함이 있습니다.
전달된 파라미터 받는 방법
앞에서 잠깐 설명 한 것 처럼 값을 받기 위해서는 폴더 내에 파일 이름을 전달받는 파라미터이름을 []로 감싸는 형태로 만들어 주면 됩니다.
만약 /blog/:id 이런 형태로 id값을 받기 위해서는 blog 폴더 아래에 [id].svelte라는 파일을 만들어 주면 됩니다. 그리고 파라미터 값이 여러 개일 경우에는 [첫번째][두번째].svelte 이런식으로 만들어 주면 됩니다.
Copy meteorAccount
├── .meteor
├── src
│ ├── pages
│ │ ├── blog
│ │ │ ├── [id].velte => /about/1234
│ │ │ └── index.svelte => /about
--------------------------------- 그리고 이렇게 전달된 파일은 params 라는 helper를 사용해 받을 수 있습니다. 아래 예제를 기준으로 설명드리면, 위에서 id값을 넘겼기 대문에 {$params.id} 와 같이 id값이 params helper의 하위 객체처럼 받아서 사용할 수 있습니다.
Copy <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]
