[TIL]이노베이션 캠프 79일차

1. 개발 진행 상황

 

페이징처리하기

여태까지 했던 프로젝트들은 웹 개발이고, 웹에서 이용하기 편리한 형태로 구현했었다.

요즘에는 컴퓨터보다는 스마트폰을 이용해서 인터넷을 사용하는 경우가 더 많기 때문에 이번 프로젝트는 웹 개발이지만  스마트폰에서 이용하기 좋은 형태로 구현하는 중이다.

나는 백엔드 개발을 하니까, 기능 구현만 하면 되는데 스마트폰에서 보기 좋은형태로 구현한다고 뭐 다를게 있나 싶었는데

게시글 전체 조회, 검색 이런 부분에서 적용해야할 부분이 있었다.

 

사실 계속 해왔던 프로젝트들은 실제로 이용하지도 않기도하고, 기능 구현만 하면 됐기 때문에 실제로 운영했을때 문제에 대한 부분을 생각못한게 많다.(데이터 많아졌을 때 처리 속도(효율성), 이용자 많을 때 서버, 데이터가 변경됐을 때 적용 시점 등등)

 

그 중 하나가 페이징 처리이다. 계속 검색의 검색을 통해 배워 가는 중이라 페이징처리에 대한 부분을 본적은 많았지만 적용을 안했다.

프로젝트에서 실제로 데이터를 많이 넣지도 않고 시연에서 보여 줄 수 있을 만큼의 데이터만 넣었기 때문에... 페이지가 넘어갈 필요가 없었다.

 

근데 이번에는 스마트폰에서 사용하기 좋은 환경으로 개발을 하고있기도하고, 실제 이용할 수 있을 정도의 구현을 하고싶은 프로젝트이기 때문에 페이징 처리가 필요했다.

 

구글/다음/네이버 등에서 검색했을 때 페이지 번호를 눌러서 하는 방식이라면 컴퓨터에선 편리하겠지만, 모바일 환경에서는 불편하겠다 싶었고, 구글/다음/네이버도 내가 컴퓨터 웹으로 검색할 때랑 모바일로 검색할 때가 다르다는걸 깨달았다.

 

1) 기존 코드

   // 코스(게시글) 검색(제목, 내용, 카테고리 검색)
   //Controller
    @GetMapping("/api/course/search")
    public List<PostResponseDto> search(@RequestParam(value = "keyword") String keyword){
        return postService.searchPost(keyword);
    }
    
    
    // Service
    @Transactional
    public List<PostResponseDto> searchPost(String keyword){
        return postRepository.findAllSearch(keyword);
                .stream()
                .map(PostResponseDto::new)
                .collect(Collectors.toList());
    }
    
	
    // Repository interface
    @Query(value = "SELECT p FROM Post p WHERE p.title LIKE %:keyword% OR p.content LIKE %:keyword% OR p.weather LIKE %:keyword% OR p.region LIKE %:keyword% OR p.season LIKE %:keyword% OR p.who LIKE %:keyword%")
    List<Post> findAllSearch(String keyword);

2) 수정 코드

   // 코스(게시글) 검색(제목, 내용, 카테고리 검색)
   // Controller
   // PageRequest 구현체를 이용하여 페이지번호 0부터, 사이즈는 5로 설정
    @GetMapping("/api/course/search")
    public Slice<PostResponseDto> search(@RequestParam(value = "keyword") String keyword){
        PageRequest pageRequest = PageRequest.of(0, 5);
        return postService.searchPost(keyword, pageRequest);
    }
    
    
    // Service
    @Transactional
    public Slice<PostResponseDto> searchPost(String keyword, Pageable pageable){
        return postRepository.findAllSearch(keyword, pageable);
    }
    
    // Repository Interface
    @Query(value = "SELECT p FROM Post p WHERE p.title LIKE %:keyword% OR p.content LIKE %:keyword% OR p.weather LIKE %:keyword% OR p.region LIKE %:keyword% OR p.season LIKE %:keyword% OR p.who LIKE %:keyword%")
    Slice<PostResponseDto> findAllSearch(String keyword, Pageable pageable);

결과: 페이징 처리 후 포스트맨으로 검색 테스트 하면 content에 해당 내용이 조회되고 그 아래로 pageable 내용이 생성되어 나타남

    {
    "content": [... // 조회 내용
    ],
    "pageable": {
        "sort": { // 정렬 상태
            "unsorted": true,
            "sorted": false,
            "empty": true
        },
        "pageNumber": 0, // 페이지 번호(0부터 시작)
        "pageSize": 5, // 페이지 사이즈(한 페이지에서 나타내는 원소의 수)
        "offset": 0, // 해당 페이지에 첫 번째 원소의 수
        "paged": true,
        "unpaged": false
    },
    "numberOfElements": 5, // 실제 데이터 수
    "size": 5, // 페이지 당 나타낼 수 있는 사이즈(한 페이지에서 나타내는 원소의 수)
    "number": 0,// 현재 페이지 번호
    "sort": { // 정렬 상태
        "unsorted": true,
        "sorted": false,
        "empty": true
    },
    "first": true,// 첫번째 페이지 true or false
    "last": false, // 마지막 페이지 ture or false
    "empty": false // 리스트 비어있는지 확인
}

👉🏻 Slice를 선택한 이유

• Slice는 Page에서 카운트 쿼리에 많은 비용이 발생하는 경우에 사용
• Slice는 다음 Slice가 존재하는지 여부만 알기 때문에 전체 데이터의 셋의 크기가 큰 경우 Slice 사용이 성능 상 유리
• 무한스크롤에 적합

2. 개발 중 발생한 이슈와 해결

-

 

3. 새로 배운 것

1 ) pageable(인터페이스): 정렬, 페이지 설정 등에 관하여 JPA에서 제공하는 객체

2) PageRequest(구현체)를 이용해서 페이지 설정

3) 반환형: List, Slice, Page

 

4. 참고 레퍼런스

https://wonit.tistory.com/483

[배워보자 Spring Data JPA] JPA 에서 Pageable 을 이용한 페이징과 정렬

https://tecoble.techcourse.co.kr/post/2021-08-15-pageable/

Pageable을 이용한 Pagination을 처리하는 다양한 방법

https://velog.io/@do_ng_iill/Spring-Pagination

Spring Pagination으로 무한스크롤 구현

5. 오늘 한 일 / 회고

- 검색 결과 페이징 처리 완료

- 페이징하는 방법도 이 것 뿐만아니라 다른 방법이 더 있는것 같다. 뭐 하나 하다보면 공부해야할 것이 엄청나게 많구나 싶다

 

6. TO-DO LIST

- 검색 기능 보완 필요. 

- 카테고리 조회 부분 페이징 처리도 필요함(카테고리 구현이 다른 조회랑 좀 달라서 좀 더 공부해서 적용할 수 있을 듯 )