49. chapter8. 좋아요 구현 - 좋아요 버튼 기능 구현 완료

'좋아요 기능' 구현도 완료되었고, View 렌더링도 완료됬다.

이제 실질적으로 웹페이지에서 해당 하트모양의 아이콘을 클릭했을 때, 정상적으로 위 기능이 구현되도록 해주자.

이 자바스크립트를 AJAX를 사용해서 해결해보자

테스트 해보자

Insert 쿼리가 실행된다

DB에서 보면

정상적으로 DELETE 쿼리가 실행되고, DB에서도 삭제되었다. 

여기서 문제는 '좋아요' 했을 때, likeCount가 변하지 않는다는 것이다.

'새로고침'하면 정상적으로 적용이 되어 있는것을 볼 수 있다.

하지만 눌렀을 때 바로 적용될 수 있도록 '동적'으로 만들어주어야 한다.

// (3) 좋아요, 안좋아요
function toggleLike(imageId) {
   let likeIcon = $(`#storyLikeIcon-${imageId}`);

   if (likeIcon.hasClass("far")) { //좋아요 하지 않은 상태

      $.ajax({
         type:"post",
         url:`/api/image/${imageId}/likes`,
         dataType: "json"
      }).done(res => {

         let likeCountStr = $(`#storyLikeCount-${imageId}`).text();
         let likeCount = Number(likeCountStr) + 1;
         console.log("좋아요 카운트 증가", likeCountStr)
         $(`#storyLikeCount-${imageId}`).text(likeCount);

         likeIcon.addClass("fas");
         likeIcon.addClass("active");
         likeIcon.removeClass("far");
      }).fail(error => {
         console.log("오류",error);
      });

   } else { //좋아요 한 상태

      $.ajax({
         type:"delete",
         url:`/api/image/${imageId}/likes`,
         dataType: "json"
      }).done(res => {

         let likeCountStr = $(`#storyLikeCount-${imageId}`).text();
         let likeCount = Number(likeCountStr) - 1;
         $(`#storyLikeCount-${imageId}`).text(likeCount);

         likeIcon.removeClass("fas");
         likeIcon.removeClass("active");
         likeIcon.addClass("far");
      }).fail(error => {
         console.log("오류",error);
      });

   }
}

-> likeCount를 텍스트로 가져와서 int로 바인딩 해주고 상황에 따라 +1,-1을 해주었다.

확인해보면 누르자마자 VIew에 바로 뿌려진다.