{"componentChunkName":"component---src-templates-blog-post-js","path":"/vue/vue-js-히스토리-관리/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"d6b5307c-5e07-55a5-85cd-72b2485bce3d","excerpt":"Vue Js 히스토리 관리 History API 리엑트, 뷰, 앵귤러를 사용하면 기본적으로 싱글 페이지 애플리케이션(SPA) 형태로 개발 하게 된다. SPA…","html":"

\"Vue

\n

History API

\n

리엑트, 뷰, 앵귤러를 사용하면 기본적으로 싱글 페이지 애플리케이션(SPA) 형태로 개발 하게 된다. SPA의 단점은 주소가 바뀌지 않는다는 것이다. 초창기에는 주소 뒤에 #(해쉬) #!(해쉬뱅)을 붙이고 뒤에 하위 주소를 넣었다. https://www.doamin.com/#coffee 하지만 이 방식은 의미 없는 #(해쉬뱅) 를 넣었기 때문에 서버에서는 제대로된 주소라고 생각 하지 않는다.

\n

따라서 해쉬뱅 대신 브라우저에서 제공하는 주소 API를 사용해 주소를 바꾸게 되었는데, 그게 바로 History API이다. 요즘 웬만한 SPA의 라우터들은 이 History API를 사용하고 있다. IE도 10부터 가능하다.

\n

이 History API는 기존 history 객체(window.history)를 그대로 활용한다. 따라서 자바스크립트로 뒤로가기(history.back())와 앞으로 가기(history.forward()), 지정한 위치로 가기(history.go(인덱스))를 모두 사용할 수 있다.

\n

History API 는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공한다.

\n

속성

\n

History 인터페이스는 어떤 속성도 상속하지 않는다.

\n

History.length (Read only)\n현재 페이지를 포함해, 세션 기록의 길이를 나타내는 정수를 반환한다.

\n

History.scrollRestoration\n기록 탐색 시 스크롤 위치 복원 여부를 명시할 수 있다. 가능한 값은 auto와 manual이다.

\n

History.state (Read only)\n기록 스택 최상단의 스테이트를 나타내는 값을 반환한다. popstate 이벤트를 기다리지 않고 현재 기록의 스테이트를 볼 수 있는 방법이다.

\n

메서드

\n

History.back()\n세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드이다. 브라우저의 뒤로 가기 버튼을 눌렀을 때, 그리고 history.go(-1)을 사용했을 때와 같다.

\n

History.forward()\n세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드이다. 브라우저의 앞으로 가기 버튼을 눌렀을 때, 그리고 history.go(1)을 사용했을 때와 같다.

\n

History.go()\n현재 페이지를 기준으로, 상대적인 위치에 존재하는 세션 기록 내 페이지로 이동하는 비동기 메서드이다. 예를 들어, 매개변수로 -1을 제공하면 바로 뒤로, 1을 제공하면 바로 앞으로 이동한다. 세션 기록의 범위를 벗어나는 값을 제공하면 아무 일도 일어나지 않는다. 매개변수를 제공하지 않거나, 0을 제공하면 현재 페이지를 다시 불러온다.

\n

History.pushState()\n주어진 데이터를 지정한 제목(제공한 경우 URL도)으로 세션 기록 스택에 넣는다. 데이터는 DOM이 불투명(opaque)하게 취급하므로, 직렬화 가능한 모든 JavaScript 객체를 사용할 수 있다. 참고로, Safari를 제외한 모든 브라우저는 title 매개변수를 무시한다.

\n

History.replaceState()\n세션 기록 스택의 제일 최근 항목을 주어진 데이터, 지정한 제목 및 URL로 대체한다. 데이터는 DOM이 불투명(opaque)하게 취급하므로, 직렬화 가능한 모든 JavaScript 객체를 사용할 수 있다. 참고로, Safari를 제외한 모든 브라우저는 title 매개변수를 무시한다.

\n

Vue History Mode

\n

vue-router의 기본 모드는 hash mode 입니다. URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않는다. 해시를 제거하기 위해 라우터의 history 모드 를 사용할 수 있다. history.pushState API를 활용하여 페이지를 다시 로드하지 않고도 URL 탐색을 할 수 있다.

\n
import Vue from \"vue\"\nimport VueRouter from \"vue-router\"\n\nVue.use(VueRouter)\n\nconst routes = [\n  ..code\n]\n\nconst router = new VueRouter({\n  mode: \"history\",\n  base: process.env.BASE_URL,\n  routes,\n})\n\nexport default router
","tableOfContents":"","wordCount":{"words":390},"fields":{"slug":"/vue/vue-js-히스토리-관리/","image":"/assets/vue-logo.png","faq":[]},"frontmatter":{"title":"Vue Js 히스토리 관리","date":"2021년 4월 4일","dateISO":"2021-04-04T15:11:34.709Z","updatedISO":null,"category":"vue","description":"vue-router의 기본 모드는 hash mode 입니다. URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않는다. 해시를 제거하기 위해 라우터의 history 모드 를 사용할 수 있다. history.pushState API를 활용하여 페이지를 다시 로드하지 않고도 URL 탐색을 할 수 있다.","tags":["vue","javascript","framework","frontend","web","router"]}}},"pageContext":{"slug":"/vue/vue-js-히스토리-관리/","previous":{"fields":{"slug":"/vue/vue-js-redirect-alias/"},"frontmatter":{"title":"Vue Js Redirect / Alias","tags":["vue","javascript","framework","frontend","web","router","redirect","alias"]}},"next":{"fields":{"slug":"/vue/vue-js-네임드-라우트/"},"frontmatter":{"title":"Vue Js 뷰 네임드 라우트","tags":["vue","javascript","framework","frontend","web","router","named-routes"]}}}},"staticQueryHashes":["213619243","3262363727"]}