SPA (싱글 페이지 애플리케이션) : 하나의 페이지로 만들어진 웹. 페이지 이동시 로딩효과(화면 깜빡임)없이 내용과 주소가 바뀌는 홈페이지.
window객체에 내장된 history를 사용.
앞뒤로 이동
window.history.back();
window.history.forward();
특정 지점으로 이동
window.history.go(-1)
window.history.go(1)
window.history.length
주소 내역은 하나의 목록이며, 이 목록을 추가하면 페이지를 이동하는셈이다.
목록에 주소를 추가하기위한 2개의 HTML5 메소드가 추가되었다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>History API</title>
</head>
<body>
<div id="state"></div>
<button id="pushState">pushState</button>
<button id="replaceState">replaceState</button>
<script>
document.querySelector('#pushState').addEventListener('click', function () {
history.pushState({ data: 'pushpush' }, 'title을 pushState로', '/pushpush')
});
document.querySelector('#replaceState').addEventListener('click', function () {
history.replaceState({ data: 'replace' }, 'title을 replaceState로', '/replace');
});
window.addEventListener('popstate', function () {
console.log('popstate', history.state);
document.querySelector('#state').innerHTML = JSON.stringify(history.state);
});
</script>
</body>
</html>
1. window.history.pushState()
// pushState(바귄주소와함께 저장할 데이터 / 바꿀제목 / 바꿀주소)
window.history.pushState({data: 'pushpush'}, 'title을 pushState로', '/pushpush')주소와 함께 데이터도 저장할 수 있기 때문에 매우 유용함.
주소목록에 새로운 주소를 추가함. 따라서 이전 주소로 되돌아갈 수 있다.
2. window.history.replaceState()
window.history.replaceState({ data: 'replace' }, 'title을 replaceState로', '/replace');이전 주소를 없애고 바꿀 주소만 넣음. 따라서 이전 주소로 되돌아갈 수 없다.
3. popstate 이벤트
pushState와 replaceState로 주소를 바꾼 후, 뒤로가기나 앞으로가기를 했을 때 발생하는 이벤트.
window에 이벤트 리스너를 연결해 두어 앞,뒤로 갈때 이벤트가 발생함.
주의할 점은 pushState와 replaceState를 할 때는 이벤트가 발생하지 않는다는 것. 이후 앞,뒤로가기 버튼을 눌렸을때 발생.
https://www.zerocho.com/category/HTML&DOM/post/599d2fb635814200189fe1a7
(HTML&DOM) History API - 주소를 내 마음대로!
안녕하세요. 이번 시간에는 History API에 대해 알아보겠습니다. 제 블로그를 보시면 페이지가 깜빡이지 않는데도 내용도 바뀌고 주소도 바뀝니다. 물론 리액트 기술을 사용하였기 때문에 가능한 일이지만, 실제로는 하나의 페이지로 만들어진 웹입니다. 싱글 페이지 애플리
www.zerocho.com
'웹표준 > Performance & Intergration' 카테고리의 다른 글
| 6. hasFocus() (0) | 2020.04.17 |
|---|---|
| 5. HTML요소의 드래그&드랍 API (0) | 2020.04.17 |
| 4. contenteditable 속성 (0) | 2020.04.17 |
| 2. XMLHttpRequest (XHR) (0) | 2020.04.17 |
| 1. Web Worker (0) | 2020.04.16 |