[ Spring Shoes 프로젝트 ] 페이징처리

 

[ 페이징 처리 ]

페이징은 속도는 빠르게, 부하는 적게 하기 위해

필요한 데이터만 가져올 수 있도록 데이터를 분리하는 작업이다

 

3만 개의 게시물 데이터가 있다고 가정했을 때, 3만 개의 데이터를 한 번에 가져온다면
DB에서 쿼리로 3만개의 데이터를 조회한다.

정렬과 필터조건, 조인 뿐만 아니라 복잡한 로직이 없더라도

쿼리를 순식간에 실행해 3만 개의 데이터를 서버에 전달하면 이미 부하를 받는다

 

3만 개의 게시물이 대부분의 사용자에게 한번에 필요한 경우도 없을 뿐더러

필요하더라도 부하를 위하여 페이징을 해야 한다.

 

 

페이징 처리를 위해 필요한 변수생성

 

현재 프로젝트에서 사용하고 있는 변수들인데,

** Class로 따로 묶어두지않고 ShoesVO안에 생성한 상태이다

 

노란 밑줄변수들은 페이징처리 변수를 클래스화 한다면 사용할 변수지만

Shoes 데이터들 가져오는 Controller에서 해당 변수를 대신하는 값을 만들어서 사용한다

 

그래서 사용할 변수는 총 3개이다

page

pageButton

** pageCondition

>> 필터검색이 따로 존재하여 생성한 것, 검색로직종류가 1개라면 생성할 필요 XX

 

 

해당 변수를 어디에 사용하는가?

 

 

 

 

 

 

---

 

클래스화 할시 만들어야하지만 현재는 Controller에서 만들고있는 변수

 

 

 

 

 

 

 

 

 

---

 

Controller에서 사용해보자

 

1. 현재 어떤 검색로직을 사용했는지 설정

 

** 검색어만 이용하는 기본검색로직

 

PageCondition 변수를 이용하여 페이지에 출력하고있는 데이터가

어떤 검색로직을 이용하고있는지 저장하여 페이지(main.jsp)에 알려주어야 함

 

2. 페이징번호로 이동시 검색어를 유지

 

검색어를 가지고 있어야 어떤 게시물들의 페이징처리를 하고있는 것인지 유지할 수 있기 때문

 

 

3. 페이징버튼의 초기값 설정 및 저장

초기에는 1로 설정하여 시작 ( index로 실행하거나, 로고를 클릭하여 왔을경우 0으로 옴 )

해당 버튼값도 저장하여 가지고있어야 하므로 model에 저장함

 

 

4. 페이지번호 초기값 설정 및 저장

1번 조건 초기에는 1 ~ 5 버튼이 존재할 경우 1을 먼저 설정해야함

2번 조건 다음버튼 클릭시 6 ~ 10 버튼이 존재할 경우 6을 먼저 설정해야함

>> ▶ 버튼으로 넘어왔을경우 page() 값이 0이기 때문

 

Button * 5 - 4 일반식을 사용하여

1 ~ 5 일경우          -    1 

6 ~ 10 일경우        -    6

11 ~ 15 일 경우     -   11

오른쪽의 값들이 page() 초기값으로 설정됨

기본적으로 페이지를 눌러서 들어왔다면 그 값이 page()에 저장

 

model에 현재 페이지버튼을 의미할 pageNow에 해당 값을 저장

 

 

 

 

5. 페이지번호로 Limit값 설정 + 마지막 페이지번호 설정

 

현재 누른 페이지에 * 9 ( 게시물을 9개씩 보여줄 예정이기 때문 )

 >> 9의 숫자를 12, 24 , 36 으로 설정시 게시물 갯수도 조정 가능!

 

0번부터 시작할 수 있도록 3번 페이지를 눌렀을경우 18 ~ 27 번을 보여줘야 하기때문에

Limit ? , 9 에 들어갈 ?값을 설정하기 위해

( getPage() - 1 ) * 9 일반식을 사용하여 Limit을 설정함

 

int count에 SQL문을 실행하여 나온 결과값을 Count(*)로 받아 몇개가 출력될지 대입

9개씩 보여주기때문에 count % 9 == 0 이라면 보여줄 다음데이터가 존재하지 않은것!

 

다음데이터가 존재하지 않다면 마지막 페이지 = ( count / 9 )

다음데이터가 존재 한다면 마지막 페이지 = ( count / 9 ) + 1

 

해당 결과값인 endPageNum을 model에 저장하여 사용한다

 

 

 

6. 페이지버튼 값으로 페이지배열을 생성

1 ~ 5 페이지	start = 1 end = 5
6 ~ 10 페이지	start = 6 end = 10
11 ~ 15 페이지	start = 11 end = 15

위의 조건이 성립될 수 있도록 일반식을 생성

start  =  ( button() * 5 ) - 4

end   =  ( button() * 5 ) 

 

** 5의 숫자를 7로 변경한다면 1 ~ 7 크기의 배열 생성   즉, 원하는 크기의 페이지설정 가능

 

end의 값은 5, ,10, 15, 20 고정이므로

end > endPageNum(마지막페이지) 일경우

end = endPageNum으로 마지막페이지까지만으로 설정

 

( end - start ) + 1 하여 배열의 크기를 존재하는 페이지만큼만 생성 가능

 

인덱스번호를 표현할 int  j = 0  를 생성하고

start 부터 ~ end까지의 값을 배열에 대입

 

int 배열의 결과를 model의 pageNum에 저장

 

 

 

 

Jsp에서 사용해 보도록하자

페이징 처리한 부분 코드

 

조건 pageButton - 1 != 0 

= 1 ~ 5 페이지에만 ◀ 버튼이 비활성화 하면 된다

= 즉, Button - 1 이 0만 아니라면 모두 활성화

 

조건 pageNow == n

= 현재 사용자가 선택한 page버튼이다 ( or 초기 page값 )

검은색으로 색칠해줄 active 클래스를 추가하여 Css를 추가 하였다

 

조건 pageNow != n

= 다른 페이지에는 Css로 hover를 이용해 번쩍이는 효과를 추가하였다

 

조건 pageNum[fn:length(pageNum)-1] < endPageNum

= 배열의 마지막 인덱스번호값이 endPageNum(마지막페이지) 번호보다 작다면

   ▶ 버튼을 활성화 시킨다

** 까다로웠던 조건인데 1 ~ 5 총 5개의 버튼이 생기므로 배열의 length가 == 5 으로 설정했다가

6페이지를 보여줄 데이터가 존재하지 않아도 버튼이 활성화되는 이슈가 있었다

 

Controller 내부 설정에서 end > endPageNum 경우 end = endPageNum 인 것을 활용하여

배열의 마지막 인덱스번호 값 즉 end값이 endPageNum보다 작다면 다음페이지가 존재한 것

( 이해하는 데 조금 시간이 들었다.. 내가 만들어놓고도 헷깔렸다 팀원에게 이해시키는 것은 더더욱.. )

 

위의 조건으로 다음데이터가 존재해야만 ▶ 버튼이 활성화 되도록 조건을 만들 수 있었다

 

 

 

페이지 번호 onclick에 반응할 스크립트이다 ( js + jQuery )

페이징유지를 위해 가지고 다녀야할 값들을 append로 생성하여 넣어준다

 

일반검색로직 = 검색어, 페이지, 버튼 3가지면 되는데

필터검색로직 = 브랜드, 색상, 사이즈배열, 최소금액, 최대금액, 페이지, 버튼 여러값이 필요하여

 

pageCondition으로 normal 일경우와 else( 즉, filter )일 경우로 나누어 관리하였다

 

해당 폼을 실행시키도록 만들었고,

폼 내부에 append 하여 유지할 값을 추가 생성하여 실행하는 것이다

 

 

 

 

일반 검색일 경우

 

필터 검색일 경우

가지고 가는 데이터의 양의 차이가 있다

 

+ get방식으로 사용하여 눈에 보이도록 하였음 ( 설명을 위해 ** )

 

 

프로젝트 내용이 궁금하다면 아래의 Notion내부의 스프링슈즈 프로젝트를 확인해주세요!

 

https://www.notion.so/IT-Notion-87aca879d0084b858eefb9a8e0b7ca34

IT 개발자 김홍준 Notion