[SpringBoot] 게시물 번호 정렬 / 답변 개수 표시

[게시물 번호 정렬하기]

• 현재 localhost:8090/question/list URL에 접속하게 되면 질문 데이터가 등록한 순서대로 표시가 된다.
• 대부분의 게시판을 생각했을 때 최근에 작성한 게시물이 가장 위에 보이는 것이 일반적이기 때문에 해당 기능을 QuestionService.java 클래스에 코드를 수정하여 적용해봅시다.

public Page<Question> getList(int page) {
    List<Sort.Order> sorts = new ArrayList<>();
    sorts.add(Sort.Order.desc("createDate"));

    Pageable pageable = PageRequest.of(page, 10, Sort.by(sorts));

    return this.questionRepository.findAll(pageable);
}

• 위 코드는 QuestionService.java 클래스에서 getList() 메서드를 수정한 코드이다.
• 게시물을 최신순으로 조회하려면 PageRequest.of 메서드의 매개변수에 Sort 객체를 전달해야한다.
• 작성 일시인 createDate를 역순으로 조회하려면 Sort.Order.desc("createDate") 를 sorts 리스트에 저장한다.
• 만약 작성 일시 외에 정렬 조건을 추가하고 싶다면, sort.add() 메서드를 통해 sorts 리스트에 추가하면 된다.
• 여기서 desc는 내림차순을 의미하고, asc는 오름차순을 의미한다.
• 코드를 적용한 후 로컬 서버를 다시 실행하면 아래와 같이 최근 작성된 질문 데이터 순서대로 화면에 표시된다.

최근순으로 데이터 조회하기

 

[질문 데이터 번호 역순 정렬]

• 질문 목록 화면(localhost:8090/question/list)를 살펴보면 몇 번 페이지를 클릭해도 게시물 번호가 1부터 10까지 고정되어있는 것을 확인할 수 있다.
• 이번에는 각 게시물에 맞게 번호가 제대로 표시되도록 수정해봅시다.
• 현재 수정하고 싶은 것은 질문 데이터의 번호를 역순으로 정렬하는 것이다. 예를 들어 지금 최신 게시물 순으로 리스트가  되어 300번 게시물이 300번이 되어야 맞는데, 지금은 무조건 1~10번까지 되어있다.  
• 아래 코드는 수정된 question_list.html 템플릿 중 페이징에 관련된 태그 부분이다.

<!--페이징 시작-->
<tbody>
    <tr th:each="question, loop : ${paging}">
        <td th:text="${paging.totalElements - (paging.number * paging.size) - loop.index}"></td>
        <td>
            <a th:href="@{|/question/detail/${question.id}|}" th:text="${question.subject}"></a>
            <span class="text-danger small ms-2"
                  th:if="${#lists.size(question.answerList) > 0}"
                  th:text="${#lists.size(question.answerList)}">
            </span>
        </td>
        <td th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></td>
    </tr>
</tbody>
<!--페이징 끝-->

• 기존에는 loop를 통해 번호가 들어가는 부분에 단순히 loop.count를 통해 1~10의 번호가 계속 반복되었다.
• th:text="${paging.totalElements - (paging.number * paging.size) - loop.index}" 로 수정하면 해당 문제가 해결된다.
• paging.getTotalElements는 전체 게시물 개수를 뜻하고, 현재의 경우 300개가 존재한다.
• paging.number는 현재 페이지 번호로 페이지를 변경할 때 마다 달라하고 0부터 시작한다.
• paging.size는 페이지 당 게시물 개수로 여기서는 게시물이 10개가 꽉 차있으면 10으로 계산된다.
• loop.index는 나열 인덱스로서 0부터 시작한다.
• 위와 같은 계산식을 코드에 적용하고 로컬 서버를 다시 실행하면 아래와 같이 게시물 번호가 정렬된다.

게시물 번호 정렬 완료

 

[답변 개수 표시하기]

• 질문 목록 화면(localhost:8090/question/list)에서 질문에 남긴 답변 개수를 표시할 수 있는 기능을 추가해봅시다.
• 이렇게 하나씩 사용자의 편의를 위한 서비스를 추가하는 것이 유지보수의 이유라고 생각하면 좋다.
• 해당 기능 추가를 위해 question_list.html 템플릿 중 페이징 관련된 태그에 코드를 추가한다.

<!--페이징 시작-->
<tbody>
    <tr th:each="question, loop : ${paging}">
        <td th:text="${paging.totalElements - (paging.number * paging.size) - loop.index}"></td>
        <td>
            <a th:href="@{|/question/detail/${question.id}|}" th:text="${question.subject}"></a>
            <span class="text-danger small ms-2"
                  th:if="${#lists.size(question.answerList) > 0}"
                  th:text="${#lists.size(question.answerList)}">
            </span>
        </td>
        <td th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></td>
    </tr>
</tbody>
<!--페이징 끝-->

• 추가 코드는 질문 데이터의 제목이 나오는 부분 아래에 작성한다.
• th:if="${#lists.size(question.answerList) > 0}" 조건문을 통해 답변이 있는지 먼저 체크한다.
• 만약 답변이 1개 이상이라면 th:text="${#lists.size(question.answerList)}" 를 통해 답변 개수를 표시한다.
• 여기서 #lists.size()는 '이터러블_객체'의 사이즈를 리턴하는 타임리프의 기능이다.
• 위 코드를 적용하고 다시 화면을 살펴보면 아래와 같이 답변 개수가 표시되는 것을 확인할 수 있다. 

답변 개수 표시하기