28. Pagination

 

구글이나 네이버 다음처럼 검색을 하면 한번에 모든 검색결과를 보여주지 못할 때 아래 페이지가 생성되고 각각의 페이지에서 추가적인 검색결과를 확인 할 수 있다. 이같이 보여줄 데이터가 한번에 보여주는 양을 넘어선 경우 (스크롤하는 경우도 포함) 계속해서 데이터를 보여주는 방식을 Pagination 이라고 한다. 이에 대해서 공부한 내용을 적어보려한다.

 

---

Pagination?

 

 페이지네이션이란 한정된 네트워크 자원을 효율적으로 활용하기 위해 쿼리의 결과값으로 리턴된 리소스를 분할하여 전달 하는 것을 의미한다. 즉, 풀어서 설명하면 페이지네이션, 페이징, 페이지 내비게이션 등 다양한 이름으로 불리는 이것은 웹 페이지에서 흔히 볼 수 있는 페이지 번호를 클릭하면 특정 페이지로 이동하는 부분이나 기법을 통칭하는 용어이다. 내가 처리해야할 데이터가 만약 100개 있다면 의도적으로 20개씩 나눠서 다섯번으로 나눠서 리턴해 주는 것이 이와 같다고 할 수 있다. 이렇게 하는 이유는 한번에 많은 양의 데이터를 모두 보내서 필요없는 데이터까지 처리하는 낭비를 줄이고 빠른 응답을 기대할 수 있게 되기 때문이다. 

 

페이지네이션은 아래의 두가지 방식으로 처리가 가능하다.

1.  오프셋 기반 페이지네이션(Offset-based Pagination)
2.  커서 기반 페이지네이션(Cursor-based Pagination)

이 두가지 방식에 대해서 더 자세히 알아보자.

 

오프셋 기반 페이지네이션(Offset-based Pagination)

https://progressivecoder.com/nestjs-prisma-pagination-offset-vs-cursor-with-examples/

 오프셋 기반 페이지네이션은 클라이언트가 특정 리밋과 오프셋이 있는 매개변수를 요청하는 기술로 얼만큼의 정보를 전달받을지와 얼만큼 단위로 데이터를 건너뛸지를 정해주는 방식이다. 이는 커서 기반 페이지네이션이 비해 단순하고 사용이 편리하다는 장점이 있고 정적인 데이터에 주로 선호된다. 하지만 페이지 요청 사이에 변화가 생기는 경우에는 중복 데이터가 발생한다는 점과 쿼리문의 동작이 비효율적이기 때문에 매우 큰 데이터를 다룰때에는 성능이 급격하게 떨어지게 된다.

 

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

https://aerocode.net/326

 오프셋 기반 페이지네이션은 우리가 원하는 데이터가 몇번째에 있는지를 중점으로 한다면 커서 기반 페이지네이션은 우리가 원하는 데이터가 어떤 데이터의 다음에 있는가를 중점으로 한다. 따라서 커서 기반 페이지네이션의 핵심 매개변수는 커서가 되며 클라이언트는 응답과 함께 커서라고 명명된 변수를 받게되고, 이때 이 커서는 요청과 함께 보내야 하는 특정 항목을 가리키는 일종의 포인터이다. 커서 기반 페이지네이션의 장점은 건너뛰는 데이터가 발생하지 않으며 대용량 데이터에서 원하는 데이터를 효과적으로 찾을 수 있기에 성능이 좋다. 하지만 또한 존재하는데 우선 정렬 기능이 제한적이다는 점과 구현이 오프셋 기반 페이지네이션보다 비교적 까다롭다. 

 

Reference

https://velog.io/@letthere/developic-%ED%8E%98%EC%9D%B4%EC%A7%95-%EC%B2%98%EB%A6%AC-%EB%B0%A9%EC%8B%9D-offset-vs-noOffset 

https://wonyong-jang.github.io/database/2020/09/06/DB-Pagination.html