🌟 Issue: 리액트 이슈 정리 (23-05-12)

[KKYHH]

✅ 게시글 Sort 를 사용해 작성일자 최신순으로 정렬

• 기존 코드

   @GetMapping(value = "/getallfeeds")
    public Map<String, List<FeedDto>> feedMain() {
        Map<String, List<FeedDto>> feeds = new HashMap<>();
        feeds.put("feeds", feedService.feedPage());
        return feeds;
    }

기존의 코드는 게시글 전체를 불러오는 기능이다
작성하게 되면 최신글이 위로 올라오지 않고 아래로 쌓여가게 되어 있어서 정렬을 하게 만들어준다
처음에는 서버와 클라이언트 둘 다 코드를 추가해서 적용이 되는줄 알았다


➡️ 서버 스프링부트

 @GetMapping(value = "/getallfeeds")
    public Map<String, List<FeedDto>> feedMain() {
        Map<String, List<FeedDto>> feeds = new HashMap<>();
        List<FeedDto> sortedFeeds = feedService.feedPage();

        // Sort the feeds by creation date in descending order
        sortedFeeds.sort(Comparator.comparing(FeedDto::getCreationDate).reversed());

        feeds.put("feeds", sortedFeeds);
        return feeds;
    }

• Java util 중 Comparator와 Date 기능을 사용

➡️ 클라이언트 리액트

useEffect(() => {
        axios({
            method: 'GET',
            url: "/api/feed/getallfeeds",
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then((res) => {
                console.log(res.data);

                let feedData = res.data.feeds;
                feedData.sort((a, b) => b.timestamp - a.timestamp);

                setFeeds(feedData);
            })
            .catch((err) => {
                console.log(err);
            })
    }, []);

• React Home.js 컴포넌트안의 axios에 feedData.sort((a, b) => b.timestamp - a.timestamp); 코드를 추가

이 방식에 맞춰 실행해보니 오류는 나지 않았지만 Home화면에 피드가 사라졌었다 원인을 모르겠어서 강사님께 질문을 해보니 서버측에서만 간단하게(?) 수정하는 방법이 있었다

☀︎서버 스프링부트 코드 수정

➡️ FeedService.java

public List<FeedDto> feedByPage(Pageable pageable) {
        List<Feed> feedList =  feedRepository.findAllBy(pageable); // 추후 페이징 처리(검색 갯수 제한) 필요
        List<FeedDto> feedDtoList = feedList.stream().map(FeedDto::new).toList();
        return feedDtoList;
    }

• FeedService에 feedByPage 메소드 추가

➡️ FeedAPIController.java

@GetMapping(value="/getallfeeds")
    public Map<String, List<FeedDto>> feedMain(
            @RequestParam(defaultValue = "0") int start,
            @RequestParam(defaultValue = "10") int size
    ) {
        Pageable pageable = PageRequest.of(start, size, Sort.by(Sort.Direction.DESC, "uploadTime"));
        Map<String, List<FeedDto>> feeds = new HashMap<>();
        feeds.put("feeds", feedService.feedByPage(pageable));
        return feeds;
    }

• @RequestParam start 와 size 를 추가
• Pageable 을 만들어서 PageRequest로 start size값을 주고 Sort로 정렬
• Sort.Direction으로 AESC 와 DESC 중 선택
• “uploadTime”은 작성일자가 있는 DB
• feedByPage 에 pageable을 불러온다(?)

이 수정으로 게시글을 작성할때 최신순으로 정렬하는걸 구현
추후에 start와 size로 화면에 보여질 게시물 갯수를 조절
start 1 에는 1-10 까지의 게시글이 2에는 11부터 20까지의 게시글이 들어가는것 같다

화면에 게시글 전체가 보이면 안되니 갯수를 정하고 하단에 내려가면서 불러오는 기능으로 연결해야겠다