페이지네이션의 정의

📖 페이지네이션의 정의

많은 양의 데이터를 사용자가 보기 편하도록 여러페이지로 나누어서 보여주는 기술이나 방식이다 주로 웹게시판이나 쇼핑몰등에서 자주 볼수 있다

📌 페이지네이션이 필요한 이유

필요한 데이터만 가져와서 로딩속도를 빠르게해 성능이향상된다 또한 DB에 전체 데이터를 계속 요청하는 부담을 줄여주고 정보가 정리되있어 사용자가 원하는것을 찾기 쉬워지기 때문이다

🔀 페이지네이션 처리방식 비교

페이지네이션의 처리방식은 크게 두가지로 나눌수 있다

항목	Front-end Pagination	Back-end Pagination
처리 주체	클라이언트(브라우저)	서버 및 DB
데이터 로딩	전체 데이터를 한 번에 로딩	필요한 데이터만 그때그때 로딩
장점	구현이 매우 쉬움, 서버 요청 1번	대용량 데이터 처리 가능, 보안성 높음
단점	초기 로딩 느림, 보안 위험(전체 노출)	구현 복잡, 페이지 이동마다 서버 요청 발생
사용처	데이터 양이 적을 때	대용량 데이터 처리 시 (가장 표준적)

📌 프론트엔드방식(View)은 전체데이터를 받아서 화면에 출력할때 잘라서 보여주는 방식으로 데이터가 많아질수록 초기로딩이 느려진다

📌 백엔드 방식(DB)은 페이지 번호를 서버에 보내면 서버가 DB에서 딱 필요한 만큼만 가져온다 따라서 대용량데이터 처리에 강하고 보안성이 높지만 구현이 복잡하다

🧩 페이지네이션의 종류

1. 번호형 페이지네이션 (offset 방식)

• 특징: 사용자가 원하는 페이지로 바로 이동 가능하며, 현재 페이지가 숫자로 명확하게 표시된다. 가장 기본적인 방식이다
• 사용처: 게시판, 쇼핑몰 상품 목록, 검색 결과 화면 등 이동 범위가 정확해야 하는 곳.
• 장단점: 구현이 가장 쉽고 사용자가 익숙하지만, 모바일에서 버튼이 많아 불편하거나 페이지 수가 많으면 UI가 복잡해진다

2.무한 스크롤 (cursor 방식)

• 특징: 사용자가 화면을 아래로 스크롤하면 다음 데이터가 자동으로 계속 추가 로딩된다 별도로 페이지 이동 버튼이 필요하지 않다
• 사용처: 인스타그램, 페이스북, 유튜브 쇼츠 등 콘텐츠 소비에 몰입감이 중요한 곳.
• 장단점: 끊김 없는 콘텐츠 소비가 가능하고 모바일 환경에 적합하지만, 특정 위치로 되돌아가기 어렵고 데이터가 많아지면 성능 저하 가능성이 있다

3.더보기 버튼 방식

• 특징: "더보기" 버튼을 클릭해야 다음 데이터가 로딩되며, 사용자가 직접 로딩을 제어할 수 있다
• 사용처: "상품 더보기", "검색 결과 더보기" 등.
• 장단점: 무한 스크롤보다 사용자 제어가 쉽고 한 번에 너무 많은 데이터를 불러오지 않지만, 버튼을 계속 눌러야 해서 몰입감은 무한 스크롤보다 낮다.

🔀 OFFSET 동작원리

앞 N개의 데이터를 건너뛰고 그 다음 M개의 데이터를 가져오는 방식으로 번호형 페이지네이션에서 가장 많이 사용된다

🧪 offset 기본 공식

• offset = DB에서 건너뛸 데이터 수
• page = 사용자가 요청한 페이지 번호 (1, 2, 3...)
• size = 한 페이지에 표시할 데이터 개수
• 예시: 한 페이지에 10개 게시글 표시 시, 3페이지를 보려면 앞 20개(2페이지 분량)를 건너뛰고 21~30번째 게시글을 조회한다.

🔄️ offset 방식의 동작 흐름 (4단계)

1. [1] 사용자 요청: 사용자가 페이지 번호를 클릭하면 서버에 page 파라미터를 전송한다
2. [2] DB 조회 (offset 계산): 서버는 요청받은 page와 size를 이용해 offset을 계산하고, DB에서 필요한 범위의 글만 조회한다 (LIMIT 사용).
3. [3] 전체 페이지 & 블록 계산: 서버는 전체 글 수를 기준으로 총 몇 페이지가 필요한지 확인하고, 현재 페이지를 기준으로 페이지 블록(예: [1, 2, 3, 4, 5])을 계산한다.
4. [4] 화면 출력: 서버에서 계산된 값들(현재 페이지, 전체 페이지, 블록 시작/끝 페이지)을 JSP 등 View로 전달하여 페이지네이션 UI를 구현한다.

🔷 각 MVC의 역할

📌 Controller

사용자의 요청을 받아 DB에 전달할 파라미터를 준비하고 DB에서 결과를 받아서 페이지네이션에 필요한 모든 계산을 수행한다

1. 요청 파라미터 처리	페이지 번호 및 설정 확인
2. 페이지 범위 계산	DB 조회 범위 지정
3. 전체 페이지 계산	`totalCount` 조회 및 활용
4. 블록 계산	페이지 번호 묶음 처리
5. View로 전달	결과 포워딩 또는 JSON 응답

📌 Model

DB에 접근하여 SQL쿼리를 실행하고 데이터를 가져오는 역할을 한다

🧪 핵심 SQL 쿼리 (Oracle 11g 이하 기준)

• 구버전 Oracle은 OFFSET을 지원하지 않기 때문에, 중첩 서브쿼리와 ROWNUM을 사용하여 페이지 범위를 지정한다
• 안쪽 쿼리: 게시글을 최신순으로 정렬한다
• 중간 쿼리: 정렬된 결과에 순번(RN)을 생성하고, ROWNUM <= 끝 행 번호를 이용해 데이터를 자른다
• 바깥 쿼리: WHERE rnum > 시작 행 번호를 이용해 최종적으로 해당 페이지에 해당하는 데이터 범위만 추출한다

🧪 전체 데이터 수(totalCount) 조회 방식

• 총 페이지 수를 계산하려면 전체 데이터 수가 필수이다.
• 개선된 방식: COUNT(*) OVER()를 사용하여 게시글 데이터 조회 쿼리 내에 전체 데이터의 행 수를 한 번에 계산하여 각 행에 포함시킨다
• 이 방식을 통해 데이터 + 총 레코드 수를 한 번에 조회할 수 있어, 기존 DAO 구조를 유지하면서도 페이지네이션 구현이 가능하다

📌View

서버에서 받은 데이터를 바탕으로 사용자에게 보여줄 화면을 구성한다. 특히, AJAX를 사용하면 페이지 이동 시 화면 전체를 새로고침하지 않아도 원하는 페이지로 이동할수 있다.

🧪AJAX를 사용한 동적 페이지네이션

• AJAX 정의: 웹 페이지 새로고침 없이 서버와 데이터를 주고받는 기술
• 동작: 사용자가 페이지 버튼을 클릭하면, JavaScript가 ItemList.do에 GET 방식으로 AJAX 요청을 보낸다
• 응답: 서버는 JSON 데이터(상품 목록 list와 전체 페이지 수 totalPage)를 반환한다
• 갱신: 브라우저의 JS는 받은 JSON 데이터를 이용해 테이블 HTML과 페이지 버튼 영역을 동적으로 갱신한다

🆚 JSP 포워드와 AJAX의 차이점

• 공통점: 페이지에 상품 목록을 보여준다는 점은 같다.
• 차이점
  • AJAX: 서버는 JSON만 보내고 브라우저가 JS로 화면을 그린다
  • 포워드: 서버가 JSP를 실행하여 HTML 전체를 직접 그려서 브라우저에 보낸다
• ❗주의: 처음 페이지 로딩 시에는 서버가 JSP를 렌더링해주어야 하므로, 포워드 부분은 삭제하면 안된다