# 소개 & 설치

### 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\]](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>