소개 & 설치

router 소개

라우터는 url주소에 따라 보여지는 페이지가 달라 지는 기능을 말합니다.

svelte는 기본적으로 전용 라우터를 가지고 있지 않습니다. 하지만, 다양한 오픈소스 라우터를 사용해 구현할 수 있습니다. 많은 라우터중에서 제가 소개시켜드릴 제품은 Routify 라는 제품입니다.

이번 강좌에서는 이 Routify를 가지고 지금까지 작업한 todo 서비스에 라우터 기능을 추가해 보도록 하겠습니다.

routify 소개

참고로 routify는 사용하는 방법이 크게 2가지가 있습니다.

첫번째는 npx로 프로젝트를 생성하는 방법이고,

두번째는 이미 생성된 프로젝트에 추가적으로 routify를 셋팅 하는 방법이 있습니다. .

강좌에서는 두번째인 이미 생성된 프로젝트에 추가적으로routify를 셋팅 하는 방법을 중심으로 설명하겠습니다.

설치 및 기본 세팅

1-1) install

npm i -D @sveltech/routify

1-2) package.json 업데이트

/** package.json **/
...
"scripts": {
    "dev": "routify -c my-server",
    "my-server": "rollup -c -w",
    ...
}

1-3) App.svelte 에 기본 설정

<!-- src/App.svelte -->
<script>
  import { Router } from "@sveltech/routify";
  import { routes } from "@sveltech/routify/tmp/routes";
</script>

<Router {routes} />

1-4) SAP 활성화 (was 설정)

:: Sirv

/** package.json **/
...
"scripts": {
    "start": "sirv public --single"
    ...
}

:: Nginx

server {
  listen 80;
  root /usr/share/nginx/html;
  gzip on;
  gzip_types text/css application/javascript application/json image/svg+xml;
  gzip_comp_level 9;
  etag on;
  location / {
    try_files $uri $uri/ /index.html;
  }
}

[만들면서 배우는 Svelte]

만들면서 배우는 svelte