[TIL] json-server를 활용한 페이지네이션 구현시 고려해야할 사항

백엔드없이 to-do-list를 만들기 위해 full fake REST API인 json-server를 사용하였음.
그리고 to-do-list를 구현하면서 추가한 기능 pagination를 정리해보려 한다.

---

1. route 설정

현재 페이지를 나타내줄 _page와 한 페이지 당 데이터의 갯수를 나타내 줄 limit을 요청하기위해
fetch로 GET을 불러오는 getTodos함수의 url을 아래와 같이 변경해주었음.

그렇게 변경하고 해당 페이지를 새로고침 하니, url이 아래와 같이 변경되었다.

---

2. pagination 구현을 위한 값 설정.

1. 현재 페이지
2. 총 데이터의 갯수 (백엔드와 연결된 것이 아니기에 내 데이터의 갯수를 넘길 수는 없고, 임의로 설정해야 함)
3. 화면에 나타날 페이지 갯수
4. 한 페이지 당 나타낼 데이터의 갯수

현재 작성한 todo의 갯수가 89이기에 임의로 설정.

---

3. pagintaion 구현을 위해 계산해야 될 값.

let totalPage               // 총 페이지 갯수

let currentPageGroup        // 현재 페이지가 몇번째 그룹인지

let lastNumber              // 현재 페이지 그룹의 마지막 숫자
let firstNumber             // 현재 페이지 그룹의 첫번째 숫자
const next                  // 이전 그룹으로 가기
const prev                  // 다음 그룹으로 가기

• 총 페이지 갯수
  총 데이터의 갯수에서 한 화면에 나타날 페이지 갯수를 나눈 후, 소수점을 올림.

const totalCount = 89
const limit = 5

// 17.8 이므로, 17페이지와 + ceil함수로 인한 1페이지 (4개의 데이터)
let totalPage = Math.ceil(totalCount / limit) // 18

• 현재 페이지가 몇번째 그룹인지
  이걸 알아야 현재 페이지 그룹 상의 첫번째/ 마지막 숫자를 구할 수 있음.

const currentPage = 1
const pageCount = 5

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

• 현재 페이지 그룹의 첫번째/ 마지막 페이지의 값
  이걸 알아야 화면에 버튼형식으로 각 그룹별 첫번째/ 마지막 페이지를 화면에 표시해줄 수 있음.
  또한, next와 prev를 통해 이전/ 다음 버튼을 구현할 수 있다.

const currentPageGroup = 1
const pageCount = 5
const totalPage = 18

let lastNumber = currentPageGroup * pageCount // 5

// lastNumber가 totalPage보다 클 수 없음.
if (lastNumber > totalPage) {
	lastNumber = totalPage
}

let firstNumber = lastNumber - (pageCount - 1) // 1

const next = lastNumber + 1
const prev = firstNumber - 1

---

위의 값들을 구하여 이전/다음버튼과 각 페이지의 갯수의 ui를 구현한 후, 클릭이벤트 기능을 넣어주면 끝!

---

[ 출처, 참고 : 제로베이스 프런트엔드 스쿨 ]
[ docs : https://github.com/typicode/json-server#paginate ]