허원철의 개발 블로그

페이징에 대한 이해 - 2 본문

web

페이징에 대한 이해 - 2

허원철 2016. 12. 8. 11:42

이번 글은 '페이징에 대한 이해' 두번째 글 입니다.


스펙에 대한 내용은 생략하고 페이징에 대한 세부적인 내용으로 알아보도록 하겠습니다.


<최종 완성된 게시판>


게시판 UI 는 Bootstrap을 이용합니다.


Bootstrap은 기본적인 UI가 이미 구성이 되어 있어 정해준 class를 이용하여 편리하게 사용할 수 있습니다.




일단, Server 입장에서 설명하도록 하겠습니다. (아직 페이징에 대한 이해가 없으시다면 이전 글인 '페이징에 대한 이해 - 1'를 먼저 확인하시기 바랍니다.)


[Server 입장]


본 예제에서는 page 번호에 대한 key를 page로 사용 하겠습니다.



Server 는 Client로 부터 page에 대한 값을 필수적으로 받아와야 합니다. 그리고 page에 대한 값을 받았으면, 실질적으로 데이터베이스 테이블에 어느 부분을 가져와야 하는지 계산을 해준 뒤, Query 를 실행 합니다.


1. 페이지 범위 체크

 - page가 0 이하의 값 이거나 없을 수도 있습니다. 간단하게 Default 값을 1로 주고 0이하의 값은 처리를 하지 않도록 합니다.


2. 검색을 위한 TOP, OFFSET 계산

 - 테이블의 일부분을 가져오기 위해 아래에 데이터를 통해 TOP과 OFFSET을 계산 할 수 있습니다.

 ① 페이지 번호(Client에서 전달 받은 page 값)

 ② 보여줄 게시물 갯수(10으로 고정)

 ③ 전체 테이블 갯수 (Query 상에서 가져옵니다.)

1
2
3
4
5
6
7
8
9
10
public Page getPage(int pageNo, int recodeSize, long totalSize) {
    Page page = new Page();
        
    page.setPageNo(pageNo);
    page.setRecodeSize(recodeSize);
    page.setTotalSize(totalSize);
    
    page.setTop((pageNo-1)*recodeSize);
    return page;
}
cs

필자 같은 경우는 위와 같은 메소드를 이용하여, TOP 을 계산합니다.(Page라는 객체는 페이지정보를 담을 일종의 Vo 입니다.) 그리고 쿼리에 TOP 값과 RECODE SIZE를 전달 해줍니다.


3. Query 실행

 - 여기서 꼭 알아야할 사항은 DBMS 마다 Query 들이 다르다는 것 입니다.


[ MySQL ]

SELECT  *

FROM    notice

LIMIT {top},{recode size}

[ORACLE]

SELECT *

FROM (SELECT rownum as rnum, *

FROM notice ) n

WHERE n.rnum BETWEEN {top} AND {top + recode size}

위와 같은 Query로 게시판 일부를 가져올 수 있습니다. 



마지막으로, 게시판 정보들과 페이지정보를 Client에게 반환 해줍니다.


[Client 입장]


javascript에서 ajax를 통해 Server에서 게시판 정보(notices)와 페이지 정보(page)를 전달 받습니다.


1. 게시판 HTML

1
2
3
<table class="table table-striped">
  ...
</table>
cs

2. 페이징 HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
cs

위와 같은 태그를 javascript 에서 넣어주어 게시판을 만들어 줄 수 있습니다.


본 예제는 간단하게 보여주기 위한 예제이기 때문에 더 많은 조건 처리가 필요합니다. 이것이 귀찮고 번거롭다면, 플러그인을 이용하여 손쉽게 제작하는 방법도 있습니다. (http://botmonster.com/jquery-bootpag/#.WEjE4rKLRhF)


자세한 소스는 Github을 참고 하시면 됩니다.

'web' 카테고리의 다른 글

Spring Boot - Redis를 활용한 Session Clustering  (423) 2016.12.13
JNDI 살펴보기  (426) 2016.12.09
페이징에 대한 이해 - 1  (429) 2016.12.06
Spring Boot - Async  (412) 2016.12.05
Spring Boot - Swagger  (411) 2016.12.05
Comments