VIBECODING 365 / DICTIONARY
페이지네이션
Pagination
DEFINITION
정의
페이지네이션은 긴 목록 데이터를 한 번에 모두 보내지 않고 page, limit, cursor 같은 기준으로 잘라서 보여주는 방식이다. 게시글, 주문, Q&A, 로그처럼 데이터가 계속 늘어나는 화면에서 서버 비용과 브라우저 렌더링 부담을 줄이고 사용자가 원하는 위치를 안정적으로 탐색하게 해준다. 바이브 코딩에서는 AI에게 목록 API를 만들라고 할 때 정렬 기준, 다음 페이지 표시, 빈 결과, 마지막 페이지 처리, 중복 항목 방지까지 함께 요구해야 실제 서비스에서 흔들리지 않는다.
참고
offset 방식은 단순하지만 큰 데이터에서 느려질 수 있고, cursor 방식은 실시간으로 변하는 목록에서 중복과 누락을 줄이는 데 유리하다.
ENGLISH
Pagination
EXAMPLE
Q&A 목록 API를 만들 때 AI에게 최신순 20개씩 cursor 기반으로 가져오고, 다음 cursor가 없으면 더 보기 버튼을 숨기며, 새 질문이 추가되어도 이미 본 항목이 중복되지 않는 테스트를 작성하게 한다.
NOTES
offset 방식은 단순하지만 큰 데이터에서 느려질 수 있고, cursor 방식은 실시간으로 변하는 목록에서 중복과 누락을 줄이는 데 유리하다.
관련
이어서 볼 문서
RELATED TERMS
연관 용어
OpenAI Responses API
OpenAI가 Chat Completions 다음에 내세운 상태형 응답 표면이다. 입력은 input, 출력은 Items이며, previous_response_id로 대화를 잇는다.
security 교차 출처 리소스 공유Cross-Origin Resource Sharing (CORS)
다른 출처 페이지의 스크립트가 이 응답을 읽어도 되는지, 서버가 HTTP 헤더로 브라우저에 알리는 방식이다. 요청이 가는 것과 스크립트가 읽는 것은 다르며, 쿠키를 실을 때는 별표 출처가 허용되지 않는다.
프론트엔드·UI Next.js 라우트 핸들러Next.js Route Handler
Next.js App Router에서 app/api/.../route.ts 파일로 만드는 서버 측 API 엔드포인트이다. GET, POST 같은 HTTP 메서드별 함수를 export하여 브라우저 요청을 받고, 데이터베이스 조회나 외부 API 호출 뒤 JSON 응답을 반환한다. 바이브 코딩에서 AI가 프론트엔드 화면만 만들고 저장·조회 API를 빠뜨리거나, 반대로 클라이언트 코드에 비밀 값을 넣는 실수를 할 수 있으므로 라우트 핸들러는 '브라우저에 노출하면 안 되는 서버 작업을 담는 안전한 경계'로 이해해야 한다.