# History mode

## History mode

이 문서에서는 Vue router에서 설정 가능한 history 모드의 차이점에 대해서 살펴본다.

{% embed url="<https://router.vuejs.org/guide/essentials/history-mode.html>" %}

### Hash mode

주소 사이에 <mark style="color:blue;">`hash(#)`</mark> 기호를 넣어 관리하는 방식이다. 주소가 다음과 같이 표시된다.

```
http://localhost:8080/#/
http://localhost:8080/#/first
http://localhost:8080/#/second
http://localhost:8080/#/third/list
```

주소에서 <mark style="color:blue;">`hash(#)`</mark> 기호 뒤는 요청 변수로 인식하지 않는다. 따라서 화면이 변화해도 서버로 요청이 가지 않는다. 즉, 서버에서는 최초 페이지에 대한 요청만 처리할 수 있도록 구현하면 된다.

<mark style="color:blue;">`hash mode`</mark>는 <mark style="color:red;">`createWebHashHistory()`</mark> 함수를 호출하여 설정할 수 있다.

```javascript
import {createWebHashHistory, createRouter} from 'vue-router';
const router = createRouter({
    history:createWebHashHistory(),
    //생략
});
```

<div align="left"><img src="/files/B7ooqMV3NNQowP5m9lCj" alt="Hash mode에서는 주소에 hash(#)가 생성된다"></div>

{% hint style="info" %}

#### hash mode 문제점

hash mode 방식은 검색엔진 최적화(SEO, Search Engine Optimization)이 이루어지지 않는다는 것이다. <mark style="color:blue;">`hash(#)`</mark> 이후 글자들로 화면을 구분하기 때문에 검색엔진에서 해당 페이지의 정보를 수집할 수 없어 검색엔진에 메인페이지를 제외한 나머지 페이지들이 노출되지 않는다.
{% endhint %}

### HTML5 mode

주소를 일반 주소와 동일하게 관리하는 방식이다. 주소가 다음과 같이 표시된다

```
http://localhost:8080/
http://localhost:8080/first
http://localhost:8080/second
http://localhost:8080/third/list
```

주소에 <mark style="color:blue;">`hash(#)`</mark> 기호가 없어 모든 요청이 서버를 거치게 된다. 따라서 서버에서는 해당 주소에 대한 처리를 구현해야 한다.

<mark style="color:blue;">`HTML5 mode`</mark>는 <mark style="color:red;">`createWebHistory()`</mark> 함수를 호출하여 설정할 수 있다.

```javascript
import {createWebHistory, createRouter} from 'vue-router';
const router = createRouter({
    history:createWebHistory(),
    //생략
});
```

<div align="left"><img src="/files/Dapam3gqC7ur9f3zeZDL" alt="HTML5 mode에서는 주소에 Hash(#)가 생성되지 않는다"></div>

### Memory mode

주소를 변화하지 않고 내부 메모리 수준에서 화면 변화 이력을 관리하는 방식이다. 주소가 다음과 같이 고정된다.

```
http://localhost:8080/
```

<mark style="color:blue;">`memory mode`</mark>는 <mark style="color:red;">`createMemoryHistory()`</mark> 함수를 호출하여 설정할 수 있다.

```javascript
import {createMemoryHistory, createRouter} from 'vue-router';
const router = createRouter({
    history:createMemoryHistory(),
    //생략
});
```

<div align="left"><img src="/files/dwfyZWXOO0JElXnYNbum" alt="Memory mode에서는 주소가 변하지 않는다"></div>

{% hint style="info" %}

#### memory mode 사용 시 주의 사항

<mark style="color:blue;">`memory mode`</mark> 방식에서는 브라우저에 주소 변경 이력이 남지 않기 때문에 뒤로 가기 또는 앞으로 가기가 불가능하다.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.sysout.co.kr/web/develop-page/js/vuejs/vue-cli-3/vue-router-4/history-mode.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.