TIL15 - 2023.10.12

history API

• 브라우저에서 페이지 로딩을 하면, 세션 히스토리라는 것을 갖는다
• 세션 히스토리는 페이지를 이동할 때마다 쌓이게 되며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다
• pushState, replaceState 두 개의 함수로 화면 이동 없이 현재 url을 업데이트할 수 있다
  • pushState : 세션 히스토리에 새 url 상태를 쌓는다
  • replaceState : 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체한다
• 이전 예제에서 hashbang으로 했던 url을 아래처럼 바꿔줄 수 있다
  • / => HomePage
  • /list => ListPage
  • /detail/1 => DetailPage
• 일반 url 형식을 따르기 때문에 querystring도 자유롭게 붙일 수 있다
  • ex) /list?page=2&limit=10

history.pushState

• history.pushState(state, title, url)
• state : history.state에서 꺼내쓸 수 있는 값이다
• title : 변경될 페이지의 title을 가리키는 값인 것 같지만 거의 대부분의 브라우저에서 지원하지 않는다. 빈 string을 넣으면 된다
• url : 세션 히스토리에 새로 넣을 url이다. a 태그를 클릭하거나 location.href로 url을 변경하는 것과는 다르게 이 url이 변경된다고 해서 화면이 리로드 되거나 그러진 않는다

history.replaceState(state, title, url)

• state : history.state에서 꺼내쓸 수 있는 값이다
• title : 변경될 페이지의 title을 가리키는 값인 것 같지만 거의 대부분의 브라우저에서 지원하지 않는다. 빈 string을 넣으면 된다
• url : 세션 히스토리에서 현재 url과 대체할 url이다. a 태그를 클릭하거나 location.href로 url을 변경하는 것과는 다르게 이 url이 변경된다고 해서 화면이 리로드되거나 그러진 않는다

url routing 처리하기

• url path별 화면을 각 페이지 컴포넌트로 정의
• Route 함수
  • path에 따라 페이지 컴포넌트 렌더링
  • url이 변경 되는 경우, route 함수 호출

정리

• history api를 이용하면 화면 이동을 일으키지 않고도 브라우저의 url을 바꿀 수 있다
• history api로 url을 변경한 후 새로고침하면, 변경된 url의 실제 파일을 찾으려고 하기 때문에 404 에러가 발생
• 404 에러가 발생할 경우 root의 index.html로 요청을 돌려주는 처리가 필요하다

---

요즘 실습이 많아서 재밌지만 어렵다... 실습한 내용도 정리해야겠다😂

React.js에서 Route 설정하는 것을 Vanila JavaScript로 구현하는 것 같다... 프레임워크의 편리함을 느꼈다