국비 지원 IT(웹앱개발) 취업반 강의 56일차 (Spring)

내가 이미 구현한 좋아요 / 좋아요 취소, 싫어요 / 싫어요 취소, 좋아요 상태에서 싫어요를 누를시 좋아요 취소되면서 싫어요활성, 싫어요 상태에서 좋아요 누를시 싫어요 취소되면서 좋아요활성을 만드는 시간을 가졌다. 그래서 나는 그냥 개인 프로젝트 화면 초안을 그려봤다. 그건 따로 포스팅.

그래서 간간히 강사님이 말씀 하실 때만 수업을 들었고 듣다보니까 내 코드에 문제점을 하나 발견했다.

AJAX를 사용해서 실시간 데이터변화를 적용시키긴 했다만, 사실 좋아요와 싫어요의 숫자가 새로고침을 해야지 숫자가 변해서 이를

location.reload(); // 새로고침하여 결과 반영

이걸 함수 안에 넣어서 꼼수를 썼었는데 이게 정답인 줄 알았다.

근데 이게 새로고침을 하는게 페이지 전체를 좋아요나 싫어요를 누름과 동시에 하는거라 만약 나중에 화면에 정보가 많아진다면 지금은 티가 안나도 깜빡이는게 티가 날것이다.

그래서 이걸 고쳐보려고 시간을 좀 썼다.

문제의 원인이 무엇이였냐?

오래 시간을 들여서 고치다가 발견한 문제점이 무엇이였냐면,

rd.setData2("goodReactionPoint", updatedArticle.getGoodReactionPoint());
rd.setData2("badReactionPoint", updatedArticle.getBadReactionPoint());

내가 전송해주는 데이터 자체에 문제가 있었다.

이게 사실 문제는 없긴하다. '새로고침을 한다면.' 하지만 개발 의도와 충돌하기 때문에 이를 고쳐줄 필요가 있었다.

프린트를 찍어도 데이터상으로는 문제가 없어 보여서 GPT한테 혹시 이게 rd로 묶는 과정에서 문제가 생기는게 아닐까? 라는 의문을 보냈더니 Map으로 객체회 해서 데이터를 전송해보라는 답을 얻었고 그대로 코드를 고쳐보았다.

아래가 고친코드.

    @RequestMapping("/article/doReaction")
    @ResponseBody
    public ResultData doReaction(HttpServletRequest req , Model model, int id, String relTypeCode, int relId, int newPoint) {
        Rq rq = (Rq) req.getAttribute("rq");
        int loginedMemberId = rq.getLoginedMemberId();
        model.addAttribute("loginedMemberId", loginedMemberId);
        relTypeCode = "article";

        int resultPoint = reactionPointService.toggleReactionPoint(rq.getLoginedMemberId(), relTypeCode, relId, newPoint);        
        reactionPointService.updateArticleReactionPoints();

        // 최신의 좋아요/싫어요 수를 가져옴
        Article updatedArticle = articleService.getForPrintArticle(loginedMemberId, id);

        String status = resultPoint > 0 ? "liked" : "unliked";
        ResultData rd = ResultData.from("S-1", "리액션기능 실행완료.", "status", status);
        rd.setData2("reactedArticleId", id);

        Map<String, Object> reactionPoints = new HashMap<>();
        reactionPoints.put("goodReactionPoint", updatedArticle.getGoodReactionPoint());
        reactionPoints.put("badReactionPoint", updatedArticle.getBadReactionPoint());

        rd.setData2("reactionPoints", reactionPoints);

        return rd;
    }

이렇게 해주니까 AJAX로 제때 데이터(좋아요 싫어요 카운트) 갱신이 완료된다.