[BackEnd][Maven-PJ] 사내 개발자 커뮤니티 서비스 - Paging 처리

 

🧑🏻‍💻 Git Hub 주소

 

 

🗂 목차

● [BackEnd][Maven-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 글 등록(작성) / 수정

● [BackEnd][Maven-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 목록 조회

● [BackEnd][Maven-PJ]개발자 커뮤니티 서비스 - 게시판 만들기 : 상세 조회

● [BackEnd][Maven-PJ]개발자 커뮤니티 서비스 - 게시판 만들기 : 삭제

● [BackEnd][Maven-PJ] 사내 개발자 커뮤니티 서비스 - 게시판 : 답변 등록 / 수정

● [BackEnd][Maven-PJ] 사내 개발자 커뮤니티 서비스 - 게시판 : 답변 삭제

 

👨‍👩‍👧‍👦 회원 관련

● [BackEnd][Maven-PJ] 사내 개발자 커뮤니티 서비스 - 회원 관련 : 회원 가입

 

 

📚부 록 

● [BackEnd][Maven-PJ]개발자 커뮤니티 서비스 - 게시판 만들기 : Paging처리

 

🤔 내가 만난 Exception

● [Exception 정리] org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)

● [Vue.js][Spring] Post Data 전송 간 null값 전송 문제

​

 

 

 

 

 

🚀 Paging 처리란?

페이징 처리는 게시판에서 목록 조회를 할 때, 한 페이지 당 얼만큼의 목록을 보여주고, 다른 페이지로 이동할 수 있게 해 주는 방법론인 것이에요.

 

게시판 목록 조회

 

위와 같이 1 Page에는 1 ~ 10까지의 목록이 출력 되도록 하는 것이에요.

 

    🔽  Paging 처리

 

 

위에 Code는 Paging 처리를 공통으로 처리할 수 있게 만든 Paging Class인 것이에요.

 

Paging Clas의 Member 변수

 

먼저 Paging Clas의 member 변수를 보면 위와 같은 것이에요.
총 Data 개수를 가지고 있을 totalCount 변수, 이용자가 위치한 Page에서 보여직게 될 페이지 번호 개수를 담은 displayPageNum 변수 등이 있는 것이에요.

 

getTotalCount()

 

위의 Method는 Paging 처리를 할 때, 게시판 전체 Data 개수가 필요로 하는 곳에 해당 값을 전달 해 주기 위해 만들어 준 것이에요.

 

pagingDate()

 

위의 pagingData()는 Paging 처리에 필요한 계산을 위해 선언한 Method인 것이에요.

최초 45번째 줄을 통해 아래 그림의 끝 번호를 구하는 코드 부분인 것이에요. 그림에서는 10번이네요!

💡 참고
Math.ceil이란?
java.lang.Math 클래스는 수학 계산에 사용할 수 있는 Method를 제공하는 것이다. 모두 static 메서드이기 때문에 Math 클래스로 바로 사용 가능.

출력 결과 :
101.0
-90.0
100.0
-90.0

 

Criteria Class의 getPage()

그런 뒤 super(상속한 부모 Class)의 getPage()를 호출하게 되면 현재 이용자가 위치한 page 번호가 반환되는 것이에요.

지금은 이용자가 1 Page에 있다고 가정을 해 볼게요.

그 다음 displayPageNum 변수의 값이 소수점이 나올수도 있기 때문에 (double)로 형 변환을 해주고, 있는 것이에요.
displayPageNum은 한 Page에서 보여지게 될 Paging 범위 혹은 Page 번호의 개수라고 생각하면 쉬울 것이에요.

여기서는 displayPageNum을 10을 주었기 때문에 1 / 10이 될 것이고, 그 계산에 Math.ceil()에 넣어주게 되면 올림이 되어 1이 나오게 될 것이에요. 이 값에 다시 displayPageNum 값인 10을 넣어 주게 되면 1 * 10이 되기 때문에 endPage 변수에는 10이 들어가게 될 것이에요.

그럼 이번엔 2 Page에 있다고 가정하고 계산 해 볼게요.
2 / 10은 0.2가 나올 것이고, Math.ceil()로 인해 이 값은 2로 올림이 될 것이에요. 이 값에 displayPageNum 값인 10을 넣어주게 되면 2 * 10이기 때문에 20이 endPage 변수에 들어가게 될 것이에요.

 

우리 다음엔 startPage 변수에 어떤 값이 들어가는지 한번 계산을 해 볼것이에요.

 

 

이용자가 1 Page에 있다고 가정을 한다면 endPage 변수에는 10이 들어 가 있을 것이에요. 거기서 displayPageNum은 10이닌까 그 값을 빼면 0이 될 것이고, 거기에 1을 더하면 startPage에는 1이 들어가게 될 것이에요.

소수점이 나올 수도 있으니 (int)로 형변환을 넣어 준 것이에요. 그래야지 startPage 번호가 정확하게 계산이 될 것이닌까요!

그럼 이번에 이용자가 2 Page에 있다고 가정한다면 endPage 변수에는 20이 들어 가 있을 것이고, 거기서 displayPageNum은 10이닌까 그 값을 빼게 되면 10이 될 것이고, 거기서 1을 더하면 11이 될 것이에요!

 

생각을 해 보면 이용자가 1Page에 있다고 했을 때는 startPage 값은 1이고, endPage 값은 10 이닌까 1 ~ 10이라는 범위가 나오고, 2Page에 있다고 했을 때는 startPage 값은 11이고, endPage 값은 20 이닌까 11 ~ 20이라는 범위가 나오는 것이에요.

 

 

 이번에는 tempEndPage 변수에 값을 넣는 것을 확인 해 볼 것이에요.

totalCount 변수에는 게시판 전체 Data 개수(목록의 총 수)가 들어 있는 것이에요. 예를 들어 해당 게시판에 30개의 글이 있다고 가정하고 계산을 해 볼게요.

 

Criteria Member 변수

 

Criteria getPerPageNum()

 

먼저 부모 Class의 getPerPageNum을 호출 하고 있는 것이에요. 해당 Member 변수는 Page 당 보여줄 게시글 개수를 담고 있는 것이에요.

 

예를 들어 getPerPageNum에 10 즉, 한 페이지당 10개의 게시글이 출력되게 한다고 가정을 하고 계산을 하면 30 / 10이 될 것이고, 이를 계산 하면 3이 될 것이에요. 올림은 필요가 없고, 형 변환도 필요가 없으니 tempEndPage에는 3이 들어가게 될 것이에요.

 

반응형

 

우리가 startPage를 1, endPage를 10이라고 가정을 했을 때, tempEndPage는 3이고, endPage는 10이닌까 위의 if문에 들어가게 되고, endPage에는 temEndPage의 값 3이 들어가게 되는 것이에요.

 

 

이전 Button의 활성, 비활성화 처리는 위와 같이 하는 것이에요. 3항 연산자를 통해 구현 했는데, startPage가 1이면? false를 반환하고, 아니면 true를 반환하게 한 것이에요.

시작 Page가 1이라면 이전으로 돌아갈 숫자가 없는 것이에요. 그렇기 때문에 Button을 비활성화 해야 하기 때문에 false를 반환하는 것이고, 1과 같지 않다면 당연히 이 전 Page가 존재하기 때문에 활성화를 위해 true를 반환하는 것이에요.

 

 

이번에는 다음으로 넘어가는 Button의 활성, 비활성화 처리를 할 것이에요.
역시 3항 연산자를 통해 구현을 하였고, endPage와 Page당 보여줄 게시글 개수를 담은 pserPageNum의 수를 곱한 결과가 총 Data 개수보다 크거나 같다면 다음으로 넘어갈 곳이 없는 것이에요. 그렇기 때문에 false를 반환하고, 그렇지 않다면 다음으로 넘어갈 곳이 있다는 의미이기 때문에 true를 반환 해 준 것이에요.