게시판 Pagination(페이지네이션) 구현

웹 프론트엔드 개발자의 기본 소양중 하나는 '게시판 구현'이다. 그 중에서 게시글이 여러개일 경우에는 여러 페이지에 걸쳐서 게시글을 보여줘야 하기 때문에 '페이지네이션' 기법이 필요하다. 1페이지에는 게시글 1번~N번, 2페이지에는 (N+1)번~2N번...  이런 식으로 일정한 기준에 맞춰서 게시글을 보여주는 방법을 말한다. 이를 구현하려면 웹페이지의 특성을 고려하여 몇 가지 파라미터를 미리 정해놓아야 한다. 하나는 한 페이지당 보여줄 게시글의 수(ITEM_PER_PAGE)와 다른 하나는 한 섹션당 보여줄 페이지의 수(PAGE_PER_SECTION)이다. 이 글에서 소개할 때는 두 파라미터는 각각 10개와, 5개로 설정하도록 하겠다.
다음으로 고려해야 할 점은 섹션간 이동할 때이다. 총 게시글 수가 100개라면 총 페이지수는 10개(=100 / ITEM_PER_PAGE)이다.PAGE_PER_SECTION이 5개이기 때문에 우리는 총 2개의 섹션이 필요하다. 첫 번째 섹션에는 [1,2,3,4,5] 페이지가 보일 것이고, 두 번째 섹션에는 [6,7,8,9,10]이 보일 것이다. 그리고 섹션 간 이동을 할 때는 좌우 꺽쇠 <,>로 이동할 수 있다. 첫 번째 섹션에서 두 번째 섹션으로 이동하면 가장 왼쪽에 있는(값이 가장 작은)페이지가 1에서 6으로 바뀌어야 한다. 여기서 나는 가장 왼쪽에 있는 값을 따로 leftMostPage라는 변수로 관리하여 [leftMost, leftMost+1,leftMost+2,...]배열의 원소를 PAGE_PER_SECTION개로 만들었다. 그래서 섹션을 이동할 때('>' 버튼을 누를 때)는 leftMostPage에 PAGE_PER_SECTION을 더하거나 빼주면 된다.