오늘은 백엔드 개발에 있어서 필수적이라 생각하는 페이지네이션에 대해서 포스팅을 해보려고 한다.
우선 페이지네이션에 대해서 간략하게 설명하자면,
흔히 페이지수(쪽수)를 매기로 정렬할 떄 쓰이는 개념으로써 웹에서 자주 다루게 된다.
나도 마찬가지도 이번 프로젝트 개발을 하면서 페이지네이션을 상당히 많이 사용하였다.
- 댓글 목록
- 투표 목록
- 팔로잉 목록
- 차단 목록
- 북마크 목록
- 선물함 목록
- 포인트 내역 목록
- 이벤트 목록
- 내가 본 뉴스 목록
- 알림 목록
- 등등..
이 처럼 거의 대부분에 목록(@GET) 에서는 페이지네이션을 사용하였다.
우선 알림쪽을 사진으로 간략하게 보자.
해당 사진은 알림 목록 쪽 사진인데, 아래로 스크롤하면서 10개씩 끊어서 로딩해서 보여주게끔 해준다.
즉, 한번에 많은 양을 로딩해서 보여주는것이 아니라서 데이터적인 측면에서도 성능에 도움이 된다.
구글링을 해보면 대부분 "skip"과 "take"를 사용해서 페이지네이션을 하였으나,
나는 "last_id"와 "size"로 페이징 처리를 진행하였다.
알림목록 코드를 통해서 하나씩 살펴보자.
해당 controller부에서 @Query dto에 "last_id"와, "size"를 넣어준다.
description에 나와있드시
last_id : 가장 마지막으로 보낸 알림 아이디
size : 한번에 보여질 알림 수
모자이크 부분은 페이지네이션과 관련없는 코드이니 무시해도 된다.
위에서 부터 한줄한줄 살펴보자.
변수 notificationEntity를 선언하고 Repository.find() 로 넘어가보자.
해당 레파지토리에서는 쿼리빌더로 find를 한다.
눈여겨 볼 부분은 직전에 controller에 @Query에 dto안에 넣었던 last_id가 존재하면,
notification.id 는 last_id보다 작은 수를 갖는다.
왜냐?
정렬이 DESC로 내림차순이여서 id는 last_id보다 작은 수를 가져야지 페이지네이션이 순차적으로 이뤄진다.
그리고 dto에 있는 size값은 말 그대로 페이지 size여서 limit를 걸어주면 된다.
이제 다시 service부로 돌아가 보자.
자, 이제 변수 notificationEntity를 구했으니 아래로 내려가 보자.
아래에 last_item_id는 페이지네이션을 이어서해주기 위해서 필요한 값이다.
무슨말이냐면, 예를들어 notificationEntity의 id가 [100,99,98 ... 92,91] 일 경우에
last_item_id의 값은 91이 된다.
그래야지 이 last_item_id 값이 다음 페이지의 last_id값으로 들어가면서 페이지네이션이 이루어진다.
이러면 이제 다음 페이지의 notificationEntity의 id는 [90,89,88, ... 82,81]로 이어진다.
그리고 notificationEntity가 빈배열이면 0으로 출력한다.
이제 마지막 리턴값을 보면,
last_item_id 까지 같이 응답값으로 주기위해서 Response.dto를 만들었다.
해당 response dto파일은 이 알림 목록 외에도 대부분 리턴값으로 사용되고 있어서
그냥 결과값과, last_item_id를 같이 출력해 주기위해 사용한다고 보면된다.
이제 Swagger에서 확인해 보자.
알림 Swagger가 정상적으로 만들어 졌을것이다.
여기에 첫 페이지네이션이라 last_id는 비워두고 size는 10으로 줘보자.
다음과 같이 10개의 값이 나오고 맨 아래에 "last_item_id" 가 473으로 나왔다.
앞서 말했듯이 이 값은 10개의 값중에 가장 작은 id값이다.
다음 페이지를 보려면 last_id에 473을 넣으면 정상적으로 다음 10개의 값이 출력될 것이다.
이제 프론트엔드에서 작업을 하면 웹 상에서 10개씩 물흐르듯이 페이지네이션이 될 것이다..!
'Web > NestJS' 카테고리의 다른 글
| [Nest.JS] Nest.JS에서 cache-manager를 활용한 캐싱 방법 (0) | 2023.09.17 |
|---|---|
| [Nest.JS] Slack에 다양한 통계데이터 알림 자동화 (0) | 2023.07.02 |
| [Nest.JS] DTO vs Interface (0) | 2023.04.23 |
| [Nest.JS] Axios, Http 비동기 통신 라이브러리 (0) | 2023.04.15 |
| [Nest.JS] DTO 객체의 키 이름 변경 @Transform (0) | 2023.04.06 |