TIS - 서버사이드 스크롤 페이징

🤔 문제 상황

👩🏻‍💻: 스크롤을 내릴 때 데이터 끝에서 스크롤이 부드럽게 내려갔으면 좋겠는데 그렇게 구현하려면 페이징 데이터 뒤에 데이터가 2-3개 정도 더 필요할거 같아요

단순 서버사이드 페이징은 offset과 limit 값을 받아오면 그만이였는데
스크롤페이징은 데이터를 추가적으로 붙여줘야하는 변수가 생겼다.
프론트 개발자분과 같이 고민하던 중 뒤에 추가가되어야하는 데이터 수를 쿼리스트링으로 추가로 받는건 어떨지 의견을 제시했는데 긍정적으로 받아드려주셔서 해당 방법으로 진행해보기로했다!

💁🏻‍♀️ 해결 방법

기존 서버사이드페이징 Endpoint

• /data?page=1&limit=15

수정된 서버사이드페이징 Endpoint

• /data?page=1&limit=15&add=3
  -> 추가 데이터 개수를 나타내는 "add" 라는 쿼리스트링 값을 추가해주었다!

  그렇다면 API에서는 해당 값을 받아서 어떻게 해결하지?
  -> query문을 통해 해결한다!

  SELECT * FROM tbl
   LIMIT ${limit + add}
   OFFSET ${offset * limit}

  • 조회 query 에서 LIMIT 값에 기존 limit 값 + add 값을 더해주기만 하면 된다!

    -> 그럼 쿼리스트링으로 요청받을 때 limit 값에 추가데이터 개수를 더한 값을 전달받으면 되는거 아닌가?
    전체 페이징에 영향을 주기때문에 따로 받아서 LIMIT 값만 바꿔줘야한다

🤗 해결 결과

완벽하게 해결!
해당 기능을 동일하게 Java 프로젝트에서 적용하면서 공통 모듈화했는데 이는 아래 깃허브 링크를 통해 확인 가능하다:)

깃허브 링크

페이징 공통 모듈
페이징 공통 모듈 사용 예제