무한 스크롤 구현

임호중·2023년 7월 31일
@GetMapping("/ummScroll/{size}")
    public List<UmmResponseDto> ummScroll(@PathVariable int size) {
        //현재 페이지  * 보여주는 게시물 개수
        return ummService.getUmmScroll(size);
    }

쉽게 생각해서 1페이지에 3개의 개시물을 받아올때
페이지는 고정이고 게시물의 갯수만 늘어난다 생각하여
size만 받았다.

 public List<UmmResponseDto> getUmmScroll(int size) {
        PageRequest pageRequest = PageRequest.of(0, size);
        Page<Umm> ummPage = ummRepository.findAll(pageRequest);
        List<Umm> ummList = ummPage.getContent();
        return ummList.stream().map(UmmResponseDto::new).toList();
    }

전체 게시물을 전부 받아올 예정이므로 pagerequest 구현체를 사용해여 size를 전달받아 page를 만들어 list로 변환한뒤에 반환하여 주었다.

일단 결론

실패다.,.,.
3개의 게시물
3개의 게시물 + 3개의 게시물
+++++
마치 2중 for문의 *그리기가 되었다 ^^..
페이지 전달방식이 잘못된것 같으니 다시 수정해야될듯...

원인

fetch(`/ummScroll/${pageSize * currentPage}`)

@GetMapping("/ummScroll/{size}")

이부분이 문제였던 것같다.
음 딱봐도 이질감이 든다.
controller에서 size만 전달받고 있는데
js서 size*page 합의 값을 전달해주고있으니..
재대로 데이터가 전달받아와질리 없다.

개선

fetch(`/ummScroll/${pageSize}/${currentPage}`)

@GetMapping("/ummScroll/{size}/{page}")
public List<UmmResponseDto> getUmmScroll(int size, int page) {
        PageRequest pageRequest = PageRequest.of(page, size);
        Page<Umm> ummPage = ummRepository.findAll(pageRequest);
        List<Umm> ummList = ummPage.getContent();
        return ummList.stream().map(UmmResponseDto::new).toList();
    }

지인짜 간단하지만 페이지 구현 완료!

profile
안녕하세요. 백엔드 개발자되려구요

0개의 댓글