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로 요청을 돌려주는 처리가 필요하다.