[Spring] - 좋아요 기능 구현

🛠️ 개발 환경

🎨 IDE : Intellij Ultimate

🍃 Spring : Spring Boot 2.7.x + Spring Security

🖥️ View : Thymeleaf

🛠️ Java : Amazon corretto 11

Ajax란?

Ajax란, Asynchronous JavaScript and XML의 약자이다.
우리는 보통 이 기능을 JS를 이용해 서버와 비동기적으로 데이터를 주고 받는데 사용한다.

식당을 예시로 들어보자!

1. 손님이 밥을 먹기 위해 식당에 들어왔다.
2. 손님은 홀 매니저에게 제육 볶음을 주문했다.
3. 홀 매니저는 주방장에게 제육 볶음 주문을 알린다.
4. 주방장이 뚝딱 만들어서 홀 매니저에게 전달한다.
5. 홀 매니저가 손님에게 전달한다.

여기서 손님을 사용자, 홀 매니저를 서버, 주방장을 DB라고 생각하면 된다!
즉, JS를 이용해 서버(Spring)로 요청을 보내고, 원하는 값을 반환해주면 되는 것이다.

HTML

HTML 코드는 단순하다. 로그인하지 않은 유저가 좋아요 버튼을 누르지 못하도록 구성하였다.
만약 버튼을 누를 경우 JS의 modifyPostLike 함수를 호출하도록 하였고, 타임리프 리터럴을 이용해 현재 게시글의 번호를 넘겨주었다.
이 외의 부분은 가장 자바 코드를 보면 이해가 될 것이다.

<!-- 로그인 된 사용자만 버튼을 클릭할 수 있도록 구성 -->
<th:block sec:authorize="isAuthenticated()">
  <div class="post-meta" id="post-ajax-form">
    <!-- 해당 버튼을 클릭할 경우 현재 게시글의 번호를 JS의 addPostLike.modifyPostLike 함수로 넘겨준다. -->
    <button class="btn" id="post-react-btn" th:onclick="|addPostLike.modifyPostLike(${post.getId()})|">
      <!-- likeFlag가 존재하지 않을 경우 좋아요를 누를 수 있다. -->
      <th:block th:if="${!likeFlag}">
        <i class="icofont-thumbs-up"></i>
        <span class="mx-2">좋아요</span>
      </th:block>
      <!-- likeFlag가 존재할 경우 좋아요를 취소할 수 있다. -->
      <th:block th:if="${likeFlag}">
        <i class="icofont-thumbs-up text-primary"></i>
        <span class="mx-2 text-primary">좋아요 취소</span>
      </th:block>
      <!-- 현재 좋아요 수를 표시 -->
      <span class="badge rounded-pill bg-primary text-white" th:text="${post.getPostLike().size()}"></span>
    </button>
  </div>
</th:block>

JavaScript

자바 스크립트 코드도 단순하다.
유저가 버튼을 클릭하면서 넘겨준 postId를 받아온 다음, 이 데이터를 받을 api 정보를 입력해주면 끝이다.

let addPostLike = {
  modifyPostLike: function (postId) {
    // 서버에 넘겨줄 데이터 : 게시글 아이디만 전달
    let param = {
      postNum: postId
    };
    $.ajax({
      type: "PUT",
      url: "/post/modify/like",
      data : param,
      success: function (flag) {
        // 데이터 요청에 성공할 경우
        // id가 post-ajax-form인 div만 새로고침 해준다.
        $('#post-ajax-form').load(location.href+' #post-ajax-form');
      },
    })
  },
}

Java

Entity

어떤 유저가 어떤 게시글의 좋아요를 눌렀는지 알아야하기 때문에 아래와 같이 구성했다.

@Entity
@Getter
@Builder
@AllArgsConstructor(access = AccessLevel.PRIVATE)
@NoArgsConstructor(access = AccessLevel.PROTECTED)
public class Like {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;

    @ManyToOne(fetch = FetchType.LAZY)
    private Post post;

    @ManyToOne(fetch = FetchType.LAZY)
    private Member member;

}

멤버가 회원을 탈퇴하거나 게시글이 지워질 경우, 그에 해당하는 Like도 지워져야기 때문에 Member와 Post에도 연관 관계 매핑을 해준다.
Set을 사용하는 이유는 한 회원이 중복된 게시글에 좋아요를 남길 수 없기 때문이다.
로직을 잘 구현한다면 List로 수정해도 상관없다!

public class Member {
    @OneToMany(mappedBy = "member", cascade = CascadeType.ALL, orphanRemoval = true)
    private Set<Like> postLike;
}

public class Post {
    @OneToMany(mappedBy = "post", cascade = CascadeType.ALL, orphanRemoval = true)
    private Set<Like> postLike;
}

Controller

Ajax에서 아래와 같이 작성했기 때문에, 해당 정보에 맞춰서 만들어준다.

type: "PUT",
url: "/post/modify/like",

Security를 이용해 User 클래스를 상속받는 SecurityUser를 구현했다면, 아래와 같은 코드로 구현하면 된다.

@RestController
@RequiredArgsConstructor
public class LikeApiController {

    private final LikeApiService likeApiService;

    @PutMapping("/post/modify/like")
    public boolean modifyPostLike(@AuthenticationPrincipal SecurityUser securityUser,
                                  @RequestParam Map<String, String> params) {
        // Post 엔티티의 id 필드가 Long이기 때문에 Long으로 변환
        Long postId = Long.valueOf(params.get("postNum"));

        // 좋아요가 새로 생겼다면 true, 기존에 좋아요가 있었다면 false
        return likeApiService.modifyLikeStatus(securityUser.getMember(), postId);
    }
}

Service

해당 기능이 진행되는 도중 에러가 발생할 경우 롤백을 해야하기 때문에 @Transactional을 활용했다.

@Service
@RequiredArgsConstructor
public class LikeApiService {
    private final LikeRepository likeRepository;
    private final PostService postService;

    @Transactional
    public boolean modifyLikeStatus(Member member, Long id) {
        // postService를 통해 아이디에 대한 엔티티 객체를 받아옴
        Post currentPost = postService.findById(id);

        // DB에서 해당 회원이 좋아요를 누른 상태인지 확인
        if (existLikeFlag(member, currentPost)) {
            // 좋아요를 누른 상태일 경우
            // 좋아요 취소를 위해 DB에서 삭제
            Like currentPostLike = likeRepository.findByMemberAndPost(member, currentPost);
            likeRepository.delete(currentPostLike);
            return false;
        } else {
            // 좋아요를 누르지 않았을 경우
            // DB에 저장
            createNewPostLike(member, currentPost);
            return true;
        }
    }

    @Transactional(readOnly = true)
    public boolean existLikeFlag(Member member, Post post) {
        return likeRepository.existsByMemberAndPost(member, post);
    }

    @Transactional
    public void createNewLike(Member member, Post currentPost) {
        Like newPostLike = Like.builder()
                .member(member)
                .post(currentPost)
                .build();
        likeRepository.save(newPostLike);
    }
}

Repository

public interface LikeRepository extends JpaRepository<Like, Long> {
    boolean existsByMemberAndPost(Member member, Post post);
    Like findByMemberAndPost(Member member, Post post);
}

마무리

머리속으로는 어떻게 사용할지 정리가 되었지만, 글로 남겨놓으려니 순서가 뒤죽박죽 된 것 같다.
그래도 이번 기회에 비동기 통신에 대해 배울 수 있어서 다행이라고 생각한다.

➡️ 참고 블로그 : 김미썸코딩