반응형
PedroTech님의 풀스택 강의 6일 차를 참고하였습니다.
📌 Comments 테이블 생성하기
// ./server/models/Comments.js
module.exports = (sequelize, DataTypes) => {
const Comments = sequelize.define("Comments", {
commentBody: {
type: DataTypes.STRING,
allowNull: false,
},
});
return Comments;
};

models 안에 위 코드와 같이 작성하면 DB 안에 자동으로 Comments 테이블이 생성된 것을 확인할 수 있습니다.
📌 Posts 테이블의 id를 Comments 테이블의 외래키로 추가하기
// ./server/models/Post.js
module.exports = (sequelize, DataTypes) => {
const Posts = sequelize.define("Posts", {...
});
// Posts의 id(기본키) 외래키로 추가하는 코드입니다.
Posts.associate = (models) => {
Posts.hasMany(models.Comments, {
onDelete: "cascade",
});
};
return Posts;
};

1. Posts.hasMany(): Posts의 id와 Comments의 PostId(외래키)와의 관계를 1:N으로 하는 것을 의미합니다.
2. onDelete: "cascade": Posts의 데이터가 삭제 됐을 때, Comments에서도 자동적으로 해당 데이터가 삭제된다는 의미입니다.
실행하면 위와 같은 결과가 나오게 됩니다.
📌 Comments에 get, post 생성하기
// ./server/index.js
const express = require("express");
const router = express.Router();
const { Comments } = require("../models");
router.get("/:postId", async (req, res) => {
const postId = req.params.postId;
const comments = await Comments.findAll({ where: { PostId: postId } });
res.json(comments);
});
router.post("/", async (req, res) => {
const comment = req.body;
await Comments.create(comment);
res.json(comment);
});
module.exports = router;
GET 코드 설명
1. req.params.postId: url에서 params로 전달된 postId의 값을 반환해 줍니다.
2. Comments.findAll({ where: { PostId: postId } }): PostId의 값이 postId와 일치하는 데이터를 반환해 줍니다.
- findAll은 모든 데이터를 가져오기 때문에 특정 값만 필요하다면 where을 사용해줘야 합니다.
POST 코드 설명
1. req.body: 보낸 데이터 전체를 반환해 줍니다.
2. Comments.create(comment): 받은 데이터를 Comments 테이블에 추가합니다.
3. res.json(comment): 결과를 JSON 형식으로 변환해 줍니다.
📌 느낀 점
외래키를 추가해야 하는 작업을 따라서 하고 있는데 영상이 영어다 보니까 이해가 안 되는 부분이 발생할 때가 있습니다.
그럴 때마다 추가로 인터넷에서 코드의 의미를 찾아 정확하게 이해하려고 많이 노력 중입니다!
오늘도 이렇게 외래키를 추가하는 방법에 대해 알게 되어 나중에 직접 post 하는 기능을 추가해 화면에 보이게끔 하고 싶습니다.
728x90
'MySQL' 카테고리의 다른 글
React, MySQL 8일차 (로그인 기능 만들기) (2) | 2023.10.16 |
---|---|
React, MySQL 7일차 (댓글 보여주기) (0) | 2023.10.15 |
CSV 파일을 DB에 가져오기 (HeidiSQL 사용) (0) | 2023.10.09 |
React, MySQL 풀스택 5일차 (useParams로 포스터 내용 보여주기) (0) | 2023.09.25 |
React, MySQL 풀스택 4일차 (Form으로 DB에 데이터 전송하기) (0) | 2023.09.25 |