css 중앙 정렬 및 JPA를 사용한 페이징

오늘 게시글이나 버튼을 중앙에 배치하고 싶어서 여러 가지 찾아보게 되었다.

우선 버튼을 중앙에 배치하는 방법이다. 이 방법은 div 같은 태그 안의 요소들을 중앙에 배치할 때 유용하다.

style="justify-content:center; display:flex;

bootstrap을 사용한 중앙에 게시글 수정 요소를 나타낼 때 사용했던 방법이다.

<div class="row">
	<div class="col"></div>
	<div class="col-md-6"></div>
	<div class="col"></div>
</div>

위와 같이 html을 작성하면 부트스트랩이 중앙에 정렬을 원하는 요소를 정렬해준다.

 

이번에는 JPA 페이지 사용법을 정리하겠다.

 

Repository

 List<Article> findByCategory(String category, Pageable pageable);

Service

    @Transactional(readOnly = true)
    public List<ArticleListResponseDto> findByCategory(String category, Pageable pageable) {
        return articleRepository.findByCategory(category, pageable).stream()
                .map(ArticleListResponseDto::new)
                .collect(Collectors.toList());
    }

Controller

    @GetMapping("/majorBoard")
    public String majorBoard(Model model, @LoginUser SessionUser user, @AuthenticationPrincipal User user_s,
                            @PageableDefault(sort="id", direction=Sort.Direction.ASC) Pageable pageable)
    {
        List<ArticleListResponseDto> lst = articleService.findByCategory("major", pageable);

        return "article-select";
    }

기본적으로 위와 같이 Repository와 Service 그리고 Controller에 Pageable을 매개변수로 주고받으면 된다.

Controller에서 처음에 Pageable 객체를 받을 때는 @PageableDefault 어노테이션을 사용한다.

어떤 컬럼을 기준으로 정렬을 할지 정렬은 어떤 방식으로 할지 정할 수 있다. 

기본적으로 page 몇 개를 나타낼지 설정하지 않았다면 10개의 행만 나타낸다.