[Node.js] 페이징 구현하기 (?page=10000 처리하기)

이번 포스팅에서는 게시판 등에서 필수로 구현되어야 할 기능인 페이징을 구현하는 방법에 대해서 알아보겠습니다.

 

먼저 전체코드부터 보시겠습니다. (코드는 TypeScript로 작성되었습니다.) 

// 페이징 함수 
export async function paging(curPage: number, totalRowCount: number) {
  // 페이지당 게시물 수 
  let page_size: number = 10;
  // 보여지는 페이지의 갯수 : 1 ~ 5 페이지
  let page_list_size: number = 5; 
  // limit 변수 (DB에서 가져올 게시물 수 no~ 
  let no: number = 0;

  // 인자로 받은 현재 페이지 번호  
  curPage = Number(curPage)

  if (curPage <= 0) {
    no = 0;
    curPage = 1;
  }  
  else no = (curPage - 1) * page_size;

  // 전체 페이지 갯수 
  if (totalRowCount < 0) totalRowCount = 0;
  let totalPage = Math.ceil(totalRowCount /  page_size); // 전체 페이지 수 
  if (totalPage < curPage) {
    no = 0;
    curPage = 1 // totalPage 보다 더 큰 curPage가 호출되면 에러 발생시키기
  }


  let startPage = ((curSet - 1) * page_list_size) + 1; // 시작 페이지 계산
  let endPage = (startPage + page_list_size) - 1; // 마지막 페이지 계산

  let result = {
    "curPage": curPage,
    "page_list_size": page_list_size,
    "page_size": page_size,
    "totalPage": totalPage,
    "startPage": startPage,
    "endPage": endPage,
    "no": no
  }

  return result;
}

이제 코드를 하나하나씩 뜯어보도록 하죠.

export async function paging(curPage: number, totalRowCount: number) 

함수의 인자는 curPage와 totalRowCount가 있습니다. curPage는 게시판의 현재페이지를 의미하고 totalRowCount는 게시물 페이지의 전체 게시물 수를 의미합니다. 이 두 가지를 이용해서 페이징을 위한 변수들을 만들어 냅니다. 

 

다음은 페이징에서 필요한 변수 선언 부분입니다.

  // 페이지당 게시물 수 
  let page_size: number = 10;
  // 보여지는 페이지의 갯수 : 1 ~ 5 페이지
  let page_list_size: number = 5; 
  // limit 변수 (DB에서 가져올 게시물 수 no~ 
  let no: number = 0;

  // 인자로 받은 현재 페이지 번호  
  curPage = Number(curPage)

특별한 설명없이 주석을 통해서 어떤 변수인지 파악하실 수 있을겁니다.

 

다음의 코드는 예외처리를 해주는 코드입니다.

  if (curPage <= 0) {
    no = 0;
    curPage = 1;
  }  
  else no = (curPage - 1) * page_size;

  // 전체 페이지 갯수 
  if (totalRowCount < 0) totalRowCount = 0;
  let totalPage = Math.ceil(totalRowCount /  page_size);  // 전체 페이지 수 
  if (totalPage < curPage) {
    no = 0;
    curPage = 1 // totalPage 보다 더 큰 curPage가 호출되면 에러 발생시키기
  }

만약 현재 여러분이 구현하고 있는 게시판 URL에  'page=3' 이런식으로 페이지 번호를 포함하고 있다면 위 코드 부분이 반드시 필요합니다. 왜냐하면 사용자들 중에 page=-1000, page=365 이런식으로 굉장히 작은 숫자 혹은 굉장히 큰 숫자를 입력해보는 사람이 있을 수 있기 때문이죠. 위 코드는 이런 경우를 대비해줍니다. 만약 현재 페이지가 -1000 즉 curPage=-1000이라면 no =0, curPage=1로 해주면서 굉장히 작은 숫자가 들어오면 무조건 첫 페이지를 렌더링하게 해줍니다. 또는 페이지가 굉장히 큰 숫자 즉, 전체 페이지 갯수를 넘어가는 숫자가 들어온다면 역시 가장 첫페이지로 이동하게 해줍니다. 이 경우 가장 마지막 페이지로 넘기고 싶다면 curPage=totalRowCount로 no=(curPage -1) * page_size로 선언해주시면 됩니다. 

 

  let startPage = ((curSet - 1) * page_list_size) + 1; // 시작 페이지 계산
  let endPage = (startPage + page_list_size) - 1; // 마지막 페이지 계산

  let result = {
    "curPage": curPage,
    "page_list_size": page_list_size,
    "page_size": page_size,
    "totalPage": totalPage,
    "startPage": startPage,
    "endPage": endPage,
    "no": no
  }

  return result;

마지막으로 시작페이지와 마지막 페이지를 계산하고 이 변수들을 object 타입으로 반환해주면 끝입니다.

 

* 코드에 대해 궁금하신 점 댓글로 남겨주시면 감사하겠습니다.*