ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 페이지네이션(Pagination)
    Note 2021. 8. 2. 13:46

    많은 데이터를 한 화면에 전부 보여줄 수 없는 경우에 무한 스크롤페이지네이션이 사용된다.

    페이지네이션이란 한정된 네트워크 자원을 효율적으로 활용하기 위해 결과값으로 리턴된 리소스를 `분할하여 전달`하는 것을 의미한다.

     

    즉, 데이터베이스에 만 개의 아이템이 있을 때, 한 번에 만 개를 돌려주는 대신 0번부터 49번까지 50개씩 돌려주는 것을 의미한다. 여기서 다음 요청이 들어오면 50번부터 99번까지, 또 다음 요청이 들어오면 100번부터 149번까지 돌려준다. 이렇게 함으로써 네트워크의 낭비를 막고, 빠른 응답을 기대할 수 있게 된다.

     

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

    전통적인 페이지네이션 방식인 오프셋 기반 페이지네이션

    offset : 데이터가 시작하는 위치(현재의 위치)
    limit : 한 페이지에 보여줄 데이터 수(한 번 응답 시 돌려줄 개수)


    두 가지의 파라미터를 이용한다. 그러므로 전통적인 페이지네이션을 통한 get요청은 아래와 같은 모습이다.

    https://get.com/item?offset=10&limit=20 // 페이지는 10번, 개수는 20개

     

    전통적인 페이지네이션은 오랜 기간 잘 작동해왔다. 문제는 유저들의 활동이 활발한 커뮤니티의 게시글 같이 수정, 생성, 삭제가 잦은 경우에는 더 이상 효율적으로 작동하지 못하게 되었다는 것이다.

     

    예를 들어 유저가 1페이지를 요청하여 10개의 게시물을 본 상황이라고 가정하자. 그리고 5분쯤 후에 유저가 2페이지를 요청한다고 할 때, 만약 그 사이에 다른 유저들이 5개의 게시물을 작성했다면 5개의 게시물을 2페이지에서 중복으로 보게 될 것이다.

     

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

    위와 같은 전통적인 페이지네이션의 문제점을 해결하기 위해 커서 기반 페이지네이션이 등장하였다.

     

    커서 기반 페이지네이션이란 커서를 책을 읽을 때 사용하는 책갈피와 비슷하다고 보면 된다. 책에 책갈피를 끼워두면 굳이 앞에서부터 페이지를 셀 필요 없이 곧장 읽은 데부터 다시 읽을 수 있다. 이전에 읽은 부분으로 넘어가는 것도 어렵지 않다. 책갈피가 Index의 역할을 하기 때문이다. 이와 같이 커서 기반 페이지네이션은 원하는 데이터가 '어떤 데이터의 다음'에 있다는 데에 집중한다.

     

    커서 기반 페이지네이션을 위해서는 정렬 기준에 포함되는 필드 중 하나 이상은 반드시 고유값을 가져야 한다. 위의 예를 다시 들어 유저가 1페이지를 요청하여 10개의 게시물을 가져온 상황인데 5분 동안 다른 유저들이 5개의 게시물을 새로 올렸고 그 후에 유저가 2페이지를 요청한다고 해보자. 커서 기반 페이지네이션에서는 마지막 게시물 인덱스를 저장해두었다가 2페이지로 넘어가면 그 인덱스를 기준으로 이후의 10개의 게시물을 새로 가져오게 될 것이므로 중복되는 게시물이 나타나지 않을 것이다. 

     

    오프셋 vs 커서

    대부분의 경우에는 커서 기반 페이지네이션으로 구현하는게 낫다고 한다. 하지만 데이터의 입력이 매우 드물거나 중복되는 데이터가 나와도 크게 상관이 없는 경우에는 오프센 기반 페이지네이션으로 구현하여도 크게 문제되지는 않을 것이다.

     

     

     

     

     

     

     

     

     

    'Note' 카테고리의 다른 글

    브라우저 작동 원리  (0) 2021.08.10
    반응형 테이블(Responsive Table)  (0) 2021.08.06
    무한 스크롤(Infinite Scroll)  (0) 2021.07.26
    DNS_PROBE_FINISHED_NXDOMAIN  (0) 2021.05.02
    Input type="date"  (0) 2021.04.28

    댓글