좋아요 기능 구현

내가 구현하고 싶었던 기능

1. 좋아요 버튼을 누르면 좋아요 +1 추가 

2. 같은 유저가 좋아요 버튼을 한번 더 누르면 -1 추가 였다. 

 

그럼 해당 유저가 좋아요를 눌렀다는 것을 기록을 해야하는데 .... 이걸 어떤 DB에 저장해야될지 고민이였다. 

많은 시행착오 끝에 내가 내린 결론은 

각 게시물DB에 좋아요를 누른 사람을 기록해 두는 것이였다. 

그렇다면 어떤식으로 기록해야하나?

 

나의 결정은 좋아요 키값에 해당 유저의 uid를 넣는 것이였다. 

 

//db.json

"posts": [
    {
      "id": 0,
      "title": "탕수육",
      "categoryA": "부먹",
      "categoryB": "찍먹",
      "like": ["91afa703-0580-412f-93ad-7e2f6e91fc41"],
      "writer": "412f-93ad-7e2f6e91fc41"

그러면 이 키값을 어떻게  넣을것이냐 

 

우리팀은 로그인한 유저의 uuid를 로컬스토리지에 저장해 놓고 

로그인 여부를 판단했다. 

 

그래서 로컬스토리지에 있는 uuid를 가져 와서 

필터링 하는 방법으로 가닥을 잡았다. 

 

이러면 다시 두가지 경우를 해결해야 한다. . 

 

1. 좋아요 버튼을 누르면 좋아요 +1 추가

2. 같은 유저가 좋아요 버튼을 한번 더 누르면 -1 추가 였다. 

 

1. 좋아요 버튼을 누른 다는 것은 like 키값에 해당 유저의 uuid가 없어야 한다는 것이다 그래서 나는

const currentUserId = localStorage.getItem("id");
// 로컬스토리지에 있는 해당 유저의 아이디를 변수에 담았다. 

const isLike = post.like.find((like) => like === currentUserId);
//find() 를 사용하여 아이디가 있는지 없는지를 판별했다.

만약 아이디가 없으면? 아이디를 넣어준다.  코드를 만듬

const addLike = {
      ...post,
      like: [...post.like, currentUserId],
    };

    //  거짓이면 추가 참이면 삭제
    if (isLike !== currentUserId) {
      dispatch(__AddLikes(addLike));
    }

 

2. 같은 유저가 좋아요 버튼을 한번 더 누르면 -1 추가 라는 것은 like 키값에  해당 유저의 아이디가 들어가 있으면 그것을 빼야한다. 

뺴는게 어려우니 필터링을 해서 해당 값만 제외하고 나머지 배열을 불러오는 작업을 하였다. 

    const isNotLike = post.like.filter((like) => like !== currentUserId);
    // 현재 유저를 제외한 나머지 값들을 가져오기 위한 필터링

 

이제 isNotLike 를 다시 넣어주기만 하면 된다. 

const deleteLike = {
      ...post,
      like: isNotLike,
    };
  
  //디스패치할 값들을 다시 담아서 
  
    if (isLike === currentUserId) {
      dispatch(__AddLikes(deleteLike));
    }
    // 조건문에 따라 넣어줬음

 

마지막으로 여러유저가 좋아요를 눌렀을때  몇개의 좋아요가 있는지를 보여주여야 한다. 

like 키값에는 유저들의 값이 들어가니 

 

post.like.length 를 활용 했다. 

 

아주 잘 나옴

 

 디비를 보자 

잘나옴 성공 !