닉네임 변경, 게시글 좋아요, 게시글 수정, 게시글 삭제

개발공부·2022년 12월 16일
0

* 결과

1) 닉네임 변경

2) 게시글 수정 및 수정 취소

3) 게시글 삭제

4) 좋아요 누르면 mysql 정보 저장, 좋아요 취소 누르면 mysql 정보 사라짐!

4)-1 좋아요 누름

4)-2 좋아요 취소 누름

* sequelize model간 관계

  static associate(db) {
    db.Post.belongsTo(db.User); // post.addUser, post.getUser, post.setUser
    db.Post.belongsToMany(db.Hashtag, { through: "PostHashtag" }); // post.addHashtags
    db.Post.hasMany(db.Comment); // post.addComments, post.getComments
    db.Post.hasMany(db.Image); // post.addImages, post.getImages
    db.Post.belongsToMany(db.User, { through: "Like", as: "Likers" }); // post.addLikers, post.removeLikers
    db.Post.belongsTo(db.Post, { as: "Retweet" }); // post.addRetweet
  }

like 추가는 addLikers

like 삭제는 removeLikers

* 관련 코드(redux-toolkit)

* 삭제

const data = action.payload; //mysql에서 가져온 postId이 있는 data 값

state.mainPosts = state.mainPosts.filter((v) => v.id !== data.PostId);

* 수정

const data = action.payload; //mysql에서 가져온 content가 있는 data 값

state.mainPosts.find((v) => v.id === data.PostId).content = data.content;
//각자의 post의 id값 비교 후 content 변경

* 댓글 추가

 const data = action.payload; //mysql에서 가져온 postId이 있는 data 값
      const post = state.mainPosts.find((v) => v.id === data.PostId);
      post.Comments.unshift(data);

* 닉네임 변경

 const data = action.payload;
 state.me.nickname = data.nickname;

* Like & unLike

//like
  const data = action.payload;
   const post = state.mainPosts.find((v) => v.id === data.PostId);
      post.Likers.push({ id: data.UserId });

//unLike
const data = action.payload;
      const post = state.mainPosts.find((v) => v.id === data.PostId);
      post.Likers = post.Likers.filter((v) => v.id !== data.UserId);

* 오류 정리

* req.body & req.params 비교

(req.body, req.query, req.params 비교)

* 게시글 삭제

  • /:postId값은 파라미터, 따라서 params 넣어줘야 함(params.postId는 입력 시 postId로 넣었을 경우 나옴
//front
function removePostAPI(data) {
  return axios.delete(`/post/${data}`, data);
}

//back
router.delete("/:postId", isLoggedIn, async (req, res, next) => {
  // DELETE /post/10
  try {
    await Post.destroy({
      where: {
        id: req.params.postId, //해당 부분
        UserId: req.user.id, //작성자가 본인이 맞는지 확인
      },
    });
    res.status(200).json({ PostId: parseInt(req.params.postId, 10) });
  } catch (error) {
    console.error(error);
    next(error);
  }
});

* 게시글 수정

  • front의 data는 postId, editText값 두 개가 존재하므로 파라미터에 들어갈 ${}에 data.postId로 넣어줌
  • req.body는 주소값과 관련 없이 전달받은 값으로 req.body.editText
  • 삭제와 마찬가지로 req.params.(미리 설정한 데이터 이름)으로 만듦
//front
function revisePostAPI(data) {
  return axios.patch(`/post/${data.postId}`, {
    postId: data.postId,
    editText: data.editText,
  });
}

//back
router.patch("/:postId", isLoggedIn, async (req, res, next) => {
  // PATCH /post/10
  try {
    await Post.update(
      { content: req.body.editText },
      {
        where: {
          id: req.params.postId,
          UserId: req.user.id, //작성자가 본인이 맞는지?
        },
      }
    );
    res
      .status(200)
      .json({
        PostId: parseInt(req.params.postId, 10),
        content: req.body.editText,
      });
  } catch (error) {
    console.error(error);
    next(error);
  }
});
profile
개발 블로그, 티스토리(https://ba-gotocode131.tistory.com/)로 갈아탐

0개의 댓글