Springboot에서 페이징처리/ 스크롤 로딩 하기

지금 현재 하고 있는 프로젝트에서 페이징 처리를 해 보려고 합니다.

위 어노테이션을 사용해서 spring에서 페이징처리를 할 수 있습니다.

 

다음과 같이 페이징 할 설정들을 어노테이션에 달아주고 해당 객체를 Service를 하는 곳으로 던져 준다. 이때 List가 아닌 Page타입으로!

 

Service단에서 받아주고 repository를 사용해서 호출하는 메서드도 위 상황과 코드에 맞게 수정해 준다.

이렇게만 설정해 주면 내부적으로 Spring이 알아서 페이징 처리를 해 주는데

postman으로 테스트를 해보면 다음과 같은 데이터가 넘어온다.

 

data내부에 content안에 있다. (데이터를 뿌려줄때 이 구조로 돼 있지 않으면 데이터가 view에서 보일 수 없다.)

그리고 데이터를 보다 보면

pageable내부에 다음과 같은 정보가 있는데 여기서 number가 현제 페이지를 가리키는 값이다.

그래서 페이지를 컨트롤 하기 위해서는 

다음과같이 쿼리 스트링을 날려서 데이터를 전달하면

이렇게 값이 바뀌고 페이지또한 바뀐 것을 확인할 수 있다.

---

그럼 이제 size만 들고왔다가 페이지가 이동되면 스크롤 로딩이 되도록 설정을 해 보겠습니다.

 

스크롤 로딩

 

먼저 자바스크립트에 스크롤이벤트를 체크하는 함수가 있다.

 

$(window). scroll

 

테스트를 위해서 다음과 같이 해놓고 위 값들이 어떤 것을 의미하는지 확인을 해봐야 한다.

스크롤을 하면 스크롤 이벤트를 감지해서 다음과 같은 값을 띄어준다

윈도 스크롤탑은 스크롤이 아래로 내려갈 수 록 값이 커진다.

문서의 높이와 윈도우 높이는 고정값이다.

문서의 높이는 전체 문서의 높이를 말하는 것이고 윈도 높이는 띄어놓은 창의 높이를 말하는 것이다.

 

그럼 어떻게 문서의 끝을 컴퓨터가 알아먹을 수 있는지 계산을 해 보면

문서의 높이 - 윈도우높이  == 스크롤 탑

위와 같은 식이 참이 됐을 때 문서의 끝이 됐다라는 것을 체크할 수 있다.

 

문서의 끝으로 갔을 때 0으로 떨어지는 것을 볼 수 있다. 그럼 이제 0이 됐을 때 page를 로드하도록 코드를 짜기만 하면 된다.

ajax호출 시에 쿼리 스트링을 날리도록 페이지 로드를 하는 함수를 수정해 주고

0이 됐을 때 page를 더하고 로드되도록 설계했다.