스스로해보기 좋아요, 좋아요 취소 부분 구현

Node.js 교과서 - 기본부터 프로젝트 실습까지

작성

1.9K

안녕하세요~

강의를 듣다보니 시간의 흐름에 따라 바뀐 부분들이 많아서

이번에 나온 개정판 책을 사서 강의와 함께 보면서 개정판 책에 나오는 코드를 기준으로 실습을 하고 있는데

스스로해보기 부분의 좋아요, 좋아요 취소 부분에서 막혔습니다.

main.html에서 좋아요, 좋아요 취소 if 조건 값 설정을 어떻게 해야하는지 궁금합니다.

좋아요 버튼클릭하면 db에 저장까지는 되는데 좋아요 취소로 버튼이 바뀌지 않고 삭제도 되지 않습니다.

{% for twit in twits %}
<div class="twit">
<input type="hidden" value="{{twit.User.id}}" class="twit-user-id">
<input type="hidden" value="{{twit.id}}" class="twit-id">
<div class="twit-author">{{twit.User.nick}}</div>
{% if not followerIdList.includes(twit.User.id) and twit.User.id !== user.id %}
<button class="twit-follow">팔로우하기</button>
{% endif %}
{% if followerIdList.includes(twit.User.id) and twit.User.id !== user.id %}
<button class="twit-unfollow">팔로우끊기</button>
{% endif %}
<div class="twit-content">{{twit.content}}</div>
{% if twit.img %}
<div class="twit-img"><img src="{{twit.img}}" alt="섬네일"></div>
{% endif %}
{% if user and not liker %}
<button class="like">좋아요</button>
{% endif %}
{% if user and liker %}
<button class="unlike">좋아요 취소</button>
{% endif %}
</div>
{% endfor %}

document.querySelectorAll('.like').forEach(function(tag) {
tag.addEventListener('click', function() {
const twitId = tag.parentNode.querySelector('.twit-id').value;
axios.post(`/post/${twitId}/like`)
.then(() => {
location.reload();
})
.catch((err) => {
console.error(err);
});
});
});
document.querySelectorAll('.unlike').forEach(function(tag) {
tag.addEventListener('click', function() {
const twitId = tag.parentNode.querySelector('.twit-id').value;
axios.post(`/post/${twitId}/unlike`)
.then(() => {
location.reload();
})
.catch((err) => {
console.error(err);
});
});
});
router.post('/:id/like', async (req, res, next) => {
try {
const post = await Post.findOne({ where: { id: req.params.id } });
await post.addLiker(req.user.id);
res.send('OK');
} catch (error) {
console.error(error);
next(error);
}
});

router.post('/:id/unlike', async (req, res, next) => {
try {
const post = await Post.findOne({ where: { id: req.params.id } });
await post.removeLiker(req.user.id);
res.send('OK');
} catch (error) {
console.error(error);
next(error);
}
});