[TIL] 내일배움캠프 52일차 - 페이징

 

 

오늘의 학습 키워드📚

페이징

반드시 익혀야 하는 기본적인 기술이다. 어떤 것을 조회할 때 몇 개가 나올 수도 있지만 1000개가 나올 수도 있다. 혹은 그 이상...
이 모든 정보를 다 조회해서 표시할 필요는 없다. 이 때 사용되는 것이 Paging이다.

페이징을 사용하면 사용자가 원하는 만큼 조회할 수 있기 때문에 사용성이 좋아지고 서버 입장에서도 불필요한 리소스를 로드하지 않으므로 성능적으로 장점이 많다.

페이징을 사용하기 위해서는 기본적으로 필요한 정보들이 있다.

1. 조회할 페이지가 몇 페이지인가?
2. 한 페이지에 몇 개를 표시할 건가?
3. 오름차순인가 내림차순인가?
4. 기준 키워드는 무엇인가?

Spring에서 제공하는 Pageable 인터페이스를 사용해서 JPA Repository에 페이지 정보를 보내 페이징 된 값들을 받을 수 있다.

    @GetMapping("/todos/pages")
    public ResponseEntity<ResponseDto<Page<TodoResponseDto>>> getTodosPaging(
        @RequestParam int page,
        @RequestParam int size,
        @RequestParam boolean isAsc,
        @RequestParam String sortBy
    ) {

        Page<TodoResponseDto> responseDtoPage = todoService.getTodosPaging(page - 1, size, isAsc, sortBy);

        return ResponseEntity.ok().body(
            ResponseDto.<Page<TodoResponseDto>>builder()
                .httpCode(200)
                .data(responseDtoPage).build()
        );
    }

필요한 정보들을 받아 전체 할일 목록을 페이징 처리해 제공하는 API이다.

    public Page<TodoResponseDto> getTodosPaging(int page, int size, boolean isAsc, String sortBy) {

        // 페이징 처리
        Sort.Direction direction = isAsc ? Direction.ASC : Direction.DESC;
        Sort sort = Sort.by(direction, sortBy);
        Pageable pageable = PageRequest.of(page, size, sort);

        // 가져오기
        Page<Todo> todoPage = todoRepository.findAll(pageable);

        return todoPage.map(TodoResponseDto::new);
    }

Sort의 Direction을 통해 정렬 기준을 정하고 Sort 객체를 만들어 PageRequest라는 Pageable 구현체로 Pageable 객체를 만든다.
페이징 정보를 Repository에 보내 페이징 된 값을 가져온다.

{
    "httpCode": 200,
    "data": {
        "content": [
            {
                "userName": "abc123",
                "todoName": "제목입니다",
                "content": "asdfasdfasdfsadfasdf",
                "finished": false,
                "createdAt": "2024-03-11T20:27:26.944436",
                "modifiedAt": "2024-03-11T20:27:26.944436"
            },
            {
                "userName": "abc123",
                "todoName": "제목입니다",
                "content": "asdfasdfasdfsadfasdf",
                "finished": false,
                "createdAt": "2024-03-11T20:27:27.088439",
                "modifiedAt": "2024-03-11T20:27:27.088439"
            },
            {
                "userName": "abc123",
                "todoName": "제목입니다",
                "content": "asdfasdfasdfsadfasdf",
                "finished": false,
                "createdAt": "2024-03-11T20:27:27.336439",
                "modifiedAt": "2024-03-11T20:27:27.336439"
            },
            {
                "userName": "abc123",
                "todoName": "제목입니다",
                "content": "asdfasdfasdfsadfasdf",
                "finished": false,
                "createdAt": "2024-03-11T20:27:27.456439",
                "modifiedAt": "2024-03-11T20:27:27.456439"
            },
            {
                "userName": "abc123",
                "todoName": "제목입니다",
                "content": "asdfasdfasdfsadfasdf",
                "finished": false,
                "createdAt": "2024-03-11T20:27:27.577437",
                "modifiedAt": "2024-03-11T20:27:27.577437"
            }
        ],
        "pageable": {
            "pageNumber": 1,
            "pageSize": 5,
            "sort": {
                "empty": false,
                "sorted": true,
                "unsorted": false
            },
            "offset": 5,
            "paged": true,
            "unpaged": false
        },
        "totalElements": 10,
        "totalPages": 2,
        "last": true,
        "size": 5,
        "number": 1,
        "sort": {
            "empty": false,
            "sorted": true,
            "unsorted": false
        },
        "first": false,
        "numberOfElements": 5,
        "empty": false
    }
}

출력해 보면 이런 값들이 나오게 된다.
실제로는 10개가 있지만(totalElements) 사이즈를 5로 설정했기 때문에 총페이지가 2페이지로 구분되어 필요한 만큼 값을 출력할 수 있다.

---

오늘의 회고💬

해보지 않았던 기술들을 배우는 것은 언제나 어려운 것 같다.

 

내일의 계획📜

개인 과제 보완을 마무리 하고 추가적인 성능 부분 개선을 어떻게 할 수 있을까를 고민해야겠다.