게시물 좋아요 기능 구현하기

📁 좋아요 기능 미리보기

 

 

 

좋아요 기능 구현 과정을 간단하게 정리해보자면 다음과 같다.

 

 

프론트

• 하트 버튼 생성 (트윗 데이터 중 is_like 값에 따라서 다른 이미지 보여주기 ⇒ true일때 빨간 하트 false일때 빈하트)
• addHeart, delete 기능 구현
  → addHeart : saveLike API 통신. 트윗 아이디를 넘겨줘서 해당 트윗 아이디를 포함한 새로운 like 데이터 생성.
  → deleteHeart : saveLike API 통신. 트윗 아이디,유저 아이디를 넘겨줘서 해당 트윗 like 데이터 중 로그인한 유저가 생성한 like 데이터 삭제.

 

백엔드

 

• 백엔드 saveLike API 생성
  like table 트윗 관련 like 데이터를 생성하거나 삭제하는 saveLike API 생성 (create, destroy 사용함)
• getTweet API에서 트윗 데이터를 넘겨줄때 is_like 데이터(기본값=false)를 생성
  ⇒ like 테이블에 해당 트윗 like 숫자와 현재 로그인한 유저 아이디로 like 데이터가 존재하면 is_like = true값으로 넘겨줌

 

 

실제 구현한 코드

---

 

addHeart, deleteHeart 기능 

 

const deleteHearts = (prop: number) => {
    customAxios
      .post("/saveLike/delete", {
        tweet_id: prop,
      })
      .then((res) => {
        customAxios
          .get("/getTweets/select", {
            params: { getCurrentPage },
          })
          .then((result: any) => {
            queryClient.invalidateQueries(["select"])
          });
      });
  };

  const addHearts = (tweet_id: number) => {
    customAxios
      .post("/saveLike", {
        tweet_id: tweet_id,
      })
      .then((res) => {
        customAxios
          .get("/getTweets/select", {
            params: { getCurrentPage },
          })
          .then((result: any) => {
            queryClient.invalidateQueries(["select"]);
          });
      });
  };

 

하트 버튼 구현

<div className=" flex pr-3">
                      <img
                        className="w-4 h-4 "
                        alt="#"
                        src={
                          t.is_like
                            ? "/assets/heart.png"
                            : "/assets/EmptyHeart.png"
                        }
                        id={t.tweet_id}
                        onClick={() => {
                          if (t.is_like === true) {
                            deleteHearts(t.tweet_id);
                          }

                          if (t.is_like === false) {
                            addHearts(t.tweet_id);
                          }
                        }}
                      />
                      <div className="font-light text-sm pl-2">
                        {t.like.length - 1}
                      </div>
                    </div>

 

 

saveLike.ts

router.post(
  "/",
  verifyAccessToken,
  verifyRefreshToken,
  async (req: any, res: Response, next: NextFunction) => {
    const currentUser: Users[] = await Users.findOne({
      where: {
        email: req.email,
      },
    }).then((r: any) => {
      return r.user_id;
    });

   
      await Likes.create({
        tweet_id: req.body.tweet_id,
        user_id: currentUser,
      }).then((result) => {
        res.status(201).json(result);
      });
    
  }
);

router.post(
  "/delete",
  verifyAccessToken,
  verifyRefreshToken,
  async (req: any, res: Response, next: NextFunction) => {
    const currentUser: Users[] = await Users.findOne({
      where: {
        email: req.email,
      },
    }).then((r: any) => {
      return r.user_id;
    });

   
      await Likes.destroy({
        where: {
          tweet_id: req.body.tweet_id,
          user_id: currentUser,
        },
      }).then((result) => {
        res.status(201).json(result);
      });
    }
  
);

module.exports = router;

 

<더 구현하고 싶은것>

• 댓글 알람 클릭해서 해당 게시물 댓글창으로 이동
• 알람 데이터 숫자 버튼 옆에 보여주기 , 클릭할 경우 -1시키기

 

출처 및 참고

---

좋아요/싫어요 구현하기

[Team Project] Instagram Clone Project | 리액트 인스타그램 클론 프로젝트

[JS] 📚 배열 고차함수 🚇 map()

[JS] 배열 등을 풀어 헤치는 Spread Operator(스프레드 연산자)

[NodeJS] sequelize where in array query문

Use find() in React JS

Node.js - 시퀄라이즈 (Sequelize, SQL 데이터베이스 작업 라이브러리)

[2019.05.07] Sequelize - 조회,삽입,수정, 삭제 사용법

[React.js] 좋아요 하트 아이콘 구현하기