페이지네이션
페이지네이션은 긴 목록 데이터를 한 번에 모두 보내지 않고 page, limit, cursor 같은 기준으로 잘라서 보여주는 방식이다. 게시글, 주문, Q&A, 로그처럼 데이터가 계속 늘어나는 화면에서 서버 비용과 브라우저 렌더링 부담을 줄이고 사용자가 원하는 위치를 안정적으로 탐색하게 해준다. 바이브 코딩에서는 AI에게 목록 API를 만들라고 할 때 정렬 기준, 다음 페이지 표시, 빈 결과, 마지막 페이지 처리, 중복 항목 방지까지 함께 요구해야 실제 서비스에서 흔들리지 않는다.
영어 표기
Pagination
예시
Q&A 목록 API를 만들 때 AI에게 최신순 20개씩 cursor 기반으로 가져오고, 다음 cursor가 없으면 더 보기 버튼을 숨기며, 새 질문이 추가되어도 이미 본 항목이 중복되지 않는 테스트를 작성하게 한다.
참고
offset 방식은 단순하지만 큰 데이터에서 느려질 수 있고, cursor 방식은 실시간으로 변하는 목록에서 중복과 누락을 줄이는 데 유리하다.
카테고리
백엔드·인프라
난이도
basic
태그
페이지네이션 · 목록
함께 읽기
연관 용어
백엔드·인프라
HTTP
영어 표기 HTTP (Hypertext Transfer Protocol)
브라우저와 서버가 요청과 응답을 주고받는 웹의 기본 통신 규칙이다. 사용자가 주소를 열면 브라우저가 HTTP 요청을 보내고, 서버는 HTML, JSON, 이미지 같은 응답을 돌려준다. 상태 코드 200, 404, 500과 GET, POST 같은 메서드는 웹 앱 디버깅의 가장 기본 언어이므로 바이브 코딩 초보자도 반드시 익혀야 한다.
백엔드·인프라
URL
영어 표기 URL (Uniform Resource Locator)
웹에서 특정 페이지나 리소스의 위치를 나타내는 주소이다. 도메인, 경로, 쿼리 문자열 같은 부분으로 구성되며, 같은 앱 안에서도 /qna, /hermes, /vibe-dictionary처럼 경로에 따라 다른 화면이 열린다. AI에게 라우팅이나 링크 수정을 요청할 때 URL 구조를 이해하면 깨진 링크와 잘못된 리다이렉트를 더 빨리 찾을 수 있다.
보안·인증
교차 출처 리소스 공유
영어 표기 CORS (Cross-Origin Resource Sharing)
브라우저가 한 출처의 웹 페이지에서 다른 출처의 API를 호출할 때 적용하는 보안 규칙이다. 프론트엔드와 백엔드 도메인이 다르면 서버가 어떤 출처를 허용하는지 응답 헤더로 알려줘야 한다. 바이브 코딩 초보자가 '브라우저에서는 막히는데 터미널 curl은 된다'는 상황을 만날 때 CORS가 원인인 경우가 많다.