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

2025. 3. 12. 22:09·Back/NestJS
목차
  1. Pagenation의 주요 특징

 

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

 

 

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
  1. Pagenation의 주요 특징
'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)
  • 블로그 메뉴

    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

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

  • 최근 글

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

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.