[Cs] 페이지네이션에 대해 자세히 알아보자

     

목차

1. Pagination의 특징
2. Page Based Pagination(옛 방식으로 여전히 쓰이는 곳 많음)
3. Cursor Based Pagination(현대적 방식)

 

 

Pagination의 특징

• 쿼리에 해당되는 모든 데이터를 한번에 다 불러오지 않고 부분적으로 쪼개서 불러온다.
  (한번에 20개씩)
• 쿠팡같은 앱의 경우 수억개의 상품이 데이터베이스에 저장되어있는데 사용자가 상품 검색 화면을
  들어갈때마다 모든 상품 정보를 서버에서 클라이언트로 전송할 필요가 없다.
• 현대 클라우드 시스템은 데이터 전송에 돈이 든다
• 돈이 들지 않더라도 수억개의 데이터를 한번에 보내면 분명 메모리가 터진다.
• 메모리가 터지지 않더라도 데이터 전송에 상당히 오랜 시간이 걸릴 것이다.

 

 

Page Based Pagination(옛 방식으로 여전히 쓰이는 곳 많음)

• 페이지 기준으로 데이터를 잘라서 요청하는 Pagination
• 요청으 보낼때 원하는 데이터 갯수와 몇번째 페이지를 가져올 지 명시
• 페이지 숫자를 누르면 다음 페이지로 넘어가는 형태의 UI에서 많이 사용
• Pagination 도중에 데이터베이스에서 테이터가 추가되거나 삭제될 경우 저장되는 데이터가 누락되거나 중복도리수 있음
• Pagination 알고리즘이 매우 간단함

 

response 형태

개수를 기준으로 특정개수를 스킵하고 데이터를 가져온다.

 

ex) 4개씩 가져오는 형태

1

2

3

4

5

6

7

8

9

 

삽입 시

원래는 page2에서 5~8을 가져와야 하지만

삽입되면 4~7로 4를 중복해서 가져온다.

1

2

3

3.5

4

5

6

7

8

9

 

삭제 시

원래는 page2에서 5~8를 가져와야 하지만

삭제되면서 6~9를 가져와 5를 누락하고 가져온다.

1

2

3

5

6

7

8

9

 

 

Cursor Based Pagination(현대적 방식)

• 가장 최근에 가져온 데이터를 기준으로 다음 데이터를 가져오는 Pagination
• 요청을 보낼 때 마지막 데이터의 기준값과 몇개의 데이터를 가져올지 명시
• 스크롤 형태의 리스트에서 자주 사용
• 최근 데이터의 기준값을 기반으로 쿼리가 작성되기 때문에 데이터가 누락되거나 중복될 확률이 적음

 

response 형태

id값을 기준으로 id 기준 이상의 데이터를 가져온다.

 

 

ex) 4개씩 가져오는 형태

1

2

3

4

5

6

7

8

9

 

삽입 시

id를 기준으로 하기 때문에 여전히

page2에서 id>4이상인 5~8를 가져온다.

1

2

3

3.5

4

5

6

7

8

9

 

삭제 시

id를 기준으로 하기 때문에 여전히

page2에서 id>4이상인 5~8를 가져온다.

따라서 누락이 없이 가져온다.

1

2

3

5

6

7

8

9

 

javascript

//요청 형태

http://localhost:3000/posts?
order__createdAt=ASC&where__id_more_than=3&take=20

//{property}__{filter} 형식으로 구현

order__createAt: 내림/오름차 정렬
where__id_more_than: 어떤 id이후로부터 데이터를 요청할 것인지
take: 몇개의 데이터를 요청할 것인지