history api
-
History API프론트엔드/javascript 2025. 1. 4. 14:05
History APIHistory API는 JavaScript에서 브라우저의 세션 기록을 조작하거나 탐색할 수 있는 기능을 제공합니다. 이 API는 브라우저의 주소(URL)와 기록을 변경하거나 관리하는 데 사용되며, 웹 애플리케이션의 페이지 전환을 더 부드럽고 자연스럽게 만들어 줍니다. 이를 통해 새로고침 없이 URL을 업데이트하거나 브라우저의 뒤로 가기/앞으로 가기 버튼을 제어할 수 있습니다.History API 주요 메서드와 속성history.pushState(state, title, url)새 기록 항목을 추가합니다.브라우저 주소(URL)를 변경하지만 페이지를 다시 로드하지 않습니다.예:history.pushState({ id: 1 }, 'Title', '/new-page');history.repl..
-
SPA에서 History API 이해프론트엔드/javascript 2023. 10. 16. 17:04
SPA에서 History API 이해 주소 내역은 하나의 목록이다. 뒤로가기, 앞으로가기는 목록 안에서 이동하는 것이다. 따라서, 목록에 새로운 주소를 추가하면 페이지를 이동한 셈이 된다. 목록에 주소를 추가하기 위한 메소드(history.pushState(). history.replaceState())가 HTML5에서 생겼다. 예제를 만들고 테스트하며 목록에 주소를 추가하는 메소드 history.pushState(), historyreplaceState()를 비교하자. 아래 예제를 book 폴더 아래에 만든다. pushState replaceState ①'pushState' 버튼을 클릭하면, 페이지가 새로 갱신되지 않지만 주소만 바뀌고, 뒤로가기 버튼이 활성화된다. 주소 목록에 새로운 주소가 추가된다...