coding/Node.js

페이지네이션

JIN_Coder 2022. 8. 23. 00:32

페이지 네이션이란

책 페이지처럼 데이터를 묶음으로 분리하는 과정이다.

모든 데이터를 한 번에 가져오는 게 아니라 필요한 개수를 지정하고 특정한 정렬 기준에 따라 상황에 맞춰 조건을 맞춰서 데이터를 분할해서 가져오는 것이다.

 

대표적인 방법

오프셋 기반 페이지 네이션 : DB의 offset 쿼리를 사용하여 '페이지' 단위로 구분하여 요청/응답하게 구현

커서 기반 페이지 네이션 : 클라이언트가 가져간 마지막 row의 순서상 다음 row들을 n개 요청/응답하게 구현

 

 

오프셋 기반 페이지 네이션

가장 일반적인 방법(난이도가 쉽고, 편리한 방법)

데이터를 가져올 때 LIMIT을 사용해서 필요한 만큼만 가져오고

다음에는 offset을 사용해서 가져온 만큼을 건너뛰고 필요한 만큼씩 가져오는 방법

 

ex) 100개의 데이터 중 10개를 가져오면 1-10의 데이터를 가져오고

다음에는 10개를 건너뛰어서 11-20개까지 가져오는 식의 방법

 

문제점

1. 각 페이지를 요청하는 사이에 데이터의 변화가 있을 경우 중복 / 누락 데이터가 발생한다.

 

ex) 100개의 데이터 중 10개를 가져오면 1-10번의 데이터를 가져왔는데 다음 요청을 보내기 전에 누군가가 5개를 생성한다면, 다음에는 10개를 건너뛰어서 11-20번 까지 가져와야 하지만, 5개가 늘어나서 6-15번의 데이터가 가져오는 문제가 생긴다.

혹은 10개를 가져왔는데 누군가 3개의 데이터를 삭제한다면 14-23번의 데이터가 보이면서 11-13는 누락이 된다.

 

2. DB도 모든 정렬 기준(ORDER BY)에 대해 해당 row가 몇 번째 순서를 갖는지 알지 못한다.

offset의 값이 올라갈수록 데이터베이스에 가해지는 부하가 크다.

 

ex) 10만 개의 데이터를 가지고 있을 때 누군가 5만 번째 데이터에 접근하고, 그 요청을 여러 명이 동시에 요청을 한다면 데이터베이스에 큰 부하가 걸린다.

 

 

offset을 사용하기 좋은 상황

데이터의 변화가 거의 없어 중복 데이터가 노출될 상황이 적은 경우

중복 데이터가 노출되어도 큰 문제가 되지 않는 경우

모든 데이터의 수가 많지 않아 데이터 베이스의 부하가 적은 경우

무한 스크롤이 아닌 커뮤니티 같은 페이지 버튼을 눌러서 페이지를 이동하는 경우

 

 

커서 기반 페이지 네이션

클라이언트가 가져간 마지막 데이터의 순서상 다음 데이터들을 n개 요청/응답하게 구현

 

ex) 10개의 데이터를 가져오고 그 마지막 데이터 10번째의 다음 데이터부터 10개를 가져온다.

 

장점

1. 우수한 실시간 데이터 처리능력

데이터를 정적으로 유지하지 않는다.

 

2. 누락되지 않는 데이터

마지막 데이터로부터 다음 데이터를 가져오기 때문에 중복 / 누락되는 데이터가 없다.

 

 

단점

1. 제한된 정렬 기능

정렬을 기준으로 데이터를 가져올 때 정렬을 하더라도 똑같은 값이 있다면 마지막 데이터를 찾아서 그다음을 가져오는 게 쉽지 않다.

 

2. offset보다 까다로운 구현

커서 기반이 매우 어려운 것은 아니지만, offset 기반이 너무 간단하기 때문에 offset 방법에 문제가 없다면 offset 방법도 합리적인 방법이 된다.

 

 

 

 

커서 기반 페이지네이션 (Cursor-based Pagination) 구현하기

사실 처음에는 이 주제로 포스트를 쓰려고 했던건 아니고 Apollo GraphQL 에서 커서 기반 페이지네이션 구현 을 주제로 글을 쓰려고 했습니다. 그런데 막상 찾아보니 백엔드-프론트엔드를 함께 고려

velog.io

 

 

왜 오프셋 페이징보다 커서 페이징일까?

Is offset pagination dead? Why cursor pagination is taking over Facebook’s developer page said it best: uxdesign.cc ※ 이 글은 위 글을 의역한 글입니다. ※ 제가 이해한 것을 토대로 약간 수정했습니다...

bbbicb.tistory.com

 

'coding > Node.js' 카테고리의 다른 글

에러 핸들러  (0) 2022.09.03
Sequelize Op like - 검색 기능  (0) 2022.08.23
express HTTPS 설정  (0) 2022.08.20
비밀번호 암호화 - bcrypt  (0) 2022.08.17
swagger 설치 및 설정 기본 사용법  (0) 2022.08.17