게시판 프로젝트 - Ajax(비동기) 페이징 새로고침시 페이지 번호 유지하기

 게시글과 같은 동기 처리는 페이지를 이동하는 시점에 주소URL가 변경되기 때문에 브라우저를 새로고침해도 페이지 번호화 검색 조건이 유지되지만 , Ajax는 페이지 번호에 해당되는 데이터를 조회하되 주소는 변경하지 않기 때문에 브러우저를 새로고침해도 페이지 번호가 유지되지 않는다는 문제가 있다.

 

Histroy ApI 를 이용해 uri를 강제로 변경, 비동기 페이징 처리의 새로고침 문제를 해결한다.

 

Histroy API?

사용자가 페이지에 접근을 하면 브라우저에 세션 기록이 쌓이게 된다. 이 세션 기록에 접근 할 수 있게 해주는 것이 브라우저의 history객체이다. 

 

- drawPage()

view.html의 drawPage() 를 다음과 같이 변경해준다. 

// 페이지네이션 HTML draw
        function drawPage(pagination, page) {

        // 1. 필수 파라미터가 없는 경우, 페이지네이션 HTML을 제거한 후 로직 종료
        if ( !pagination || !page ) {
        document.querySelector('.paging').innerHTML = '';
        throw new Error('Missing required parameters...');
        }

        // 2. 페이지네이션 HTML을 그릴 변수
        let html = '';

        // 3. 첫/이전 페이지 버튼 추가
        if (pagination.existPrevPage) {
        html += `
<a href="javascript:void(0);" onclick="findAllComment(1)" class="page_bt first">첫 페이지</a>
<a href="javascript:void(0);" onclick="findAllComment(${pagination.startPage - 1})" class="page_bt prev">이전 페이지</a>
        `;
        }

        // 4. 페이지 번호 추가
        html += '<p>';
for (let i = pagination.startPage; i <= pagination.endPage; i++) {
html += `<a href="javascript:void(0);" onclick="findAllComment(${i});">${i}</a>`
}
html += '</p>';

        // 5. 다음/끝 페이지 버튼 추가
        if (pagination.existNextPage) {
        html += `
<a href="javascript:void(0);" onclick="findAllComment(${pagination.endPage + 1});" class="page_bt next">다음 페이지</a>
<a href="javascript:void(0);" onclick="findAllComment(${pagination.totalPageCount});" class="page_bt last">마지막 페이지</a>
        `;
        }

        // 6. <div class="paging"></div> 태그에 변수 html에 담긴 내용을 렌더링
        const paging = document.querySelector('.paging');
        paging.innerHTML = html;

        // 7. 사용자가 클릭한 페이지 번호(page) 또는 끝 페이지 번호(totalPageCount)에 해당되는 a 태그를 찾아 활성화(active) 처리한 후 클릭 이벤트 제거
        const currentPage = Array.from(paging.querySelectorAll('a')).find(a => (Number(a.text) === page || Number(a.text) === pagination.totalPageCount));
        currentPage.classList.add('on');
        currentPage.removeAttribute('onclick');

        // 8. 페이지 URI 강제 변경
        const postId = new URLSearchParams(location.search).get('id');
        history.replaceState({}, '', location.pathname + `?id=${postId}&page=${currentPage.text}`);
        }

Histroy 객체의 replaceState() 메서드를 이용하면 현재 페이지의 세션 기록을 수정할 수 있는데, 주로 url을업데이트 하는 경우에 사용된다. 

postid 는 uri,상의 게시글 번호를 의미하며, history.replaceState() 함수에는 state, title, url 총 세개의 파라미터를 전딩해야 한다.

 

state: histoty 항목과 연관된 자바 스크립트 객체이다. history.state 문법으로 state객체에 접근할 수 있으며, 여기선 state 를 사용할 일이 없기 때문에 빈 리터럴 객체를 전달한다.

 

title: 페이지의 타이틀을 의미한다. 대부분의 브라우저에서 지원하지 않기 때문에 빈 문자열(' ')을 전달하면 된다

 

url : replaceState() 의 핵심 파라미터이다. 변경할 url을 의미하며, 새 url은 현재 url과 도메인이 동일해야 한다. 만약 도메인이 동일하지 않다면 예외가 발생한다.

location.pathname은 페이지의 주소 ("/post/view.do') 를 리턴하는데 여기선 해당 파라미터로 페이지 주소 + (게시글 (id)&페이지 번호(page)) 를 전달한다.

 

 

-findAllComment() 함수 수정

// 전체 댓글 조회
function findAllComment(page) {

const uriPage = new URLSearchParams(location.search).get('page');
page = (page) ? page : (uriPage ? Number(uriPage) : 1);

const postId = [[ ${post.id}]];
const uri = `/posts/${postId}/comments`;
const params = {
page : page,
recordSize : 5,
pageSize : 10,
postId : postId,
}

const response = getJson(uri, params);
const pagination = response.pagination;
drawComments(response.list);
drawPage(pagination, page);
}

주소 url에서 페이지 번호를 찾을 수 있으니 쿼리 스트링 상의 페이지 번호 (uripage)를 기준으로 page를 세팅해야 한다.