todo 서비스에 적용
Last updated
Was this helpful?
Last updated
Was this helpful?
Was this helpful?
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 => /
---------------------------------첫번째 시작페이이지는(ex: localhost:5000/) 경우 pages폴더 바로 아래의 index.svelte를 인식합니다.
그리고 _로 시작하지 않는 파일들은 바로 그 이름이 라우팅 경로가 됩니다. 예를 들어 pages 바로 아래에 있는 about.svelte는 localhost:5000/about 와 같은 형태의 주소로 인식이 됩니다.
만약 하위페이지가 있거나 전달 파라미터가 있는 경우라면 예를 들어 /pages/blog 라는 폴더가 있다면 blog폴더 아래에 다시한번 index.svelte를 만들면 localhost:5000/blog 로 접근이 되는 구조가 되고 여기에 localhost:5000/blog/123 과 같이 123을 파라미터로 받아야 하는 경우라면 이름 폴더 아래에 파라미터명을 []로 해서 파일을 생성해주면 됩니다. (ex: pages/blog/[id].svelte 와 같이 하면 위처럼 localhost:5000/blog/123 의 형태의 주소에서 123값을 받을 수 있음.)
_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
이제 이전에 만든 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>