Pagination

TMDB를 사용한 영화 정보 사이트를 만드는중 Pagination을 적용해 보기로 했다.
Pagination이란 한 페이지에 출력할 개수를 정하고 footer에 페이지 숫자를 출력하여 현재 있는 페이지 번호와 페이지 번호 그룹 그리고 페이지 번호를 입력 했을때 그 번호에 맞는 데이터를 출력한다.

필요 재료

// 현재 페이지 
const currentPage = 1; // 현재 페이지 값
// 한 페이지에 출력할 데이터 개수
const contentsLimit = 20; // tmdb에서는 데이터를 20개씩 끊어 주기에 20을 고정값으로 주었다.
// 페이지 그룹 개수
const pageGroupLimit = 5; // 페이징 넘버 그룹당 넘버 개수 
// 전체 총 페이지 
const total_page = 총 데이터 수 / contentsLimit;
// 현재 페이지 그룹
const currentPageGroup = Math.ceil(currentPage / pageGroupLimit); // 현재 페이지 번호와 페이지 그룹 개수를 나누어 소수점은 올림처리한다.
// 페이지 그룹 넘버 루프 시작 번호
const loopStartNum = (currentPage - 1) * pageGroupLimit + 1; // 현재페이지에 -1을 하고 페이징 넘버 그룹 개수를 곱하고 그 값을 +1을 한다.
// 페이지 그룹 넘버 루프 마지막 번호
const loopEndNum = currentPageGroup * pageGorupLimit; // 현재 그룹페이지와 페이지 그룹 개수를 곱한다.

위의 정보를 준비하고 미리 디자인한 html을 동적으로 생성 한뒤 footer에 append한다.
처음에는 어려워보이나 여러번 보고 작성하다보면 어렵지 않게 구현이 가능한거 같다.
개념만 잘 이해하고 작성하자.