spring boot 게시판 - 10 <JPA Pageable, thymeleaf>

2022.11.30 - [Java/spring 게시판] - spring boot 게시판 - 9 <게시물 수정, 삭제>

spring boot 게시판 - 9 <게시물 수정, 삭제>

게시판 관련 글을 올린 지 벌써 4개월이 다 되어간다..

나태한 내 모습에 화가 나면서도 퇴근 후 집에 돌아오면 아무것도 하기 싫음이 서로 싸우는데

시간이 이만큼 흐른지도 몰랐던 것 같다.

 

앞으로 이 다짐이 얼마나 오래 갈지는 모르겠지만 다시 열심히 달려봐야겠다...

---

✅ 페이지네이션

기존 게시물은 페이징 처리를 하지 않고 리스트를 전부 보여주는 형식이었다.

페이징 처리

이번 게시물에서는 JPA Pageable과 thymeleaf를 통하여 위와 같은 페이징 처리를 진행하려고 한다.

 

🟧 Controller

⏹️ GlobalController.java

/**
 * Home 화면
 * @return 홈 페이지
 */
@GetMapping("/")
public String Home(Model model, @PageableDefault(page = 0, size = 10, sort = "id", direction = Sort.Direction.DESC)Pageable pageable) {
    model.addAttribute("boardList", boardService.boardList(pageable));

    return "home";
}

여기서 중요한 것은 게시물 리스트를 가져올 때 인자로 Pageable을 넘긴다는 것이다.

 

@PageableDefault(page = 0, size = 10, sort = "id", direction = Sort.Direction.DESC)Pageable pageable

Pageable pageable 이렇게만 선언해도 상관없지만 디폴트값을 지정하기 위해 몇 가지 옵션을 넣어줬다.

 

🟧 Service

⏹️ BoardService.java

/**
 * 게시글 전체조회
 * @param pageable 페이징 처리
 * @return 게시글 목록 (페이징)
 */
Page<BoardResponseDTO> boardList(Pageable pageable);

 

⏹️ BoardServiceImpl.java

@Override
public Page<BoardResponseDTO> boardList(Pageable pageable) {
    Page<Board> boards = boardRepository.findAll(pageable);
    List<BoardResponseDTO> boardDTOs = new ArrayList<>();

    for (Board board : boards) {
        BoardResponseDTO result = BoardResponseDTO.builder()
                .board(board)
                .build();
        boardDTOs.add(result);
    }

    return new PageImpl<>(boardDTOs, pageable, boards.getTotalElements());
}

위와 같이 레포지토리에 별다른 설정을 할 것 없이

JPA 메서드에 인자로 pageable을 넣어준다면 자동으로 페이징 처리가 된 리스트를 전달해 준다.

 

🟧 View

이후 View단에서 전달받은 게시물 리스트를 확인해 보면

게시물 리스트

위 사진과 같이 직접 처리하지 않아도 페이징 처리에 관련된 내용들이 함께 전달되는 것을 볼 수 있다.

 

⏹️ home.html

<div th:if="${!boardList.isEmpty()}">
    <ul class="pagination"
        th:with="
            pageNumber = ${boardList.pageable.pageNumber},
            pageSize = ${boardList.pageable.pageSize},
            totalPages = ${boardList.totalPages},
            startPage = ${T(java.lang.Math).floor(pageNumber / pageSize) * pageSize + 1},
            tempEndPage = ${startPage + pageSize - 1},
            endPage = (${tempEndPage < totalPages ? tempEndPage : totalPages})">

        <li th:classappend="${boardList.first} ? 'disabled'" class="page-item">
            <a class="page-link" th:href="${boardList.first} ? '#' : @{/(page=${pageNumber - 1})}">
                <span aria-hidden="true">&lt;</span>
            </a>
        </li>

        <li th:each="page: ${#numbers.sequence(startPage, endPage)}" th:classappend="${page == pageNumber + 1} ? 'active'" class="page-item">
            <a th:text="${page}" class="page-link" th:href="@{/(page=${page - 1})}"></a>
        </li>

        <li th:classappend="${boardList.last} ? 'disabled'" class="page-item">
            <a class="page-link" th:href="${boardList.last} ? '#' : @{/(page=${pageNumber + 1})}" aria-label="Next">
                <span aria-hidden="true">&gt;</span>
            </a>
        </li>
    </ul>
</div>

이후 전달받은 데이터를 thymeleaf를 활용해 만들어주면 처음 보여줬던 화면이 만들어지게 된다.

---

✅ 끝

페이징처리를 하는데 1시간도 채 걸리지 않았는데 하려고 마음먹기가 4개월이나 걸렸다니

다시는 그러지 말아야지... 말아야지..

다음에는 게시물 검색 기능을 구현해 보도록 해야겠다.

 

https://github.com/Kimmingki/board

GitHub - Kimmingki/board: 강의만 듣다 때려치우지 말고 조금씩이라도 개발해보자...!!