history API
: 브라우저의 세션 기록을 조작할 수 있는 메소드를 담고 있는 객체
- 브라우저에서 페이지 로딩을 하면, 세션 히스토리를 가짐
- 세션 히스토리는 페이지 이동할 때마다 쌓이게 되고, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능함
- pushState, replaceState 의 함수로 화면 이동 없이 현재 url를 업데이트 할 수 있음
- pushState : 세션 히스토리에 새 url 상태를 쌓는다.
- replaceState : 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체한다.
=> 이러한 특성으로 싱글 페이지 애플리케이션(SPA) 가 가능해진다.
- hashbang url 형식에서 벗어날 수 있다.
- / => HomePage
- /list => ListPage
- /detail => DetailPage
- 일반 url형식을 따르기 때문에 쿼리스트링도 자유롭게 붙일 수 있다.
- ex) /list?page=2&limit=10
* hashbang이란 ?
: 말그대로 해시(#)와 뱅(!)이 합쳐진 단어로 단일 페이지 애플리케이션(SPA)를 구현하기 위해서 사용하는 것
ex) http://aeunHi.com/#home
주요 메서드
- history.pushState(state, title, url) : 세션 히스토리에 url 상태를 쌓음 (화면의 이동없이 url을 바꿀 수 있음)
- state : history.state에서 꺼내쓸 수 있는 값
- title : 변경될 페이지의 title을 가리키는 값인 것 같지만 거의 대부분의 브라우저에서 지원하지 않는다.
- 빈 string을 넣으면 된다.
- url : 세션 히스토리에 새로 넣을 url
- a태그를 클릭하거나 location.href로 url을 변경하는 것과는 다르게 이 url이 변경된다고 해서 화면이 리로드 되지 않는다.
- history.replaceState(state, title, url) : 세션 히스토리에 새 url를 쌓지 않고 현재 url를 대체한다 (뒤로가기 막아야 하는 경우 등)
history.pushState(state, title, url)history.replaceState(state, title, url)
⭐️ location.href(url) 은 url 이동시 새로고침 되면서 이전 history가 날아간다.
hitory api로 url를 변경한 후 새로고침 하면 변경된 url의 실제 파일을 찾으려고 하기 때문에(없으면) 404에러남
404에러시(존재하지 않는 페이지로 이동) 루트페이지로 돌아가게하는 등의 작업이 필요하다.(안되면 해시뱅써야함)
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>
url routing 처리하기
-url path별 화면을 각 페이지 컴포넌트로 정의
-route 함수 :
<path에 따라 페이지 컴포넌트 렌더링
location.pathname으로 현재 path 얻어오기>
-url이 변경되는 경우, route 함수 호출
컴포넌트 구조
- App -> HomePage / ProductPage -> ProductOptions , Cart
정리
- ⭐️history api를 이용하면 화면 이동을 일으키지 않고도 브라우저 url을 바꿀 수 있다.
- hitory api로 url를 변경한 후 새로고침 하면 변경된 url의 실제 파일을 찾으려고 하기 때문에(없으면) 404에러가 난다.
- 404 에러가 났을 경우 root의 index.html로 요청을 돌려주는 처리가 필요하다.
'데브코스 프론트엔드 5기 > VanillaJS를 통한 자바스크립트 기본 역량 강화 1' 카테고리의 다른 글
| 231013 [DAY19] VanillaJS를 통한 자바스크립트 기본 역량 강화 1 (8) (0) | 2023.10.16 |
|---|---|
| 231011[Day17] VanillaJS를 통한 자바스크립트 기본 역량 강화 1 (6) (0) | 2023.10.12 |
| 231010 [Day16] VanillaJS를 통한 자바스크립트 기본 역량 강화 1 (5) (0) | 2023.10.10 |
| 231009 [Day15] VanillaJS를 통한 자바스크립트 기본 역량 강화 1 (4) (0) | 2023.10.10 |
| 231006 [Day14] VanillaJS를 통한 자바스크립트 기본 역량 강화 1 (3) (0) | 2023.10.09 |