S09L02 - 스프링 부트에서의 페이징 및 정렬 - 섹션 정리

html

Spring Boot에서 페이지네이션 및 정렬 구현: 종합 가이드
목차

소개 ………………………………………………………………... 1
페이지네이션 및 정렬 이해 …………………… 2

페이지네이션이란? ………………………………………………… 2
정렬이란? ………………………………………………………… 3


Spring Boot에서 페이지네이션 설정 ………………… 4

요청 매개변수 구성 ………………………… 4
컨트롤러 로직 구현 ………………… 6


페이지네이션과 정렬 통합 ………………………… 9

정렬 매개변수 파싱 및 적용 ……………… 9


페이지네이션 링크 생성 …………………………………… 12

동적 링크 생성 …………………………………………… 12
활성 상태 처리 ………………………………………… 14


Bootstrap으로 뷰 향상 ………………………… 17

Bootstrap 페이지네이션 통합 …………………… 17


결론 …………………………………………………………………....... 20


소개
웹 개발 분야에서 대용량 데이터를 효율적으로 관리하는 것은 원활한 사용자 경험을 제공하는 데 매우 중요합니다. 이를 달성하기 위해 사용되는 두 가지 기본 기술은 pagination과 sorting입니다. 페이지네이션은 방대한 데이터 목록을 관리 가능한 단위로 분할하고, 정렬은 특정 기준에 따라 데이터를 조직하여 접근성과 사용성을 향상시킵니다.
이 전자책은 Spring Boot 애플리케이션 내에서 pagination과 sorting을 구현하는 방법을 다룹니다. 요청 매개변수 구성, 컨트롤러 로직 작성, 정렬 메커니즘 통합, 페이지네이션 링크 동적 생성 등을 탐구할 것입니다. 프론트엔드 향상을 위해 Bootstrap을 활용함으로써 페이지네이션 인터페이스가 기능적이고 미적으로도 우수하게 보장됩니다.
핵심 포인트

Pagination은 데이터를 개별 페이지로 분할하여 로드 시간을 개선하고 사용자 네비게이션을 향상시킵니다.
Sorting은 지정된 필드를 기준으로 데이터를 정렬하여 데이터 검색 및 분석을 용이하게 합니다.
Spring Boot에서 이러한 기능을 구현하려면 요청 매개변수, 컨트롤러 메서드 및 프론트엔드 통합을 구성해야 합니다.
Bootstrap을 사용하면 페이지네이션 링크의 시각적 표현을 향상시킬 수 있습니다.

장단점


기능
장점
단점


Pagination
- 성능 향상
- 사용자 경험 개선
- 구현 복잡성 추가


Sorting
- 데이터 분석 용이
- 데이터 접근성 향상
- 쿼리 로직 복잡화 가능


언제 어디서 사용할까

Pagination은 블로그, 전자상거래 사이트, 관리자 대시보드 등 대용량 데이터를 표시하는 애플리케이션에 이상적입니다.
Sorting은 사용자가 날짜, 관련성, 이름 또는 기타 관련 필드별로 데이터를 정렬해야 할 때 필수적입니다.


페이지네이션 및 정렬 이해
페이지네이션이란?
Pagination은 콘텐츠를 개별 페이지로 분할하는 과정으로, 대량의 데이터를 탐색하기 쉽게 만듭니다. 모든 레코드를 한 번에 로드하는 대신, 일반적으로 페이지당 고정된 수의 레코드를 로드하여 성능과 사용자 경험을 모두 향상시킵니다.
페이지네이션의 이점

로딩 시간 개선: 한 번에 로드되는 데이터 양을 줄입니다.
사용자 경험 향상: 과도한 정보로 사용자를 압도하지 않습니다.
효율적인 리소스 관리: 서버 및 클라이언트 측 리소스 활용을 최적화합니다.

정렬이란?
Sorting은 알파벳순, 날짜 또는 관련성과 같은 특정 기준에 따라 데이터를 조직하는 것을 포함합니다. 이는 사용자가 구조적이고 의미 있는 방식으로 데이터를 볼 수 있게 하여 원하는 정보에 더 빠르게 접근할 수 있도록 합니다.
정렬의 이점

데이터 접근성: 특정 레코드를 더 쉽게 찾을 수 있습니다.
향상된 분석: 데이터를 효과적으로 비교하고 분석하는 데 도움을 줍니다.
사용자 편의성: 데이터가 표시되고 상호작용되는 방식을 유연하게 제공합니다.


Spring Boot에서 페이지네이션 설정
Spring Boot 애플리케이션에서 pagination을 구현하려면 페이지네이션 입력을 수락하도록 요청 매개변수를 구성하고, 이러한 입력을 처리하도록 컨트롤러를 조정하며, 데이터베이스와 인터페이스하여 적절한 데이터 하위 집합을 가져와야 합니다.
요청 매개변수 구성
페이지네이션을 활성화하려면 offset, perPage, page와 같은 매개변수를 애플리케이션에서 수락해야 합니다. 이러한 매개변수는 검색 및 표시할 데이터 하위 집합을 결정합니다.




		
		
			
			
Java
			
			// 필요한 패키지 가져오기
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;

// 컨트롤러 메서드
@GetMapping("/posts")
public String getPosts(
    @RequestParam(value = "soughtBy", required = false, defaultValue = "createdAt") String soughtBy,
    @RequestParam(value = "perPage", required = false, defaultValue = "5") int perPage,
    @RequestParam(value = "page", required = false, defaultValue = "1") int page,
    Model model) {
    
    // 컨트롤러 로직이 여기에서 구현됩니다
}
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
				
						// 필요한 패키지 가져오기
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
 
// 컨트롤러 메서드
@GetMapping("/posts")
public String getPosts(
    @RequestParam(value = "soughtBy", required = false, defaultValue = "createdAt") String soughtBy,
    @RequestParam(value = "perPage", required = false, defaultValue = "5") int perPage,
    @RequestParam(value = "page", required = false, defaultValue = "1") int page,
    Model model) {
    
    // 컨트롤러 로직이 여기에서 구현됩니다
}
					
				
			
		


설명:

@RequestParam: HTTP 요청 매개변수를 메서드 매개변수에 바인딩합니다.
soughtBy: 데이터가 정렬되는 필드를 결정합니다. 선택 사항이며 기본값은 createdAt입니다.
perPage: 페이지당 레코드 수를 지정합니다. 선택 사항이며 기본값은 5입니다.
page: 현재 페이지 번호를 나타냅니다. 선택 사항이며 기본값은 1입니다.

컨트롤러 로직 구현
컨트롤러는 페이지네이션 매개변수를 처리하고, 원하는 데이터 하위 집합을 가져오기 위해 서비스 계층과 상호 작용하며, 뷰를 위한 모델 속성을 준비하는 역할을 합니다.




		
		
			
			
Java
			
			import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Sort;

@GetMapping("/posts")
public String getPosts(
    @RequestParam(value = "soughtBy", required = false, defaultValue = "createdAt") String soughtBy,
    @RequestParam(value = "perPage", required = false, defaultValue = "5") int perPage,
    @RequestParam(value = "page", required = false, defaultValue = "1") int page,
    Model model) {
    
    // 0부터 시작하는 인덱스를 위한 페이지 번호 조정
    int currentPage = page - 1;
    
    // PageRequest 객체 생성
    PageRequest pageRequest = PageRequest.of(currentPage, perPage, Sort.by(soughtBy).ascending());
    
    // 페이지네이션된 게시물 가져오기
    Page<Post> postPage = postService.findAll(pageRequest);
    
    // 전체 페이지 수
    int totalPages = postPage.getTotalPages();
    
    // 페이지 번호 생성
    List<Integer> pages = createPageRange(0, totalPages - 1);
    
    // 페이지네이션 링크 생성
    List<String> links = generatePaginationLinks(pages, perPage, soughtBy, currentPage);
    
    // 모델에 속성 추가
    model.addAttribute("links", links);
    model.addAttribute("postsOnPage", postPage.getContent());
    
    return "home";
}

// 페이지 범위를 생성하는 도우미 메서드
private List<Integer> createPageRange(int start, int end) {
    List<Integer> range = new ArrayList<>();
    for (int i = start; i <= end; i++) {
        range.add(i);
    }
    return range;
}

// 페이지네이션 링크를 생성하는 도우미 메서드
private List<String> generatePaginationLinks(List<Integer> pages, int perPage, String sortBy, int currentPage) {
    List<String> links = new ArrayList<>();
    for (Integer link : pages) {
        String active = "";
        if (link == currentPage) {
            active = "active";
        }
        String url = "/posts?perPage=" + perPage + "&page=" + (link + 1) + "&soughtBy=" + sortBy;
        String htmlLink = "<li class='page-item " + active + "'><a class='page-link' href='" + url + "'>" + (link + 1) + "</a></li>";
        links.add(htmlLink);
    }
    return links;
}
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
				
						import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Sort;
 
@GetMapping("/posts")
public String getPosts(
    @RequestParam(value = "soughtBy", required = false, defaultValue = "createdAt") String soughtBy,
    @RequestParam(value = "perPage", required = false, defaultValue = "5") int perPage,
    @RequestParam(value = "page", required = false, defaultValue = "1") int page,
    Model model) {
    
    // 0부터 시작하는 인덱스를 위한 페이지 번호 조정
    int currentPage = page - 1;
    
    // PageRequest 객체 생성
    PageRequest pageRequest = PageRequest.of(currentPage, perPage, Sort.by(soughtBy).ascending());
    
    // 페이지네이션된 게시물 가져오기
    Page<Post> postPage = postService.findAll(pageRequest);
    
    // 전체 페이지 수
    int totalPages = postPage.getTotalPages();
    
    // 페이지 번호 생성
    List<Integer> pages = createPageRange(0, totalPages - 1);
    
    // 페이지네이션 링크 생성
    List<String> links = generatePaginationLinks(pages, perPage, soughtBy, currentPage);
    
    // 모델에 속성 추가
    model.addAttribute("links", links);
    model.addAttribute("postsOnPage", postPage.getContent());
    
    return "home";
}
 
// 페이지 범위를 생성하는 도우미 메서드
private List<Integer> createPageRange(int start, int end) {
    List<Integer> range = new ArrayList<>();
    for (int i = start; i <= end; i++) {
        range.add(i);
    }
    return range;
}
 
// 페이지네이션 링크를 생성하는 도우미 메서드
private List<String> generatePaginationLinks(List<Integer> pages, int perPage, String sortBy, int currentPage) {
    List<String> links = new ArrayList<>();
    for (Integer link : pages) {
        String active = "";
        if (link == currentPage) {
            active = "active";
        }
        String url = "/posts?perPage=" + perPage + "&page=" + (link + 1) + "&soughtBy=" + sortBy;
        String htmlLink = "<li class='page-item " + active + "'><a class='page-link' href='" + url + "'>" + (link + 1) + "</a></li>";
        links.add(htmlLink);
    }
    return links;
}
					
				
			
		


설명:

PageRequest: 페이지 번호, 크기 및 정렬을 포함한 페이지네이션 정보를 구성합니다.
postService.findAll(pageRequest): 페이지네이션되고 정렬된 게시물 목록을 가져옵니다.
createPageRange: 전체 페이지 수에 따라 페이지 번호 목록을 생성합니다.
generatePaginationLinks: 각 페이지에 대한 HTML 링크를 생성하고 현재 페이지를 활성 상태로 표시합니다.
모델 속성:

links: 페이지네이션 링크에 대한 HTML 스니펫을 포함합니다.
postsOnPage: 현재 페이지의 게시물 목록을 보유합니다.



페이지네이션과 정렬 통합
Sorting과 pagination을 결합하면 사용자가 선호하는 순서로 데이터 하위 집합을 볼 수 있어 데이터 검색이 향상됩니다. 이 통합에는 정렬 매개변수 파싱 및 데이터 검색 중 적용이 포함됩니다.
정렬 매개변수 파싱 및 적용
정렬을 구현하기 위해 컨트롤러를 수정하여 soughtBy 매개변수를 수락하고, 이를 기반으로 데이터를 정렬할 필드를 결정합니다.




		
		
			
			
Java
			
			// 업데이트된 컨트롤러 메서드
@GetMapping("/posts")
public String getPosts(
    @RequestParam(value = "soughtBy", required = false, defaultValue = "createdAt") String soughtBy,
    @RequestParam(value = "perPage", required = false, defaultValue = "5") int perPage,
    @RequestParam(value = "page", required = false, defaultValue = "1") int page,
    Model model) {
    
    int currentPage = page - 1;
    
    // soughtBy 매개변수를 기반으로 정렬 적용
    PageRequest pageRequest = PageRequest.of(currentPage, perPage, Sort.by(soughtBy).ascending());
    
    Page<Post> postPage = postService.findAll(pageRequest);
    
    int totalPages = postPage.getTotalPages();
    List<Integer> pages = createPageRange(0, totalPages - 1);
    List<String> links = generatePaginationLinks(pages, perPage, soughtBy, currentPage);
    
    model.addAttribute("links", links);
    model.addAttribute("postsOnPage", postPage.getContent());
    
    return "home";
}
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
				
						// 업데이트된 컨트롤러 메서드
@GetMapping("/posts")
public String getPosts(
    @RequestParam(value = "soughtBy", required = false, defaultValue = "createdAt") String soughtBy,
    @RequestParam(value = "perPage", required = false, defaultValue = "5") int perPage,
    @RequestParam(value = "page", required = false, defaultValue = "1") int page,
    Model model) {
    
    int currentPage = page - 1;
    
    // soughtBy 매개변수를 기반으로 정렬 적용
    PageRequest pageRequest = PageRequest.of(currentPage, perPage, Sort.by(soughtBy).ascending());
    
    Page<Post> postPage = postService.findAll(pageRequest);
    
    int totalPages = postPage.getTotalPages();
    List<Integer> pages = createPageRange(0, totalPages - 1);
    List<String> links = generatePaginationLinks(pages, perPage, soughtBy, currentPage);
    
    model.addAttribute("links", links);
    model.addAttribute("postsOnPage", postPage.getContent());
    
    return "home";
}
					
				
			
		


설명:

soughtBy 매개변수: 데이터를 정렬하는 데 사용되는 필드를 결정합니다 (예: createdAt, title 등).
Sort.by(soughtBy).ascending(): 지정된 필드를 기준으로 오름차순 정렬을 적용합니다.

옵션 매개변수 처리
soughtBy 매개변수는 옵션입니다. 제공되지 않은 경우 기본값은 createdAt이 되어 데이터가 항상 미리 정의된 필드를 기준으로 정렬되도록 합니다.




		
		
			
			
Java
			
			@RequestParam(value = "soughtBy", required = false, defaultValue = "createdAt") String soughtBy
			
				
					
				
					1
				
						@RequestParam(value = "soughtBy", required = false, defaultValue = "createdAt") String soughtBy
					
				
			
		


설명:

required = false: 매개변수를 옵션으로 만듭니다.
defaultValue = "createdAt": soughtBy가 제공되지 않으면 기본 정렬 필드를 설정합니다.


페이지네이션 링크 생성
페이지네이션 링크를 동적으로 생성하면 사용자가 다양한 페이지를 원활하게 탐색할 수 있습니다. 이 섹션에서는 현재 페이지네이션 상태를 기반으로 이러한 링크를 생성하는 방법을 다룹니다.
동적 링크 생성
페이지네이션 링크는 전체 페이지 수와 현재 페이지를 기준으로 생성됩니다. 각 링크는 적용된 정렬 및 페이지네이션 매개변수와 함께 해당 페이지로 이동합니다.




		
		
			
			
Java
			
			private List<String> generatePaginationLinks(List<Integer> pages, int perPage, String sortBy, int currentPage) {
    List<String> links = new ArrayList<>();
    for (Integer link : pages) {
        String active = "";
        if (link == currentPage) {
            active = "active";
        }
        String url = "/posts?perPage=" + perPage + "&page=" + (link + 1) + "&soughtBy=" + sortBy;
        String htmlLink = "<li class='page-item " + active + "'><a class='page-link' href='" + url + "'>" + (link + 1) + "</a></li>";
        links.add(htmlLink);
    }
    return links;
}
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
				
						private List<String> generatePaginationLinks(List<Integer> pages, int perPage, String sortBy, int currentPage) {
    List<String> links = new ArrayList<>();
    for (Integer link : pages) {
        String active = "";
        if (link == currentPage) {
            active = "active";
        }
        String url = "/posts?perPage=" + perPage + "&page=" + (link + 1) + "&soughtBy=" + sortBy;
        String htmlLink = "<li class='page-item " + active + "'><a class='page-link' href='" + url + "'>" + (link + 1) + "</a></li>";
        links.add(htmlLink);
    }
    return links;
}
					
				
			
		


설명:

페이지 순회: 각 페이지 번호를 반복합니다.
Active 클래스: 현재 페이지 링크에 active 클래스를 추가하여 시각적으로 구분합니다.
URL 구성: perPage, page, soughtBy에 대한 쿼리 매개변수로 URL을 빌드합니다.
HTML 링크: 각 페이지네이션 링크에 대한 HTML 스니펫을 생성합니다.

활성 상태 처리
활성 페이지를 강조 표시하여 현재 페이지의 문맥을 사용자에게 나타냅니다.




		
		
			
			
Java
			
			if (link == currentPage) {
    active = "active";
}
			
				
					
				
					1
2
3
				
						if (link == currentPage) {
    active = "active";
}
					
				
			
		


설명:

조건: 반복문의 현재 링크가 활성 페이지와 일치하는지 확인합니다.
Active 클래스: 현재 페이지 링크를 다르게 스타일링하기 위해 active 클래스를 할당합니다.


Bootstrap으로 뷰 향상
Bootstrap을 프론트엔드에 통합하면 페이지네이션 인터페이스가 반응형이고 시각적으로 매력적으로 보장됩니다. 이 섹션에서는 Bootstrap의 페이지네이션 컴포넌트를 뷰에 통합하는 방법을 설명합니다.
Bootstrap 페이지네이션 통합
Bootstrap은 페이지네이션 링크를 효과적으로 스타일링하는 데 사용할 수 있는 미리 정의된 클래스를 제공합니다.




		
		
			
			
Java
			
			<!-- home.html의 페이지네이션 섹션 -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <th:block th:if="${links != null}">
      <th:block th:each="link : ${links}">
        <th:block th:utext="${link}"></th:block>
      </th:block>
    </th:block>
  </ul>
</nav>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
				
						<!-- home.html의 페이지네이션 섹션 -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <th:block th:if="${links != null}">
      <th:block th:each="link : ${links}">
        <th:block th:utext="${link}"></th:block>
      </th:block>
    </th:block>
  </ul>
</nav>
					
				
			
		


설명:

네비게이션 요소 (<nav>): 페이지네이션 영역의 시맨틱 구조를 정의합니다.
정렬 목록 (<ul>): Bootstrap의 pagination 클래스를 사용하여 스타일링합니다.
Spring Thymeleaf 통합:

th:if: 페이지네이션 링크가 존재하는지 확인합니다.
th:each: links 모델 속성의 각 링크를 반복합니다.
th:utext: 각 링크의 unescaped HTML을 삽입하여 HTML 구조를 유지합니다.


활성 링크 스타일링
Bootstrap의 클래스를 사용하여 활성 페이지네이션 링크를 시각적으로 구분하여 현재 페이지를 나타냅니다.




		
		
			
			
Java
			
			&lt;li class="page-item active"&gt;
  &lt;a class="page-link" href="#"&gt;1&lt;/a&gt;
&lt;/li&gt;
			
				
					
				
					1
2
3
				
						&lt;li class="page-item active"&gt;
  &lt;a class="page-link" href="#"&gt;1&lt;/a&gt;
&lt;/li&gt;
					
				
			
		


설명:

page-item active: Bootstrap의 페이지네이션 항목 클래스와 active 클래스를 결합하여 강조 표시합니다.
page-link: Bootstrap의 페이지네이션 링크 스타일에 따라 링크를 스타일링합니다.


결론
Spring Boot 애플리케이션에서 pagination과 sorting을 구현하면 데이터 관리와 사용자 경험이 크게 향상됩니다. 요청 매개변수를 구성하고, 컨트롤러 로직을 조정하며, 프론트엔드 프레젠테이션을 위해 Bootstrap을 통합함으로써 개발자는 대용량 데이터를 효율적으로 처리하고 사용자에게 직관적인 네비게이션을 제공할 수 있습니다.
핵심 요점

Pagination은 콘텐츠를 관리 가능한 페이지로 분할하여 데이터 로딩을 최적화하고 성능을 개선합니다.
Sorting은 지정된 기준에 따라 데이터를 조직하여 접근성과 분석을 도와줍니다.
Spring Boot의 PageRequest와 Sort 클래스는 pagination과 sorting의 원활한 통합을 용이하게 합니다.
Bootstrap의 스타일링과 결합된 페이지네이션 링크의 동적 생성은 반응형이고 사용자 친화적인 인터페이스를 구현합니다.

향후 개선 사항

동적 정렬: 사용자가 오름차순과 내림차순을 전환할 수 있도록 허용합니다.
필터 통합: 더 정교한 데이터 검색을 위해 pagination과 sorting을 데이터 필터링과 결합합니다.
비동기 로딩: 전체 페이지 리로드 없이 원활한 네비게이션을 위해 AJAX를 구현합니다.


SEO 최적화 키워드: Spring Boot pagination, Spring Boot sorting, pagination in Spring Boot, sorting in Spring Boot, Spring Boot PageRequest, Spring Boot Sort, Bootstrap pagination, Java Spring Boot tutorials, implementing pagination Spring Boot, data sorting Spring Boot, enhancing user experience Spring Boot, Spring Boot controller pagination, dynamic pagination links Spring Boot
기능	장점	단점
Pagination	- 성능 향상 - 사용자 경험 개선	- 구현 복잡성 추가
Sorting	- 데이터 분석 용이 - 데이터 접근성 향상	- 쿼리 로직 복잡화 가능