Day23

Day23

history API 써보기

---

• 브라우저에서 페이지 로딩을 하면, 세션 히스토리라는 것을 갖는다.
• 세션 히스토리는 페이지를 이동할 때마다 쌓이게 되며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다.
• pushState, replaceState 두 개의 함수로 화면 이동 없이 현재 url을 업데이트 할 수 있다.
  • history.pushState(state,title,url): 세션 히스토리에 새 url 상태를 쌓는다. state와 url은 대부분 null, null을 넣는다.
    • state: history.state에서 꺼내쓸 수 있는 값이다.
    • title: 변경될 페이지의 title을 가리키는 값인 것 같지만 거의 대부분의 브라우저에서 지원하지 않는다. 빈 string을 넣으면 된다.
    • url: 세션 히스토리에 새로 넣을 url이다. a 태그를 클릭하거나 location.href로 url을 변경하는 것과는 다르게 url이 변경된다고 해서 화면이 리로드되거나 그러진 않는다.
  • history.replaceState(state,title,url): 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체한다.
    • pushState와 똑같다.
• history.pushState(null,null,'/product/1')으로 페이지 리로딩 없이 url만 바꿀 수 있다. → SPA(Single Page Application)가 가능해짐.

history API 활용하기

---

a태그를 쓰는 안되는 부분에서 URL만 바꾸기

• 현재 location의 pathname으로 어떤 화면을 나타낼지 결정하는 routing 로직
• 실제 화면 이동을 하지 않고 URL을 변경하는 pushState 로직
• 앞으로 가기, 뒤로 가기가 정상 동작하도록 하는 로직 ```

product list article list

```javascript
// index.js
function route() {
    const $container = document.querySelector('#container')
    const { pathname } = location;
    if (pathname === '/') {
        $container.innerHTML = '<h1>Home</h1>'
    } else if (pathname === '/product-list') {
        $container.innerHTML = `<h1>게시글 목록</h1>`
    } else if (pathname === '/article-list') {
        $container.innerHTML = `<h1>상품 목록</h1>`
    }
}
route()
window.addEventListener('click', e => {
    if (e.target.className === 'LinkItem') {
        e.preventDefault();
        const { href } = e.target;
        const path = href.replace(window.location.origin, '')
        history.pushState(null, null, path)
        route()
    }
})
// popstate : 뒤로 가기, 앞으로 가기 이벤트
window.addEventListener('popstate', () => route())

404 Error 발생 시 index.html로 변경

• 404가 난 경우 root에 있는 index.html로 돌려주는 처리를 해야한다. → npx serve -s 명령어를 이용하여 서버를 가동하면 된다.
• hashbang을 쓰지 않는 모든 SPA방식의 routing을 지원하는 library들은 이런 문제가 존재한다.

history API product 코드와 연동하여 SPA 만들기

---

url 처리하기

• url path별 화면을 각 페이지 컴포넌트로 정의
  • 홈페이지, 상품 상세 페이지
  • route : path에 따라 페이지 컴포넌트 렌더링, location.pathname으로 현재 path 얻어오기, url이 변경되는 경우 route 함수 호출
  • 

SPA, CSR, SSR

---

• rendering을 언제하느냐를 정확히 알고 있어야함.