페이지네이션(Pagenation) 구현하기 - (1)

2025. 3. 12. 22:09·Back/NestJS

 

페이지네이션을 구현하기 전에 이론적으로 정리하며 공부하려고 한다!

 

 

Pagenation의 주요 특징

[ 데이터를 나눠서 보여줌 ]

한 번에 모든 데이터를 보여주지 않고, 일부만 보여줌 (예: 1페이지에 10개씩).

사용자 입장에서 가독성 향상 + 로딩 속도 개선.

[ 서버/클라이언트의 부담 감소 ]

전체 데이터를 한 번에 처리하면 리소스 낭비가 커지는데, 페이징하면 필요한 만큼만 가져오니까 효율적이야.

페이지 이동 기능 제공

사용자는 원하는 페이지로 쉽게 이동 가능 (1, 2, 3... 다음, 이전 등).

데이터 정렬과 필터링과 함께 사용 가능

정렬, 검색과 함께 사용하면 다양한 조건의 페이징 처리가 가능함

 

 

페이지네이션 구현에는 보통 두 가지 방식이 있다.

 

1. Offset 기반 Pagination

LIMIT, OFFSET 사용 (예: SQL에서 LIMIT 10 OFFSET 20)

간단하지만, 페이지가 깊어질수록 성능이 저하될 수 있음.

 

예시)
/products?page=3&limit=10 → 3페이지, 10개씩

 

2. Cursor 기반 Pagination (Keyset Pagination)

마지막 데이터의 ID나 Timestamp 기준으로 다음 데이터를 조회.

성능이 좋고, 특히 무한스크롤이나 실시간 데이터 처리에 유리함.

 

예시)

/products?cursor=12345&limit=10 → 12345 이후 데이터 10개

 

 


 

여기서 나는 Cursor 기반의 Pagenation을 구현하기로했다 (=무한스크롤)

with NestJS + TypeScript

 

요청형태

GET /diary?sort=createAt&order=asc&id_gt=3&limit=20

 

sort=createAt → 어떤 필드를 기준으로 정렬할지

 

order=asc → 정렬 방향 (asc / desc)

id_gt=3 → 조건 필터 (어떤 id 이후로부터 데이터를 요청할건지)

limit=20 → 몇 개의 데이터를 가져올건지

 

 

 

응답형태

// 데이터를 리스트로 받는 부분
"data" : [
    {
    	"id": 4,
        "title": "제목"
    }
],
// 페이징 관련 정보를 입력하는 곳
"paging": {
	// 다음 커서에 대한 정보
	"cursor": {
    	"arter": 4
    },
    // 총 몇 개의 데이터가 응답왔는지
    "count": 20,
    // 다음 요청 URL
    "next": "/diary?sort=createAt&order=asc&id_gt=4&limit=20"
}

 

저작자표시 (새창열림)

'Back > NestJS' 카테고리의 다른 글

[NextJS] 프로젝트 생성하기 with Yarn berry 4.4.0  (0) 2025.01.26
[NestJS] JWT(JSON Web Token) - 로그인 API 구현과 암호화  (0) 2024.08.10
[NestJs] @InjectRepository 데코레이터 with TypeORM  (1) 2024.07.27
[Node.js] 블로킹 / 논블로킹  (0) 2023.03.28
[Node.js] 이벤트 루프 (event loop)  (0) 2023.03.28
'Back/NestJS' 카테고리의 다른 글
  • [NextJS] 프로젝트 생성하기 with Yarn berry 4.4.0
  • [NestJS] JWT(JSON Web Token) - 로그인 API 구현과 암호화
  • [NestJs] @InjectRepository 데코레이터 with TypeORM
  • [Node.js] 블로킹 / 논블로킹
soyeon26
soyeon26
  • soyeon26
    개발 일지
    soyeon26
  • 전체
    오늘
    어제
    • 분류 전체보기 (107)
      • Web (22)
        • Web (1)
        • HTTP (0)
      • Language (29)
        • Java Script (3)
        • Type Srcipt (1)
        • Java (25)
      • Front (19)
        • HTML+CSS (4)
        • React (15)
      • Back (41)
        • Spring(Springboot) (9)
        • JSP (21)
        • Database (5)
        • NestJS (6)
      • Devops (6)
        • Docker (1)
        • Git & SVN (5)
      • App (7)
        • Android (7)
      • IT 정보 (3)
  • 블로그 메뉴

    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    스프링부트
    강의후기
    과학기술인 등록번호 발급
    자바스크립트set
    과학기술인번호 조회
    서블릿
    프론트엔드
    sql강의
    중복제거
    인프런
    Java
    강의 후기
    java의 정석
    SQL강의 추천
    csrvsssr
    Next.js
    과학기술인 등록
    김영한
    과학기술인 번호 발급
    SSR
    Spring
    javascript
    데이터베이스 강의
    백엔드
    React
    csr과ssr의 차이
    springboot
    React Next.js
    과학기술인등록번호 조회
    Next.js 필요성
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
soyeon26
페이지네이션(Pagenation) 구현하기 - (1)
상단으로

티스토리툴바