페이지네이션[Pagination]

페이지네이션[Pagination] 이란 ?

많은 데이터를 부분적으로 나눠서 불러오는 기술.

 

 

특징

- 쿼리에 해당되는 모든 데이터를 한번에 다 불러오지 않고 부분적으로 나눠서 불러온다 예) 한번에 20개씩

- 쿠팡 같은 앱의 경우 수억개의 상품이 데이터베이스에 저장되어 있는데 사용자가 상품 검색화면을 들어갈 때 마다 모든 상품을 서버에서 클라이언트로 전송할 필요가 없다. (데이터 전송시 많은 양의 금액이 발생+ 메모리 터짐+ 시간이 오래걸림)

 

페이지 기반 페이지 네이션(간단)

- 페이지 기준으로 데이터를 잘라서 요청

- 요청을 보낼 때 원하는 데이터 갯수와 몇번째 페이지를 가져올지 명시

- 페이지 숫자를 누르면 다음 페이지로 넘어가는 형태의 UI에서 사용

- 페이지네이션 도중 데이터베이스에서 데이터가 추가되거나 삭제될 경우 저장되는 데이터가 누락되거나 중복될 수 있다.

 

위와 같이 한페이지에서 보여줄 갯수만큼 불러오고 다음 페이지의 경우 한 페이지당 보여줄 갯수만큼 skip하고 다음 데이터들을 보여준다.

 

데이터 삽입/삭제시 문제점

데이터 삽입/삭제시 문제

페이지 네이션 중간에  이미 가져온 페이지에 새로운 데이터가 들어올시 다음 페이지에서 중복 값이 발생한다.

페이지 네이션 중간에 이미 가져온 페이지의 데이터가 삭제 될 시 다음 페이지에서 중복 값이 발생한다.

 

 

커서 기반 페이지 네이션(간단)

- 가장 최근에 가져온 데이터를 기준으로 다음 데이터를 가져온다.

- 요청을 보낼 때 마지막 데이터의 기준값(id)과 몇개의 데이터를  가져올지 명시

- 스크롤 형태의 리스트에서 자주 사용

- 최근 데이터의 기준값을 기반으로 쿼리가 작성되기 때문에 데이터가 누락되거나 중복될 확률이 적다.

 

위와 같이 id를 사용해서 해당 id 이상인 4개의 데이터를 가져온다.

 

데이터 삽입/삭제시

skip을 사용하지 않아 데이터 삽입시 중복이 발생하지 않고 데이터 삭제시에도 누락이 발생하지 않는다.

 

 

 

 

요청 형태

http://localhost:3000/posts?order_createdAt=ASC&where_id_more_than=3&take=20

{property}_{filter} 형식으로 구현
order_createdAt : 내림/오름차 정렬
where_id_more_than : 어떤 ID 이후로부터 데이터를 요청할건지
take: 몇개의 데이터를 요청할건지

 

응답 형태

{
  "data": [ // 데이터를 리스트로 받는 부분
    {
      "id": 4,
      "updatedAt": "2023-06-06T15:41:33.9282",
      "createdAt": "2023-06-06T15:41:33.928Z",
      "title": "test",
      "content": "test123",
      "likeCount": 0,
      "commentCount": 0,
      "author": {
        "id": 1,
        "nickname": "codefactory5",
        "email": "test5@codefactory.ai",
        "role": "USER"
      }
    },
    1,
    {
      "paging": {   // 페이징에 관한 정보 입력하는 곳
        "cursor": { // 다음 커서에 대한 정보
          "after": 4
        },
        "count": 20,// 총몇개의 데이터를 받았는지
        "next": "http://localhost:3000/post?order__createdAt=ASC&take=20&where__id__more_than=4"
      }// 다음 요청 URL
    }
  ]
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

https://www.inflearn.com/course/lecture?courseSlug=nestjs-%EB%B0%B1%EC%97%94%EB%93%9C-%EC%99%84%EC%A0%84%EC%A0%95%EB%B3%B5-%EB%A7%88%EC%8A%A4%ED%84%B0-%ED%81%B4%EB%9E%98%EC%8A%A4-1&unitId=184258&tab=curriculum

학습 페이지