jQuery 깜빡임 없이 동적 페이지 전환 구현하기(뒤로가기, 새로고침 지원)

두괄식으로 말해서,

1. movePage 함수 선언

function movePage(navigator) {
        var pageUrl = $(navigator).attr("url");

        if (pageUrl !== location.pathname) {
            history.pushState({ path: pageUrl }, null, pageUrl);
            var popStateEvent = new PopStateEvent('popstate', { state: null });
            dispatchEvent(popStateEvent); // event 발생시키기
        }
    }

이동하려는 url 정보를 받아 path 라는 이름으로 history.state 에 저장하고,
popstate 이벤트를 발생시킨다.

2. onclick 에 movePage 함수 사용

<a class="dropdown-item" href="javascript:void(0);" url="/cognito/settings" onclick="movePage(this)">정보수정</a>

url 이라는 속성에 이동하고자 하는 페이지 url path를 적어주고, 클릭시 해당 태그 자체를 파라미터로 movePage 함수를 실행시킨다.

3. onpopstate 이벤트(url 변경) 발생시 페이지 처리

onpopstate = function (e) {
        // 페이지 GET 요청
        $.ajax({
            type: "GET",
            url: history.state.path,
            data: { type: "get" },
            success: function (data) {
                if(data.startsWith('<!--login-->')){
                    // 세션 만료로 인한 로그인 페이지 data
                    alert('세션이 만료되었습니다. 다시 로그인하세요.');
                    location.href = '/cognito/login';
                }else{
                    var bodyData = data.substring(data.indexOf('<!--body start-->'),data.indexOf('<!--body end-->')) + ' '
                    + data.substring(data.indexOf('<!--script start-->'),data.indexOf('<!--script end-->'));
                    $('#body').html(bodyData);
                }
            }
        });
    }

movePage 함수에서 이벤트를 발생시키면 페이지가 state 정보로 ajax 요청을 하고,
받은 데이터를 통해 html 태그를 변경한다.
위 코드에서 받은 데이터를 가공할 때, 커스텀으로 작업해둔 flag 기능의 주석 태그를 바탕으로 데이터를 가공한다.
if(data.startsWith('<!--login-->') ~ 부분은 이 프로젝트 내에서 세션 만료시 로그인 페이지로 이동하도록 되어있기 때문에 작성한 것으로, 이러한 작업을 한다면 참고할 부분이고 아니라면 필요하지 않다.

4. 페이지마다 주석 태그로 flag 달기

<!--body start-->
~
~
<!--body end-->
~
~
<!--script start-->
~
~
<!--script end-->

예시1

예시2

예시3

각 페이지마다 전달하고자 하는 부분만 지정해주기 위함이다.
이렇게 substring을 통해 html 에 넣어주지 않고 데이터 통째로 넣으면 header 와 footer 안에 또 header 와 footer 가 생길 것이고, 각 페이지마다 header footer 등을 지우고 원하는 태그만 저장해두면 해당 페이지에서 새로고침할 때 문제가 생긴다. 새로고침을 막는 것은 키보드를 통한 방법만 막을 수 있으며 브라우저 자체의 새로고침은 페이지를 팝업창처럼 만들지 않는 이상 막기가 불가능하다.
그래서 이렇게 수작업이 들어가는 방법을 선택했고... 다른 방법이 있을지 모르겠지만 찾지 못하였고 그렇게까지 불편한 작업은 아니라고 생각한다.

 

웹 페이지 이동시 화면 깜빡임 없이 그대로 유지하고
body 에 원하는 페이지만 렌더링하고 싶었다.
알아보니 ajax 비동기 통신을 통해 요청으로 받은 페이지 데이터로 html 태그를 변경하는 방법이 있었지만,
단순히 그 방법만으로는 뒤로가기, 앞으로가기, 새로고침을 지원할 수 없었고
window.history 객체(IE버전 10이상) 혹은 History.js 라는 제이쿼리 플러그인을 함께 사용해야 했다.
따라서 IE버전 10 이상을 쓸 것이라는 가정 하에 따로 제이쿼리 플러그인을 사용하지 않고
history 객체를 이용하여 구현해보았다.