게시글 좋아요 기능

게시글 좋아요 기능을 구현 하면서 두 가지가 문제였다.

첫 번째는 현재 로그인 한 사용자가 해당 게시물을 좋아요 했는지 안 했는지를 저장하는 것.

두 번째는 해당 아티클 자체가 받은 좋아요 갯수를 저장하는 것.

article_detail.js
...

async function articleLike() {
  
  let token = localStorage.getItem("access");

  const response = await fetch(`${backend_base_url}/articles/${articleId}/like_article/`, {
    method: 'POST',
    headers: {
      'content-type':'application/json',
      'Authorization': `Bearer ${token}`
    },
  });

  console.log(response)

  const response_json = await response.json();
  console.log(response_json)

  const likeCount = document.getElementById("like_count");
  const likeButton = document.getElementById("likes");
  

  if (response.status == 200) {
    likeButton.innerText = response_json.message;
    // likeCount.innerText = 

    if (likeButton.innerText === "🧡") {
      articleLikeCount = parseInt(articleLikeCount) + 1;
      localStorage.setItem("articleLikeCount", String(articleLikeCount));
    } else if (likeButton.innerText === "🤍" && articleLikeCount > 0) {
      articleLikeCount = parseInt(articleLikeCount) - 1;
      localStorage.setItem("articleLikeCount", String(articleLikeCount));
    }

    likeCount.innerText = articleLikeCount;
    localStorage.setItem("articleLikeCount", String(articleLikeCount));
    return {response_json, articleLikeCount};
  } else {
    alert(response.status);
  }
}

문제가 많아 보이는 js 코드..
우선 가장 두드러지게 보이는 건 로컬스토리지에 좋아요 갯수를 저장하고 있다는 것.

로컬스토리지에 저장해도 DB에 저장하지 않으면 말짱 꽝.

chat-GPT : localStorage는 웹 브라우저에 데이터를 영구적으로 저장하는 기능을 제공합니다. 따라서, 페이지를 새로 고치거나 나가고 다시 들어올 때도 이전에 저장된 좋아요 수를 사용하여 초기화할 수 있습니다.

그러나 DB값이 기준이 아니라 로컬스토리지 값이 기준이 되면 좋아요 갯수는 좋아요를 누를 때 마다 계속해서 변화하고

무엇보다 게시글 자체의 좋아요 갯수를 카운팅 할 수 없다.

articles/views.py
...

class ArticleLikesView(APIView):
    def post(self, request, article_id):
        article = get_object_or_404(Articles, id=article_id)
        if request.user in article.likes.all():
            article.likes.remove(request.user)
            return Response({"message":"🤍"}, status=status.HTTP_200_OK)
        else:
            article.likes.add(request.user)
            return Response({"message":"🧡"}, status=status.HTTP_200_OK)

어딘가 부실해 보이는 코드..

분기가 제대로 되어있지 않다.

로그인 여부도 정해지지 않았고 DB에 저장하는 코드도 없다.
아무래도 프론트가 아니라 백에서 카운트를 조작하고 저장해야할 것 같다.

가보자고!!

profile
가보자고

0개의 댓글

Powered by GraphCDN, the GraphQL CDN