게시판 페이지 번호를 매기는 페이징방법에 대해서 알아보자

오늘은 게시판을 구현하면서,

게시판 밑에 번호를 붙이는,

페이징 방법에 대해서 정리해 보도록 하겠습니다.

참고로 여기서는 Firebase의 데이터베이스 서비스인,

Firestore를 기준으로 하는데,

MySQL같은 관계형 데이터베이스를 사용하시는 분들은,

설계 방법만 참조하실 수 있을 것 같네요.

1. 준비물

게시판 밑에 총 몇개의 페이지가 있는지를 알기 위한 준비물을 정리해 보겠습니다.

1. 총 document의 수

2. 한 페이지에 출력될 document의 수(정해야 함)

일단은 기본적으로 위의 두가지에 대한 정보는 알고 있어야 하는데요.

두번재는 개발자가 정하면 되는 것이니 상관 없구요.

첫번째도 어렵지 않게 설정 할 수 있습니다.

저는 NoSQL인 firebase를 사용하고 있는데요.

아래와 같이 해서 document의 총 개수를 얻어왔습니다.

listDocuments()메소드를 이용하면, 도큐먼트의 레퍼런스만 읽어오는 방식으로,

1회 읽음으로 카운팅 됩니다.

2. Paging

그럼 어떻게 페이징을 하면 좋을 까요.

보통은 아래와 같이 화면에 나타나게 되는데요.

이전  1 2 3 4 5 6 7 8 9 10 다음

2-1. 총 페이지 개수 구하기

이전과 다음은 차차 구현하도록 하고,

먼저 1~10까지를 화면에 보이게 하려면 어떻게 해야 할까요?

먼저 100개의 document가 있다고 하겠습니다.

한화면에 보일 document수를 10개라고 먼저 가정해 볼께요.

나누기의 몫인 10이 나오면 될 것 같네요.

조금 쉬워보이네요. 보통 이렇게 쉽지 않은데 말이지요.

그래서 이번엔, 한 페이지에 9개씩 나온다고 가정해 보겠습니다.

그럼,100/9= 11...1  몫이 11이고 나머지는 1이 나오네요.

역시나.. 단순히 몫으로만 하면 않되겠네요.

나머지 1개의 document를 표시하기 위해서 1개의 페이지가 더 필요하니까요.

위의 계산을 가지고 정리해 보면 아래와 같은 결론을 가지게 되는데요.

나누기를 해봐서 나머지가 있으면,

1을 더해주고, 없으면 더해주지 않는다.

2-2. 화면에 표시할 페이지 알아내기

예를들어 document가 1000개가 있을 경우,

10개씩 보여줘야 한다고 가정해 보겠습니다.

100페이지가 나오는데,

이것을 1 2 3....100까지 한 화면에 보여주면,

유저가 너무 힘들겠지요.

그래서 네이버 카페 같은 곳을 참조해 보면,

1에서 10까지 페이지만 표시해 주고,

나머지는 다음 페이지를 누르게 해서,

다음 11에서 20까지 보여주도록 하는데요.

어떻게 하면 이렇게 할 수 있을까요?

위에서와 같이 1000개의 게시물이 있다고 가정해 보겠습니다.

10개씩 보여준다고 하면,

100개의 페이지가 나오는데요.(이에 대한 계산법은 2-1에서 정리했구요.)

현재 유저가 보고있는 페이지가 33페이지라고 하겠습니다.

네이버 카페처럼 할려면,

아래와 같이 나오도록 해야 하는데요.

이전 31 32 33 34 35 36 37 38 39 40 다음

제 성향상 쉬운것부터 정리하겠습니다.

일단 첫페이지인 31을 찾아낼 수 있으면,

마지막 페이지는 최대, 첫 페이지 + 9 혹은 

남아있는 페이지가 10개보다 작은 경우 전부다 입니다.

마지막 페이지는 구할 수 있으므로,

첫페이지를 찾기만 하면되는데요.

31~40이 나올 경우, 31이라는 숫자를 도출 해 낼수 있어야 겠네요.

일단 여기서 생각해 낼 수 있는 상수는 

한페이지에 몇개의 페이지를 보여줄 지 입니다.

일반적으로는 네이버카페와 같은 10개 이지요.

한번 여기까지 저희가 가지고 있는 것들을 정리해 보겠습니다.

1. 마지막 페이지 구하는 법 = 첫 페이지+9 혹은 (10개 미만이 남은경우)남아있는 모든 페이지

2. 한 페이지당 페이지 수 = 10

일단 하나의 페이지에 10개씩 보여지므로,

33을 10씩 나누어 줍니다.

첫 페이지를 알아야 하는 것 이므로,

나머지는 필요없고 몫만 있으면 됩니다.

이를 다시 10을 곱해주면,

나머지가 떨어져 나간 30이 나옵니다.

여기에 1을 더해주면 31이 나오지요.

그럼 이번에도 40인 경우에도 적용되는지 검증해 보겠습니다.
40인 경우 10을 나누어 준 몫에 다시 10을 곱해주니,

40그리고 1을 더해주니, 41이 나오네요.

무엇을 수정해야 할까요?

페이지가 0에서 시작하지 않고 1에서 시작하므로,

처음에 나누어주기 전에 1을 빼 주고,

10으로 나누어 준 다음 다시 10을 곱해주면 되는군요.

다시 40에 적용해 보겠습니다.

40-1을 10으로 나누니 몫이 3이구요.

여기에 10을 곱한다음 다시 1을 더하니,

31이 나오네요

2-3. 이전과 다음 구하기

위에서 페이지 수 구하는 방법,

그리고 현재페이지에서 표시할 페이지 나타내는 방법등을 정리해 보았는데요.

그럼 마지막으로 이전과 다음의 경우는 어떻게 해야 할까요?

먼저 이전을 구하도록 하겠습니다.

이것은 조금 쉬운 편인데요.

위에서 구한 처음 페이지의 다음 페이지로 이동시켜 주도록 하면 되겠네요.

예를 들어, 33의 경우 처음페이지인 31을 구하고,

1을 뺀 30 페이지로 이동 시켜 주면 되겠습니다.

다만 처음 페이지가 1인 경우 disable시켜주면 되구요.

다음의 경우도 현재 페이지의 마지막 페이지 값을 구해서,

그것이 전체페이지의 마지막 페이지가 아니라면,

마지막 페이지에서 1을 더한 값으로 페이지를 이동시켜 주면 되겠네요.