[TIL13] History
history
브라우저에서 페이디 로딩을 하면, 세션 히스토리를 갖는다.
세션 히스토리는 페이지를 이동할 대 마다 쌓이게 되며, 이를 통해 뒤로가기 시 이전페이지로 가거나, 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다.
pushState, replaceState 두 개의 함수로 화면 이동 없이 현재 url을 업데이트할 수 있습니다.
- pushState : 세션 히스토리에 세 url 상태를 쌓습니다.
- replaceState : 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체한다.
=> 이 특성을 이용하면 single page application이 가능하다.
일반 url형식을 따르기 때문에 쿼리도 사용 가능하다!
ex) /list?page-2&limit=10
method
history.pushState(state, title, url)
history.replaceState(state, title, url)
- state : history.state에서 꺼내쓸 수 있는 값이다.
- title : 변경될 페이지의 title을 가리키는 값인 것 같지만 거의 대부분의 브라우저에서 지원하지 않는다. 빈 string을 넣으면 된다.
- url : 세션 히스토리에 새로 넣을 url이다.
a태그를 클릭하거나 location.href로 url을 변경하는 것과는 다르게 url이 변경된다고 해서 화면이 리로드 되거나 그러진 않는다.
=> 화면의 이동이 이루어지지 않고 url만 바뀐다!
=> spa의 기반이 되는 특징
history.pushState(null, null, /product1);
history.pushState(null, null, /product2);
history.pushState(null, null, /product3);
세션 히스토리에 1, 2, 3이 쌓여 있다
replaceState는 뒤로가기 안되는 페이지 할때!
ex) 로그인 시 로그인 페이지 못가게
상품을 추가하고 뒤로 가기 했을 때 폼으로 가지 않게
history.pushState(null, null, /product1)
history.pushState(null, null, /new)
history.replaceState(null, null, /product2)
되돌아가기를 하면 product1이 나온다!
page url을 바꾸면서 이전 페이지로 돌아가지 못한다.
history api로 url을 변경한 후 새로고침 하면, 변경된 url의 실제 파일을 찾으려고 하기 때문에 404에러가 난다.
그러므로 404에러가 났을 경우 root의 index.html로 요청을 돌려주는 처리가 필요하다.
Author And Source
이 문제에 관하여([TIL13] History), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@nyoung113/TIL13-History저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)