# Routing

## 라우팅이란?

> 요청한 경로(URL)에 따라 다른 페이지(컴포넌트)를 렌더링하는 것을 의미한다.

### SPA Routing

> 지정된 URL에 따라 보여줄 컴포넌트를 결정하는 프로세스

SPA(Single Page Application)는 초기에 서버에서 페이지(HTML)를 받아오고, 이후에 브라우저의 [`History API`](#window.history)를 이용하여 URL을 수동으로 변경하면서 해당 URL에 매칭되는 컴포넌트를 렌더링한다.

이를 통해 페이지 전환 없이 URL에 따라 컴포넌트를 동적으로 렌더링 시킬 수 있다.

## Web APIs

<figure><img src="https://1912740209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3GVYdZvmqQyBVq29ebqk%2Fuploads%2FHexe2WnkxkhkOMUPxEPS%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-04-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%202.59.01.jpg?alt=media&#x26;token=c59943f1-14ac-4ce1-9a37-8b3e402080bb" alt=""><figcaption></figcaption></figure>

브라우저에서 제공하는 API로, 자바스크립트를 사용하여 브라우저의 다양한 기능에 접근할 수 있는 인터페이스를 제공한다. (DOM 제어, 브라우저 탐색 기록, 사용자 위치정보, URL 정보 등)

### Window\.history

> 브라우저의 탐색 기록을 조작할 수 있는 API
>
> 주소 표시줄, 뒤로가기, 앞으로가기 버튼 등 관련된 이벤트를 제어한다.

#### Methods

<table><thead><tr><th>Methods</th><th width="295.3333333333333">Arguments</th><th>Explain</th></tr></thead><tbody><tr><td>.<strong>pushState</strong>(state, title, url)</td><td><ul><li><strong>state</strong> → 새로운 History 항목에 연결할 상태 객체, 값이 변경될 때마다 <code>popstate</code> 이벤트 호출</li><li><strong>title</strong> → 아직 쓰이지 않는 기능, 미래를 위해 "" 라도 설정하라고 권고한다.</li><li><strong>url</strong> → 이동할 URL, 실제로 브라우저는 <code>pushState</code> 후에 해당 URL로 탐색하지 않음, 즉 url만 수정</li></ul></td><td><ul><li>브라우저의 세션 History Stack에 상태를 추가</li><li>해당 URL로 이동</li></ul></td></tr><tr><td>.<strong>replaceState</strong>(state, title, url)</td><td></td><td><ul><li>현재 History를 수정하고 인자로 전달된 값으로 대체</li><li>해당 URL로 이동.</li></ul></td></tr><tr><td>.<strong>back</strong>()</td><td></td><td><ul><li>이전 페이지로 이동</li></ul></td></tr><tr><td>.<strong>forward</strong>()</td><td></td><td><ul><li>다음 페이지로 이동</li></ul></td></tr><tr><td>.<strong>go</strong>(num)</td><td><ul><li>num → 상대적인 page index</li></ul></td><td><ul><li>지정한 페이지만큼 이동</li></ul></td></tr></tbody></table>

{% hint style="info" %}
**popstate event**

* 사용자가 뒤/앞으로 가기 버튼을 클릭하거나, 브라우저의 세션 기록을 조작하면 호출된다.
* **`popstate`** 이벤트가 호출되면 이를 이용해서, 컴포넌트를 동적으로 업데이트 시킨다.

```typescript
const routes = {
  '/': homePage,
  '/dashboard': dashboardPage,
  '/order': orderPage,
};

window.onpopstate = () => {
  root.innerHTML = routes[window.location.pathname];
}
```

{% endhint %}

### Window\.location

> 현재 페이지의 주소(URL)에 대한 정보와 새로고침, 리다이렉션 메서드를 갖고 있는 객체

window\.location은 현재 페이지의 위치 정보를 갖는 객체를 반환한다.

해당 객체는 브라우저의 전역 변수로 다양한 방법으로 접근 할 수 있다.

* `window.location`
* `window.document.location`
* `document.location`
* `location`

#### Properties

> origin을 제외한 프로퍼티는 변경가능하다.
>
> property가 변경되면 페이지 이동이 일어난다.

URL: `https://devload.com/routing?filter=routing#window.location`

| window\.location Property | Explain                                                                                                                |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| .**origin**               | <ul><li>Base URL에 대한 정보 </li><li>protocol + host name + port number</li><li><code>https;//devload.com</code></li></ul> |
| .**protocol**             | <ul><li>프토토콜 (http:, https:)</li><li><code>https:</code></li></ul>                                                     |
| .**host**                 | <ul><li>호스트 명 (도메인 명 + 포트 번호)</li><li><code>devload.com</code></li></ul>                                               |
| .**hostname**             | <ul><li>도메인 명</li><li><code>devload.com</code></li></ul>                                                               |
| .**port**                 | <ul><li>포트 번호</li><li><code>''</code></li></ul>                                                                        |
| .**pathname**             | <ul><li><code>/</code> 다음에 오는 경로</li><li><code>/routing</code></li></ul>                                               |
| .**search**               | <ul><li><code>?</code> 다음에 오는 <code>query string</code></li><li><code>?filter-routing</code></li></ul>                 |
| .**hash**                 | <ul><li><code>#</code> 뒤에 오는 <code>Fragment Ideintifier</code></li><li><code>#window\.location</code></li></ul>        |
| .**href**                 | <ul><li>URL 전체 값</li><li><code><https://devload.com/routing?filter=routing#window.location></code></li></ul>           |

{% hint style="info" %}
**Query String**이란 브라우저에서 서버에게 추가적인 정보를 제공하기 위해(주로 GET 요청) 사용하는 문자열로 `?` 뒤에 `key:value` 쌍으로 구분지어 나열한다.
{% endhint %}

{% hint style="info" %}
**Fragment Identifier**란 URI 내에서 특정 리소스 조각을 가리키는 식별자이다.\
HTML 내에서 특정 부분을 가리킬 때 사용됨
{% endhint %}

#### Methods

| Methods         |                                                                   |
| --------------- | ----------------------------------------------------------------- |
| .**assign()**   | <ul><li>지정된 URL로 이동 한다</li></ul>                                  |
| .**replace()**  | <ul><li>지정된 URL로 이동 한다</li><li>현재 페이지를 탐색 기록에서 지운다</li></ul>      |
| .**reload()**   | <ul><li>현재 페이지를 새로고침</li></ul>                                    |
| .**toString()** | <ul><li>URL 반환</li><li>window\.location.href\<readonly></li></ul> |
