SPA를 위한 history API

 

SPA(Single Page Application)

웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것(reloading X)

 

 

history api

Page를 이동할때 마다 url을 쌓아서 Page의 뒤로가기, 앞으로가기, 지정한 위치고 가기 사용가능한 history

=> api를 이용해 주소를 인위적으로 바꾸고, 서버로 페이지 전체를 요청하는 게 아니라 history.state에 담아둔 정보로 ajax 요청을 보내 화면을 갱신하는 것

• history.pushState()

화면 이동없이 url만 바뀌면서 history에 새로운 url쌓는다. => 앞,뒤로가기 가능

• history.replaceState()

history.pushState()와 다르게 history를 쌓지 않고 현재 url을 바꿔버린다.

=> 현재 Page url을 바꾸면서 이전 Page로 못 돌아가게 한다.

 

 

**중요**

404 Error가 날 경우 Root Page로 이동하게 해줘야 합니다.

• 구현 목록

1. 현재 location에 Path name으로 어떤 것을 rendering(그릴지) 할 지 필요한 로직(route) 1개
2. 실제 화면 이동 아니지만 history.pushState 이용하는 이벤트 처리(<a> 태그에서 page 이동 끄고)
3. 앞으로 가기 뒤로 가기를 할때 발생하는 route 호출하는 함수

window.addEventListener('popstate', () => route() )

 

• **구현목록 Code**

export  default  function  App({ $target }) {
    const homePage = new Home({ $target });

    this.route = () => {
    // pathname에 따라 page component 렌더링 처리

    const { pathname } = location;

    $target.innerHTML = '';

    if (pathname === "/") {
        //homepage 부분
        homePage.render()
    } else  if (pathname === "/paeng") { 
        // paeng page 부분}
    } else {
        //404처리
    };

    this.init = () => {
        this.route();
    };  

    window.addEventListener("click", (e) => {
        if (e.target.className === "link") {
            e.preventDefault();

            const { href } = e.target;

            history.pushState(null, "", href.replace(location.origin, ""));
            this.route();
        }
    });

    window.addEventListener("popstate", () =>  this.route());
    this.init();
}

 

마치며

웹에 들어가는 기능이 많아지면서 용량이 커져서 SPA가 필요하게 되었습니다.
SPA를 하기 위해 history API를 사용하는데 생각보다 큰 틀이 있어 틀을 알아두면 쉽게 제작할 수 있을 것 같습니다. :)

 

 

REF

프로그래머스 데브코스
https://jewelism.github.io/browser/history-api.html#pushstate-replacestate

https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

https://www.zerocho.com/category/HTML&DOM/post/599d2fb635814200189fe1a7