03C. 게시물에 일련번호 추가하기

Less than 1 minute

03C. 게시물에 일련번호 추가하기 관련

3-03. 게시물에 일련번호 추가하기

점프 투 스프링부트 - WikiDocs

pahkey/sbb3 - 3-03

계속해서 SBB 서비스를 개선해 보자.

게시물 번호가 1부터 시작되는 문제

현재 질문 목록 화면을 유심히 보면 페이지마다 게시물 번호가 항상 1부터 시작되는 문제가 있다. 페이지를 이리저리 이동해 봐도 게시물 번호는 1부터 시작한다. 이 문제를 해결해 보자.

두번째 페이지로 이동하더라도 여전히 게시물 번호가 1부터 시작된다.

게시물 번호 공식 만들기

만약 질문 게시물이 12개라면 0페이지에는 12번째~3번째 게시물이, 1페이지에는 2번째~1번째 게시물이 역순으로 표시되어야 한다. 질문 게시물의 번호를 역순으로 정렬하려면 다음과 같은 공식을 적용해야 한다.

\text{번호} = \text{전체 게시물 개수} - \(\text{현재 페이지}\times\text{페이지당 게시물 개수}\)-\text{나열 인덱스}

항목	설명
번호	최종 표시될 게시물 번호
전체 게시물 개수	데이터베이스에 저장된 게시물 전체 개수
현재 페이지	페이징에서 현재 선택한 페이지 (만약 페이지가 1부터 시작한다면 1을 빼주어야 한다. 하지만 스프링부트의 페이징은 0부터 시작하므로 1을 뺄 필요가 없다.)
페이지당 게시물 개수	한 페이지당 보여줄 게시물의 개수
나열 인덱스	`for` 문 안의 게시물 순서 (나열 인덱스는 현재 페이지에서 표시할 수 있는 게시물의 인덱스이므로 10개를 표시하는 페이지에서는 0~9, 2개를 표시하는 페이지에서는 0~1로 반복된다.)

공식이 조금 복잡하니 질문 게시물이 12개인 상황을 예로 들어 설명해 보자. 현재 페이지가 0이면 번호는 전체 게시물 개수 12에서 나열 인덱스 0~9를 뺀 12~3이 된다. 현재 페이지가 1이면 페이지당 게시물 개수는 10이므로 12에서 10을 뺀 값 2에 나열 인덱스 0~1을 다시 빼므로 번호는 2~1이다.

게시물 번호 공식을 질문 목록 템플릿에 적용하기

이제 게시물 번호 공식을 다음처럼 질문 목록 템플릿에 적용해 보자. 다음 코드의 1번째 td 엘리먼트에 이 공식을 그대로 적용했다.

파일명: /sbb/src/main/resources/templates/question_list.html

<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-3">
    <table class="table">
        <thead class="table-dark">
            (... 생략 ...)
        </thead>
        <tbody>
            <tr th:each="question, loop : ${paging}">
                <td th:text="${paging.getTotalElements - (paging.number * paging.size) - loop.index}"></td>
                <td>
                    <a th:href="@{|/question/detail/${question.id}|}" th:text="${question.subject}"></a>
                </td>
                <td th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></td>
            </tr>
        </tbody>
    </table>
    (... 생략 ...)
</div>
</html>

다음 표는 템플릿에 사용한 공식의 상세 정보이다.

항목	설명
`paging.getTotalElements`	전체 게시물 개수
`paging.number`	현재 페이지 번호
`paging.size`	페이지당 게시물 개수
`loop.index`	나열 인덱스(0부터 시작)

이제 게시물 번호가 우리가 의도한 대로 출력된다.

성공이다! 페이지를 이리저리 이동하며 게시물 번호를 확인해 보자.