SQL | 페이지네이션

1. 페이지네이션(Pasination)이란

---

• 콘텐츠를 여러 페이지로 나누어 다음 또는 이전 페이지로 이동하거나 특정 페이지로 이동할 수 있는 요소
• 리스트가 많아 한 화면에 과도한 스크롤이 발생하게 되는 경우 적용

 

1.1 페이지네이션을 사용하는 이유

많은 양의 데이터를 담고 있는 서버의 경우 사용자가 접속할 때마다 전체 데이터를 모두 가져오려면 오랜 시간이 필요하고, 이는 사용자의 편리성 측면에서 좋지 못한 결과가 발생한다. 이를 위해 페이지네이션을 이용해 데이터를 조금씩 나누어 가져오고 더 쉽고 빠른 접근을 가능하게 한다.

 

1.2 페이지 네이션의 종류

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

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

 

---

2. 오프셋 페이징

---

흔히 볼 수 있는 다음과 같은 페이징 구현을 오프셋 기반 페이지네이션이라고 한다. 프론트엔드에서 명시적인 페이지 버튼과 함께 쓰이며, 버튼을 클릭함으로써 페이지를 휙휙 넘길 수 있다.

블로그 하단 부분

서버가 데이터베이스와 통신해 퀴리에 LIMIT과 OFFSET을 통해 자료를 요청한다.

SELECT * FROM table
ORDER BY timestamp
OFFSET {오프셋}
LIMIT {페이지 당 자료의 갯}

 

2.1 오프셋 기반 페이지네이션의 문제점

 

데이터 크기에 따른 문제

마지막 페이지를 구하기 위해 전체 갯수를 알아야하며, 데이터 사이즈가 커질 수록 전체 데이터 갯수를 구하는 것이 부하가 될 수 있다. 또한, OFFSET이 커진다면 불필요한 데이터 조회가 많아지고 이는 속도에 영향을 미치게 된다.

 

데이터 중복 및 누락

OFFSET 방식의 경우 데이터의 잦은 추가와 삭제가 있는 경우에 데이터가 중복되거나 누락되는 등의 문제가 발생한다. 

 

이와 같은 문제점들로 인해 데이터의 크기가 크고, 수정이 빈번하게 발생한다면 OFFSET 방식보다는 CURSOR 방식이 더 적합하다고 볼 수 있다.

 

---

3. 커서 페이징

---

이 방법은 실시간 데이터와 대량의 데이터(페이스북, 슬랙 , 트위터 등)을 다루는 웹사이트에서 쓰이는 페이징 방법이다.

프론트에서 무한 스크롤(인스타 그램, 페이스북처럼 하단으로 계속 스크롤 되는 페이징 방식)을 지원할 때 쓰인다.

 

cursor 방식의 페이지네이션

 

커서 기반 페이징은 페이지 번호가 아닌 키 번호를 통해 페이지네이션을 구현한다. 

SELECT * FROM product LIMIT 40 // 1~40까지의 값 반환
SELECT * FROM product WHERE id > {기준값} LIMIT 40;

 

3.1 커서 기반 페이징의 단점

하지만 커서 기반 페이징도 전체 데이터를 조회하지 않기 때문에 오프셋 기반 페이징과 같이 페이지 버튼의 UI 구현이 어렵다는 단점이 있기도 하다.

 

---

📋 참고자료

---

1. http://61.107.76.13/Li/04_25.html

2. https://betterdev.tistory.com/17

Pagination이란 (페이징 처리) - Offset vs Cursor