Frontend/프로그래머스 FE 데브코스
[DAY 14] VanillaJS를 통한 자바스크립트 기본 역량 강화 I (6)
BeNI
2022. 11. 3. 16:27
728x90
history API
1. history API
: 브라우저의 세션 기록을 조작할 수 있는 메소드를 담고 있는 객체
- 브라우저에서 페이지 로딩 시, 세션 히스토리를 가짐
- 세션 히스토리는 페이지 이동할 때마다 쌓인다.
- pushState, replaceState 의 함수로 화면 이동 없이 현재 url를 업데이트 할 수 있음
👉 이러한 특성으로 싱글 페이지 애플리케이션(SPA) 가 가능해진다.
- hashbang url 형식에서 벗어날 수있다. ( / => HomePage, /detail => DetailPage)
- 일반 url형식을 따르기 때문에 쿼리스트링도 자유롭게 붙일 수 있다.
* hashbang이란 ?
: 말그대로 해시(#)와 뱅(!)이 합쳐진 단어로 단일 페이지 애플리케이션(SPA)를 구현하기 위해서 사용하는 것
ex) http://aeunHi.com/#home
1) 주요 메서드
◼ history.pushState : 세션 히스토리에 url 상태를 쌓음 (화면의 이동없이 url을 바꿀 수 있음)
◼ replaceState : 세션 히스토리에 새 url를 쌓지 않고 현재 url를 대체한다 (뒤로가기 막아야 하는 경우 등)
history.pushState(state, title, url)history.replaceState(state, title, url)- state : history.state에서 꺼내쓸 수 있는 값
- title : 변경된 페이지의 title을 가르킴(대부분 브라우저에서 지원x => 빈 string 넣으면 됨)
- url : 세션 히스토리에 새로 넣을 url (화면이 리로드 되지 않음)
✅ location.href(url) 은 url 이동시 새로고침 되면서 이전 history가 날아간다
✅ hitory api로 url를 변경한 후 새로고침 하면 변경된 url의 실제 파일을 찾으려고 하기 때문에(없으면) 404에러남
✅ 404에러시(존재하지 않는 페이지로 이동) 루트페이지로 돌아가게하는 등의 작업이 필요하다.(안되면 해시뱅써야함)
ex) SPA 구현
<body>
<div class="container"></div>
<a class="linkItem" href="/product-list">product list</a>
<a class="linkItem" href="/article-list">article list</a>
<script>
window.addEventListener('click', (e) =>{
function route() {
const { pathname } = location;
const container = document.querySelector(".container");
if(pathname === "/") container.innerHTML = `<h1>Home</h1>`;
if(pathname === "/product-list") container.innerHTML = `<h1>상품목록</h1>`;
if(pathname === "/article-list") container.innerHTML = `<h1>게시글목록</h1>`;
}
route();
if(e.target.className === 'linkItem'){
e.preventDefault();
const { href } = e.target;
const path = href.replace(window.location.origin, '');
history.pushState(null, null, path);
route(); // 클릭 시에만 내용이 바뀐다
}
// 뒤로가기, 앞으로 가기 시에도 내용이 변경될 수 있게함
window.addEventListener("popstate" , () => route());
})
</script>
</body>+ 추가 메서드
1. history.back() : 뒤로 가기
2. history.forward() : 앞으로 가기
3. history.go() : 원하는 위치로 페이지 이동
- 인자값이 0이거나 없으면 페이지 새로고침
- 양수면 그 수만큼 앞으로 이동
- 음수면 그 수만큼 뒤로 이동
728x90