🧩 [Data Structure] 대규모 데이터에서의 게시글 목록 조회.

🍎 Intro.

• 대규모 데이테이서 게시글 목록 조회는 왜 복잡할까요?
  • 그 이유는 모든 데이터를 한 번에 보여줄 수 없기 때문입니다.
    • 메모리, 네트워크, 성능 등의 제약이 있음.
  • 위와 같은 이유로 인해 페이징이 필요합니다.

✅1️⃣ 페이징 처리란 무엇일까요?

• 페이징 처리(Paging)란, 많은 양의 데이터를 여러 페이지로 나누어 한 번에 일부 데이터만 표시하는 방법을 말합니다.
• 주로 웹 애플리케이션, 데이터베이스, UI 설계 등에서 대량 데이터를 효율적으로 표시하고 처리하기 위해 사용됩니다.

✅2️⃣ 페이징 처리가 필요한 이유?

• 1. 대량 데이터를 효율적으로 처리하기 위해:
  • 데이터가 많을 경우, 한 번에 모든 데이터를 사용자에게 보여주면 성능 저하와 불편한 UI/UX 문제가 발생합니다.
    • 페이징을 사용하면 한 번에 필요한 데이터만 가져와 성능을 향상할 수 있습니다.
• 2. 사용자 경험(UX) 개선:
  • 데이터를 페이지별로 나누어 보여줌으로써 사용자가 데이터를 쉽게 탐색할 수 있습니다.
    • 예: 쇼핑몰 상품 목록, 블로그 게시글 목록 등

✅3️⃣ 페이징 처리의 구성 요소?

• 페이징 처리는 주로 다음과 같은 구성 요소로 이루어집니다:
• 1. 페이지 번호(Page Number):
  • 사용자가 보고자 하는 페이지를 나타냅니다.
    • 예: 1, 2, 3, …
• 2. 페이지 크기(Page Size):
  • 한 페이지에 표시할 데이터의 개수를 설정합니다.
    • 예: 10개, 20개, 50개 등.
• 3. 전체 데이터 수(Total Items):
  • 전체 데이터의 개수를 계산하여 몇 페이지까지 필요한지 결정합니다.
• 4. 전체 페이지 수(Total Pages):
  • 전체 데이터를 페이지 크기로 나눈 값입니다.
    • 계산: 전체 페이지 수 = [전체 데이터 수 / 페이지 크기]

✅4️⃣ 페이징 처리의 예.

🛍️ 쇼핑몰 상품 목록.

• 예를 들어, 1,000개의 상품이 있고, 한 페이지에 20개의 상품을 표시한다고 가정합니다.
  • 페이지 크기 (Page Size): 20
  • 전체 페이지 수 (Total Pages): [1,000 / 20] = 50
• 사용자가 각 페이지를 요청하면 다음과 같이 데이터를 나누어 가져옵니다:
  • 1페이지 : 상품 1 ~ 20
  • 2페이지 : 상품 21 ~ 40
  • …
  • 50페이지 : 상품 981 ~ 1,000

✅5️⃣ 페이징 처리의 구현 방식.

• 서버 애플리케이션 내의 메모리로 디스크에 저장된 모든 데이터를 가져온 후 특정 페이지만 추출하는 것은 비효율적 입니다.
  • 디스크 접근은 메모리 접근보다 느리기 때문입니다.
    • 디스크 I/O 비용이 듭니다.
  • 디스크에 저장된 데이터는 메모리 용량을 초과할 수 있습니다.
    • Out of Memory(OOM)
      • 시스템에서 사용 가능한 메모리가 모두 사용되어 더 이상 할당할 수 없는 상황을 말합니다.
• 데이터베이스에서 특정 페이지의 데이터만 바로 추출하는 방법이 필요합니다.
  • 이것을 “페이징 쿼리”라고 부릅니다.
    • 이러한 페이징 방식은 클라이언트 또는 서비스 특성에 따라서 크게 두 가지로 나뉩니다.
      • 1. 페이지 번호
      • 1. 무한 스크롤

      • ✅1️⃣ “페이지 번호”와 “무한 스크롤”이란?

• 페이지 번호 방식과 무한 스크롤 방식은 데이터를 페이징 처리하여 사용자에게 보여주는 방법입니다.
  • 둘 다 데이터를 페이지 단위로 나누어 로드하지만, 사용 방식과 사용자 경험(UX)이 크게 다릅니다.

✅2️⃣ 페이지 번호 방식.

• 페이지 번호 방식은 데이터 전체의 페이지를 번호로 나누고, 사용자가 특정 페이지 번호를 클릭하거나 선택하여 해당 페이지의 데이터를 요청하는 방식입니다.

📌1️⃣ 페이지 번호 방식의 특징.

• 데이터는 페이지별로 구분됩니다.
• 사용자는 특정 페이지를 직접 탐색할 수 있습니다.
• 일반적으로 화면 아래에 페이지 번호(Pagination)가 표시됩니다.

📌2️⃣ 예시: 쇼핑몰 상품 목록.

[1] [2] [3] [4] [5] ... [Next >]

• 사용자가 “3번 페이지”를 클릭하면, 3번 페이지에 해당하는 데이터를 서버에서 가져옵니다.

📌3️⃣ 페이지 번호 방식의 장점.

• 1. 사용자가 원하는 페이지를 직접 탐색할 수 있습니다.
• 1. 네트워크 요청이 명확히 구분되어, 사용자가 로드 과정을 제어 가능합니다.
• 1. 데이터 로딩 및 성능 관리가 용이합니다.

📌4️⃣ 페이지 번호 방식의 단점.

• 1. 페이지 이동 시 화면이 갱신되므로 UX가 끊길 수 있습니다.
• 1. 사용자가 원하는 데이터를 찾기 위해 여러 페이지를 반복 탐색해야 할 수 있습니다.

✅2️⃣ 무한 스크롤 방식.

• 무한 스크롤 방식은 사용자가 페이지 번호를 선택하지 않고, 화면을 아래로 스크롤할 때마다 자동으로 다음 데이터를 로드하는 방식입니다.

📌1️⃣ 무한 스크롤 방식의 특징.

• 데이터는 한 번에 하나의 페이지씩 뒤에서 추가 로드됩니다.
• 사용자는 끊김 없는 스크롤 경험을 얻습니다.
• 일반적으로 소셜 미디어나 이미지 갤러리에서 많이 사용합니다.

📌2️⃣ 무한 스크롤 방식의 예시: SNS 피드.

• 사용자가 아래롤 스크롤하면 새로운 게시물이 계속 추가로 로드됩니다.
• 페이지의 개념이 보이지 않으며, 데이터가 끊기지 않고 계속 표시됩니다.

📌3️⃣ 무한 스크롤 방식의 장정.

• 1. UX가매끄럽고 직관적이며, 탐색이 빠릅니다.
• 1. 사용자가 클릭 없이 데이터를 자연스럽게 탐색 가능합니다.
• 1. 모바일 확경에 특히 적합합니다.

📌4️⃣ 무한 스크롤 방식의 단점.

• 1. 네트워크 요청이 많아져서 서버 부하가 증가할 수 있습니다.
• 1. 사용자가 특정 위치로 돌아가거나 특정 데이터를 다시 찾ㄱ기 어렵습니다.
• 1. 데이터가 많아질수록 브라우저 메모리 사용량이 증가합니다.

✅3️⃣ 비교: 페이지 번호 vs 무한 스크롤

✅4️⃣ SQL 예제.

📝1️⃣ 페이지 번호 방식.

-- 페이지 번호 기반 페이징 (페이지 크기: 10, 2번 페이지 데이터)
SELECT *
FROM article
ORDER BY created_at DESC
LIMIT 10 OFFSET 10;

• LIMIT 10 ➞ 한 번에 가져올 데이터 개수.
• OFFSET 10 ➞ 몇 개를 건너뛰고 가져올지.

📝2️⃣ 무한 스크롤 방식.

-- 무한 스크롤 페이징 (커서 기반, created_at 기준)
SELECT *
FROM article
WHERE created_at < '2025-01-31 12:00:00'
ORDER BY created_at DESC
LIMIT 10;

• WHERE created_at < ? ➞ 현재 로드된 마지막 데이터의 시간보다 이전 데이터를 가져옴.
• LIMIT 10 ➞ 한 번에 가져올 데이터 개수.

✅5️⃣ 페이지 번호 방싱과 무한 스크롤 방식 정리.

• 페이지 번호 방식 : 사용자가 페이지를 직접 선택하여 탐색하며, 상품 목록, 검색 결과와 같은 구조에 적합합니다.
• 무한 스크롤 방식 : 끊김 없는 스크롤 경험을 제공하며, 소셜 미디어 피드, 이미지 갤러리 등 동적 콘텐츠에 적합합니다.

✅6️⃣ 페이징 처리의 장단점.

✅1️⃣ 장점.

• 1 성능 최적화 : 한 번에 필요한 데이터만 처리하므로 응답 속도가 빨라집니다.
• 2. 사용자 경험 개선 : 대량 데이터를 탐색하기 쉽고, UI가 간결해집니다.
• 3. 네트워크 효율성 : 클라이언트와 서버 간 전송되는 데이터 양이 줄어듭니다.

❌2️⃣ 단점.

• 1. 구현 복잡성 증가 : 서버 및 클라이언트에서 페이징 처리를 추가로 구현해야 합니다.
• 2. 페이지 이동 시 추가 요청 : 각 페이지를 이동할 때마다 서버와 통신해야 하므로, 느린 네트워크에서는 체감 속도가 떨어질 수 있습니다.