게시글 좋아요 기능을 구현 하면서 두 가지가 문제였다.
첫 번째는 현재 로그인 한 사용자가 해당 게시물을 좋아요 했는지 안 했는지를 저장하는 것.
두 번째는 해당 아티클 자체가 받은 좋아요 갯수를 저장하는 것.
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에 저장하는 코드도 없다.
아무래도 프론트가 아니라 백에서 카운트를 조작하고 저장해야할 것 같다.
가보자고!!