$$config title: [SpringBoot] Sbb프로젝트 - 페이징 기능 추가 keywords: - SpringBoot - paging - ... $$ # 단계 0. 페이징 기능 극대화를 위해 테스트 데이터 대량 생성 : TDD 처럼 `@Test` 어노테이션을 사용하고 테스트 데이터 생성하기 (/main폴더 와 같이 /test폴더에 SbbApplicationTest.java 파일 있음.) >SbbApplicationTest.java ```java class SbbApplicationTests { @Autowired private QuestionService questionService; @Test void testJpa() { for (int i = 1; i <= 300; i++) { String subject = String.format("테스트 데이터입니다:[%03d]", i); String content = "내용없음"; this.questionService.create(subject, content); } } } ``` ⬆️ 실행 순서 : `void testJpa() {` 옆에 있는 Run을 눌러서 실행 후 완료된 후 SbbApplication으로 Run하기 ? # 페이징 구현을 위한 Jpa 관련 라이브러리 (JpaRepository) - org.springframework.data.domain.Page - org.springframework.data.domain.PageRequest - porg.springframework.data.domain.Pageable # 단계 1. 페이징 구현하기 - Question리포지터리에 findAll 메서드 추가(오버라이딩)하기 메서드 : `Page findAll(Pageable pageable);` ```java import org.springframework.data.domain.Page; import org.springframework.data.domain.Pageable; ... public interface QuestionRepository extends JpaRepository { Page findAll(Pageable pageable); } ``` - Question서비스 에서 페이징 기능 구현하기 : 10페이지씩 보기 + 역순(오래된게 뒤로) 배치 : 리스트 모두를 가져오는 getList 메서드()를 변경하기 ```java import org.springframework.data.domain.Page; import org.springframework.data.domain.PageRequest; import org.springframework.data.domain.Pageable; import org.springframework.data.domain.Sort; ... import java.util.ArrayList; ... public class QuestionService { ... public Page getList(int page) { List sorts = new ArrayList<>(); sorts.add(Sort.Order.desc("createDate")); Pageable pageable = PageRequest.of(page, 10, Sort.by(sorts)); return this.questionRepository.findAll(pageable); } ... ``` ⬆️ 코드 설명 | 코드 & 기능 | 설명 | |--|--| | getList(int page) 메서드 | 정수 타입의 페이지번호를 입력받아 해당 페이지의 질문 목록을 리턴하는 메서드 | | List sorts | 역순 정렬할 리스트 타입의 sorts ArrayList | | sorts.add(Sort.Order.desc("createDate")); | createDate 의 역순(desc)으로 정렬 | | PageRequest.of(page, 10, Sort.by(sorts)) | 조회할 페이지(page) 번호와 한번에 보여줄 게시물 개수(10)을 역순으로 정렬해서 Pageable 객체에 저장 | | return this.questionRepository.findAll(pageable); | pageable 객체에 해당페이지 데이터만 저장되어 있고 이를 findAll로 리포지터리에서 찾아서 리턴 | # 단계 2. 페이징 구현한 메서드인 getList의 입출력 구조(매개변수 추가)가 변경됨에 따른 Question 컨트롤러 수정 ```java //추가됨에 따라 자동으로 추가되는 imports들 import org.springframework.web.bind.annotation.RequestParam; import org.springframework.data.domain.Page; ... @RequestMapping("/list") public String list(Model model, @RequestParam(value="page", defaultValue="0") int page) { Page paging = this.questionService.getList(page); model.addAttribute("paging", paging); return "question_list"; } ``` ⬆️ 코드 설명 | 코드 & 기능 | 설명 | |--|--| | @RequestParam( | `http://localhost:8080/question/list?page=0` 같이 page값을 받아오기 위한 RequestParam 어노테이션 | | value="page", defaultValue="0") int page | RequestParam의 속성 -> 받아올 값(value)로 "page", page가 Param에 전달되지 않은 경우 default 값 "0" | | Page paging | 해당 페이지별 질문 리스트들을 가져오기 위한 `Page` 객체인 paging 변수 | | this.questionService.getList(page) | Question서비스의 수정된 getList 메서드를 활용하여 데이터를 paging에 전달함 | | model.addAttribute("paging", paging); | paging 변수를 model로 전달하여 데이터를 View로 전달하기 | # 단계 3. model로 전달하려는 객체 이름이 달라짐에 따른 question_list.html 수정하기 : "questionList" -> "paging" ```html ``` # 단계 4. question_list.html 템플릿에 페이지 이동 기능 (페이지 관리 처리) : " 이전 " 과 " 다음 " 링크를 통해서 페이지 이동 처리 (테이블 밑에) ```html

``` ⬆️ 코드 설명 > `th:classappend="조건식 ? 클래스값"` 은 참이면 클래스값을 class 속성에 추가하는 형식 | 코드 | 페이징 기능 | |--|--| | `th:classappend="${!paging.hasPrevious} ? 'disabled'"` | 이전 페이지가 없으면 비활성화 | | `th:classappend="${!paging.hasNext} ? 'disabled'"` | 다음 페이지가 없으면 비활성화 | | `th:href="@{ ~ }"` | 이전 페이지 링크 | | `th:href="@{ ~ }"` | 다음 페이지 링크 | | `th:each="page: ${#numbers.sequence(0, paging.totalPages-1)}"` | 페이지 리스트 루프 | | `th:classappend="${page == paging.number} ? 'active'"` | 현재 페이지와 같으면 active 적용 | | `#numbers.sequence(시작, 끝)` | 시작 번호부터 끝 번호까지의 루프를 만들어 내는 타임리프의 유틸리티 | | 클래스값 : `pagination`, `page-item`, `page-link` | 페이지 리스트를 보기 좋게 표시하기 위해 부트스트랩의 pagination 컴포넌트임. (이를 이용) | th 문법 중 {} 안의 텍스트에서 변수와 텍스트를 동시에 쓰기 위해 필요한 것 : ``` || ``` # 모든 페이지 항목이 보이지 않도록 question_list.html 수정하기 > 모든 페이지 0~끝까지 나오는 것 -> 5개만 먼저 보이게 ![페이징 수정](https://to2.kr/dS3) ```html