[to do list] 페이지네이션 이론

1. 페이지네이션이란?

1-1 페이지네이션 이론

pagination이란 데이터를 한 번에 다 보여줄 수 없는 경우 사용하는 기능입니다. 리소스를 분활하여 전달하여 설정된 기준으로 정렬한 데이터를 지정된 갯수만큼만 전달을 합니다.

페이지네이션의 경우 대부분의 웹사이트 구축자나 CMS, 블로그 플랫폼에서 콘텐츠 구성을 위한 기본값으로 설정이 되어 있어, 사이트 구축 시 즉시 사용할 수 있다는 장점이 있습니다.

▶페이지네이션과 무한스크롤의 장단점 비교

1-2. 설정값

페이지네이션은 아래와 같은 설정값을 필요로 합니다.

• currentPage: 현재 페이지
• totalCount: 총 데이터의 갯수
• pageCount: 화면에 나타날 페이지 갯수
• limit: 한 페이지 당 나타낼 데이터의 갯수

1-3 총페이지 갯수 계산하기

let totalPage = Math.ceil(totalCount / limit)

예를 들어보면,

const totalCount = 53
const limit = 5

let totalPage = Math.ceil(totalCount / limit) // 11

데이터가 부족하더라도 (53%5=3, 데이터2개부족) 그 페이지를 보여줄 수 있도록 올림처림(Math.ceil)을 합니다.

1-4 현재 페이지의 그룹 계산하기

보이는 그룹의 첫 번째 숫자와 마지막 숫자를 구하기 위해서는 현재페이지가 몇 번째 그룹에 속해있는지를 알아야합니다.

let pageGroup = Math.ceil(currentPage / pageCount)

예를 들어,

const currentPage = 1
const pageCount = 5

let pageGroup = Math.ceil(currentPage / pageCount) // 1

const currentPage = 7
const pageCount = 5

let pageGroup = Math.ceil(currentPage / pageCount) // 2

1-5 현재 페이지 그룹의 첫번째/마지막 숫자 구하기

현재 페이지 그룹의 첫번째 숫자부터 마지막 숫자만큼 페이지를 화면에 표시하기 위해서는 현재페이지 그룹의 첫번째와 마지막 숫자를 구해야합니다.

또한 현재페이지 그룹의 첫번째와 마지막 숫자를 구해야 페이지네이션의 이전, 다음을 구현할 수 있습니다. 이전을 누르면 이전 그룹으로 넘겨주고 다음을 누르면 다음 그룹으로 넘겨주게 됩니다.

const pageGroup = 1
const pageCount = 5
const totalPage = 11

let lastNumber = pageGroup * pageCount // 5
if (lastNumber > totalPage) {
  lastNumber = totalPage
}
let firstNumber = lastNumber - (pageCount - 1) // 1

const next = lastNumber + 1 // 6
const prev = firstNumber - 1 // 0

// 1~5만큼 페이지네이션 그려줌
for (let i = firstNumber; i <= lastNumber; i++) {
  html += `<button class="pageNumber" id="page_${i}">${i}</button>`
}

※pageGroup이 마지막 페이지인 경우

const pageGroup = 3
const pageCount = 5
const totalPage = 11

let lastNumber = pageGroup * pageCount // 15
if (lastNumber > totalPage) {
  lastNumber = totalPage // 11
}
let firstNumber = lastNumber - (pageCount - 1) // 7

const next = lastNumber + 1 // 12
const prev = firstNumber - 1 // 6

json-server

https://github.com/typicode/json-server