페이징
웹사이트를 이용하다보면 많은 양의 글들이 페이지로 나누어져 있는 것을 볼 수 있다.
이번 포스팅에서 웹 페이징의 원리와 구현 방법에 대해 다뤄볼 예정이다.
페이징 기능 구현
페이징 기능을 웹에 적용하기 전에
페이징의 원리를 이해하기 위한 테스트 코드를 작성하였다.
21~28 LINE의 변수 목록
ShowContentSize - 한 페이지에 노출될 글의 개수
contentSize - 페이징 처리할 콘텐츠의 총 개수
movePage - 이동할 페이지 번호
totalPage - 페이지의 총 개수
pageListSize - 한 페이지 목록에 노출될 페이지 개수
tmpPage - 이동할 페이지 목록의 위치(페이지 목록의 시작, 끝 페이지 번호를 구하기 위한 임시 변수)
pageStart - 페이지 목록의 시작 번호
pageEnd - 페이지 목록의 끝 번호
30LINE
(콘텐츠의 개수) / (한 페이지에 노출될 글의 개수) 의 계산식을 사용하여 페이지의 총 개수를 구한다.
위 계산식을 적용했을 때 소수점이 발생하면 나머지 값도 페이징 처리를 해야하기 때문에
Math.ceil 함수를 통해 소수점 올림처리하여 페이지 총 개수를 구한다.
ex) 글의 개수가 100개, 한 페이지에 노출될 글의 개수가 5개일 경우 100 / 5 = 20, 총 페이지 개수는 20개이다.
32~38LINE
이동하려는 페이지 번호가 1 미만이거나 페이지의 총 개수를 넘어갔을 경우의 처리 부분이다.
ex) 페이지의 총 개수가 5개라고 가정했을 때 0페이지로 이동하려 하면 첫 페이지인 1 페이지로 이동되고,
8페이지로 이동하려 한다면 제일 마지막 페이지인 5페이지로 이동된다.
40~42LINE
페이지 목록의 시작과 끝 번호를 구하는 부분이다.
(제일 중요하다 생각하고 이 부분이 이해된다면 페이징 구현이 그리 어렵지 않을 것이라 생각한다.)
40LINE
tmpPage = movePage / pageListSize;
먼저 페이지 목록의 시작과 끝 번호를 구하려면 자기가 몇번째 페이지 목록에 이동할 것인지 구해야한다.
(이동할 페이지) / (한 페이지 목록에 노출될 페이지 개수) 의 계산식을 사용하여
몇번째 페이지 목록으로 이동할 것인지 값을 구한다.
ex) 총 페이지가 20개고
한 페이지 목록에 노출될 페이지 개수가 5개며
이동하려는 페이지가 8페이지라고 가정했을때
8 / 5 = 1.6 값이 나오는데,
정수형으로 받기 때문에 소수점을 버리고 1이라는 값이 나온다.
즉, 이동하려는 페이지 목록은 1번째 목록인 것이다.
(페이지 목록은 0번째부터 시작)
41LINE
pageStart = (tmpPage * pageListSize) + 1;
페이지 목록의 시작 번호를 구하는 부분이다.
((페이지 목록의 위치) * (한 페이지 목록에 노출될 페이지 개수)) + 1의 계산식으로 값을 구한다.
ex) 위의 그림을 예시로 들때,
이동하려는 페이지 목록이 1번째이고, 노출될 페이지 개수가 5개이면
(1 * 5)의 결과값은 5이고, 여기에 1을 더하기 때문에
1번째 페이지 목록의 시작 번호인 6의 값을 구할 수 있다.
또, 이동하려는 페이지 목록이 0번째라면 (0 * 5)의 결과값이 0이 나오고 1을 더하면
0번째 페이지 목록의 시작 페이지 번호인 1을 구하게 되는 것이다.
42LINE
pageEnd = (tmpPage + 1) * pageListSize;
페이지 목록의 끝 번호를 구하는 부분이다.
((페이지 목록의 위치) + 1) * (한 페이지 목록에 노출될 페이지 개수)의 계산식으로 값을 구한다.
ex) 위의 그림과 시작 번호를 구하는 첫번째 예시의 상황처럼
이동하려는 페이지 목록이 1번째이고, 노출될 페이지 개수가 5개이면
(1 + 1) * 5의 결과 값이 10이므로 1번째 페이지 목록의 끝 번호가 구해진다.
또, 이동하려는 페이지 목록이 2번째라면
(2 + 1) * 5 = 15이므로 2번째 페이지 목록의 끝 번호가 구해진다.
44~46LINE
마지막 페이지 목록의 페이지 끝 번호가 페이지 총 개수 값을 넘어갔을 경우를 방지하는 부분이다.
ex) 페이지의 총 개수가 24개이고,
한 페이지 목록에 노출될 페이지 개수가 10개라면,
마지막 페이지 목록의 끝 번호는 30이 되버리는 현상 때문에 위 코드로 방지
48~51LINE
이동하려는 페이지가 현재 위치한 페이지 목록의 끝 번호라면
시작과 끝 페이지 번호를 다음 페이지 목록의 값을 가져오는 현상을 방지하는 부분이다.
ex) 한 페이지 목록에 노출되는 페이지 개수5개이고,
이동하려는 페이지가 5라면
위에서 이동할 페이지 목록 값을 구하는 tmpPage의 계산식인
5 / 5의 결과 값이 1이기 때문에
0번째 페이지 목록이 아닌 1번째 페이지 목록의 값을 가져오게 되므로 위 코드로 이 현상을 방지
53LINE~70LINE
페이징 구현 로직의 결과를 출력하는 부분이다.
이동할 페이지 목록이 1번째 이상이라면 이전 버튼을 출력.
마지막 페이지 목록이 아니면 다음 버튼을 출력하고
그 사이에 페이지 버튼들을 출력한다.
그 중 이동하려는 페이지는 중괄호로 표현하였다.
RESULT
각 케이스 별로 이동할 페이지만 다르게 결과 출력하였습니다.
CASE 1
CASE 2
CASE 3
다음 포스팅에선 위 테스트 코드를 함수화하여 콘솔에 출력 대신
페이징 문자열을 반환하는 페이징 함수를 만들고
웹 페이징 적용까지의 과정을 포스팅할 예정이다.
'Spring, Spring Boot' 카테고리의 다른 글
| [Spring Boot] 웹 페이징(Paging) 구현(2) (0) | 2022.03.28 |
|---|---|
| [Spring Boot] Thymeleaf 템플릿 사용하여 공통 레이아웃 구성하기 (0) | 2022.03.24 |
| [Spring Boot] form을 이용해 데이터 전송하여 DB INSERT까지 (0) | 2021.11.29 |
| [Spring Boot] 스프링 부트에서 jsp 사용하기 (0) | 2021.11.28 |
| [Spring Boot] Spring과 Spring Boot의 차이점 (0) | 2021.11.28 |