Prisma에서 페이지네이션 구현

부캠 팀 프로젝트때부터

페이지네이션을 적용하느라 골머리를 앓는 사람들을 많이 봐왔어서

 

나는 지레 겁먹고 시도조차 안했었는데

 

이번 프로젝트때 페이지네이션 기획이 나와버렸다ㅋ

 

 

 

 

갑자기 마주친 페이징...

 

부캠때는 못하겠으면 배째라고 해도되는데 (안됨)

지금은 회사니까 그럴 수가 없었다.......... 슬픔

 

 

 

눈물을 닦으며 페이지네이션을 검색해봤는데

생각보다 진짜 엄청 허무했다

 

 

 

 

 

 

  findList() {
    return this.prisma.post.findMany({
        orderBy: { created: 'desc' },
      });
  }

자 이게 기본적으로 post 테이블의 데이터를 최신순으로 정렬하여 불러오는 로직이라고 쳐보자

 

 

post 테이블의 데이터가 10개 이하일때는 모두 한꺼번에 불러와도 괜찮겠지만

데이터가 100개 이상이라면?! 1000개, 100000개 이상이라면 어떨까

(skip방식은 n번째 게시글에 도달할때까지 게시글을 모두 파악하면서 skip을 하는 방식이라

데이터가 천개 만개 이상 넘어간다면 본문에서 다루는 skip방식은 비추한다)

 

 

이런 상황에서 필요한게 페이징이다

 

 

 

 

 

 

그럼 페이지네이션을 어떻게 구현할까

 

  findActiveList(page: number, pageSize: number) {
    return this.prisma.$transaction([
      this.prisma.post.findMany({
        skip: pageSize * (page - 1),
        take: pageSize,
        orderBy: { created: 'desc' },
      }),
      this.prisma.post.count({}),
    ]);
  }

위에서 본 테이블을 조회하는 함수에서 input 값으로 page와 pageSize를 받은 뒤

skip과 take 절을 추가해주고

count를 이용해 전체 게시글의 갯수를 반환해주면 된다.

 

1. skip: 생략할 데이터의 갯수
2. take: 조회할 데이터의 갯수

 

 

 

 

그러므로 input값으로 받는

page는 몇 페이지의 게시글을 조회할지를 나타내는 값이고

pageSize는 한 페이지에 몇개의 게시글을 보여줄지를 나타내는 값이라고 생각하면 될 것 같다.