Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- vs code 내 node
- You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"
- node.js 설치
- Do it 자바스크립트 + 제이쿼리 입문
- 계산맞추기 게임
- react오류
- 노드에 리액트 추가하기
- Colaboratory 글자 깨짐
- Spring-Framework
- Concurrently
- 자바스크립트
- Python
- ReactDOM.render is no longer supported in React 18. Use createRoot instead
- 웹 게임을 만들며 배우는 리액트
- 거북이 대포 게임
- props
- react
- node.js로 로그인하기
- 타자 게임 만들기
- 따라하며 배우는 노드 리액트 기본 강의
- googleColaboratory
- intllij 내 Bean을 찾지 못해서 발생하는 오류
- spring-boot
- intellij
- 리액트
- 인프런
- DB Browser
- 모던자바스크립트
- JS 개념
- 모두의 파이썬
Archives
- Today
- Total
프로그래밍 삽질 중
SNS서비스 좋아요 버튼 및 좋아요 취소 버튼 만들기 본문
* 결과
- mysql에서 좋아요 누르기 전에는 Like 테이블이 빈칸
- 자신이 작성한 글에 좋아요를 누르면 Like 테이블에 입력되지 않음
- 좋아요 버튼을 누르면 Like 테이블에 값이 들어감
- 좋아요 취소 버튼을 누르면 Like 테이블에서 사라짐
* 매우매우매우 도움된 참고글
https://www.inflearn.com/questions/539697
* 모델(Model) 부분
- post.js (as를 통해 시퀄라이즈 사용 : https://ba-gotocode131.tistory.com/196)
db.Post.belongsToMany(db.User, { through: "Like", as: "Liker" });
- user.js
db.User.belongsToMany(db.Post, { through: "Like" });
* router 부분
- page.js(메인 화면)
router.get("/main", async (req, res, next) => {
//post 결과 보려면 이 부분 넣어야 함
try {
if (req.user) {
const posts = await Post.findAll({
include: [
{
model: User,
attributes: ["id", "nickname"],
},
//추가할 부분 1
{
model: User,
attributes: ["id", "nickname"],
as: "Liker",
},
],
order: [["createdAt", "DESC"]],
});
//추가할 부분 2
posts.forEach((post) => {
//post.User.id와 post.Liker.id가 같을 경우 true, 아니면 false
post.liked = !!post.Liker.find((v) => v.id === req.user?.id);
});
res.render("main", {
title: "engWordSNS",
twits: posts,
});
} else {
const posts = await Post.findAll({
include: [
{
model: User,
attributes: ["id", "nickname"],
},
{
model: User,
attributes: ["id", "nickname"],
as: "Liker",
},
],
order: [["createdAt", "DESC"]],
});
res.render("main", {
title: "engWordSNS",
twits: posts, //프론트단에서는 twits으로 값을 출력
});
}
} catch (error) {
console.error(error);
next(error);
}
});
- user.js
router.post("/:id/like", async (req, res, next) => {
try {
//작성된 글을 찾음
const posts = await Post.findOne({ where: { id: req.params.id } });
if (posts) {
await posts.addLiker(req.user.id); //추가하기
res.json(posts);
} else {
res.status(404).send("작성된 글을 찾을 수 없습니다.");
}
} catch (error) {
console.log(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("success");
} catch (error) {
console.log(error);
next(error);
}
});
* 화면 부분
- main.html
{% for twit in twits %}
<div class="twit">
//<input type="hidden" value="{{twit.id}}" class="twit-id">
//twit.id로 값을 찾을 경우 본인 아이디에서 작성한 가장 최근 작성글만 찾아옴
//따라서 twit.id를 dataset을 이용함
<!-- 좋아요, 좋아요 취소 -->
{% if twit.liked %}
<button class="unlike" data-id="{{twit.id}}">좋아요취소</button>
{% else %}
<div>{{twit.id}}</div>
<button class="like" data-id="{{twit.id}}">좋아요</button>
{% endif %}
</div>
{% endfor %}
- main.html 내 javascript
//좋아요 버튼
document.querySelectorAll(".like").forEach(function (tag) {
tag.addEventListener("click", function (event) {
const myId = document.querySelector("#my-id").value;
const userId = tag.parentNode.querySelector('.twit-user-id').value;
if (myId !== userId) {
const twitId = event.target.dataset.id;
console.log("twitId", twitId)
//게시물 번호, 자신의번호, 게시글 작성자 번호
axios.post(`/user/${twitId}/like`).then(() => {
location.reload();
}).catch((err) => {
console.log(err);
})
} else {
alert("자신이 작성한 게시글에는 좋아요를 누를 수 없습니다.");
}
})
})
//좋아요 취소
document.querySelectorAll(".unlike").forEach(function (tag) {
tag.addEventListener("click", function (event) {
const myId = document.querySelector("#my-id").value;
const userId = tag.parentNode.querySelector('.twit-user-id').value;
if (myId !== userId) {
const twitId = event.target.dataset.id;
console.log("twitId", twitId)
//게시물 번호, 자신의번호, 게시글 작성자 번호
axios.post(`/user/${twitId}/unlike`).then(() => {
location.reload();
}).catch((err) => {
console.log(err);
})
}
})
})
'과거 프로그래밍 자료들 > 프로젝트' 카테고리의 다른 글
ubuntu git 관련 오류 (0) | 2022.09.08 |
---|---|
form내 action 경로가 실행되기 전 onSubmit 사용하기 (1) | 2022.09.07 |
sequelize belongsToMany 내 as 시퀄라이즈 사용 (0) | 2022.09.06 |
req.user.id = undefined 일 때 조건(로그인/비로그인일 경우) (0) | 2022.09.05 |
sequelize 이용한 axios get, post 차이 정리(mysql 항목 검색) (0) | 2022.09.03 |