[TIL] 팀 과제 - 영화 소개 페이지(3) Dev 23.06.08

✔️오늘 한일!

• 알고리즘 문제풀이
• 팀원과 함께 전체 코드 병합 한 뒤 리팩토링
• Import, Export 적용
• 작성자에게만 리뷰 수정/삭제 버튼이 활성화되고 아닌 댓글은 비활성화 기능
• 댓글 좋아요/싫어요 기능

---

발생한 문제
리뷰의 좋아요/싫어요 기능을 구현하기 위해서 printReview function에 수정/삭제버튼과 똑같이 동적으로 버튼을 생성하려고 했다.
기능 구현담당이여서 css는 최소한으로 구현해놓고 작업

function printReview(user) {
  const ul = document.createElement("ul");
  const li = document.createElement("li");
  const nameTag = document.createElement("span");
  const reviewText = document.createElement("span");
  const modifyBtn = document.createElement("button");
  const delBtn = document.createElement("button");

  nameTag.innerText = user.id;
  reviewText.innerText = user.review;
  modifyBtn.innerText = "수정";
  delBtn.innerText = "❌";
  modifyBtn.style.display = "none";
  delBtn.style.display = "none";
  likeBtn.innerText = `${user.like}👍`;
  disLikeBtn.innerText = `${user.disLike}👎`;

  li.setAttribute("review-rid", user.rid);
  li.appendChild(nameTag);
  li.appendChild(reviewText);
  li.appendChild(modifyBtn);
  li.appendChild(delBtn);
  li.appendChild(likeBtn);
  li.appendChild(disLikeBtn);
  ul.appendChild(li);
  document.querySelector(".review-list").appendChild(ul);

  if (currInfo[0].uid === user.uid) {
    modifyBtn.style.display = "block";
    delBtn.style.display = "block";
  } else {
    modifyBtn.style.display = "none";
    delBtn.style.display = "none";
  }

  modifyBtn.addEventListener("click", modifyReview);
  delBtn.addEventListener("click", deleteReview);
}

수정/삭제버튼은 정상적으로 동적생성이 되는데 좋아요/싫어요는 마지막 리뷰에만 붙는 현상이 발생

Localstorage에는 클릭한 횟수대로 잘 저장이 되고 있고 동적으로 생성하는 부분이 문제인것 같아 코드를 이리저리 바꿔봤다.

수정/삭제버튼과 동일하게 addEventListener를 printReview안에 넣어보고 실행을 해도 마지막 리뷰에만 붙고 코드를 계속 바꿔봐도 변하는 게 없어서 아예 똑같이 작성을 해봤다.

해결방법

function likes(event) {
  const li = event.target.parentElement;
  const rid = li.getAttribute("review-rid");
  const review = reviewLists.filter((review) => review.rid === parseInt(rid));;
  review[0].like = parseInt(review[0].like) + 1;
  printLikes(review[0].like, 0);
  reviewSave();
}

function disLikes(event) {
  const li = event.target.parentElement;
  const rid = li.getAttribute("review-rid");
  const review = reviewLists.filter((review) => review.rid === parseInt(rid));
  review[0].disLike = parseInt(review[0].disLike) + 1;
  printLikes(0, review[0].disLike);
  reviewSave();
}

// 좋아요/싫어요 개수 출력 함수
function printLikes(like, disLike) {
  if (like) {
    likeBtn.innerText = `${like}👍`;
  } else {
    disLikeBtn.innerText = `${disLike}👎`;
  }
}

 likeBtn.addEventListener("click", likes);
 disLikeBtn.addEventListener("click", disLikes)

처음에는 이런식으로 like버튼과 dislike버튼을 전역변수로 선언하고 함수로 만들어서 사용을 하려고 했었다. 저장소에 데이터가 쌓이고 화면에 갯수가 출력되는것까지는 문제가 없었으나 동적생성이 안되어 수정/삭제버튼과 동일하게 만들어봤다.

function printReview(user) {
  const ul = document.createElement("ul");
  const li = document.createElement("li");
  const nameTag = document.createElement("span");
  const reviewText = document.createElement("span");
  const modifyBtn = document.createElement("button");
  const delBtn = document.createElement("button");
  const likeBtn = document.createElement("button");
  const disLikeBtn = document.createElement("button");

  nameTag.innerText = user.id;
  reviewText.innerText = user.review;
  modifyBtn.innerText = "수정";
  delBtn.innerText = "❌";
  likeBtn.innerText = `${user.like}👍`;
  disLikeBtn.innerText = `${user.disLike}👎`;

  li.setAttribute("review-rid", user.rid);
  li.appendChild(nameTag);
  li.appendChild(reviewText);
  li.appendChild(modifyBtn);
  li.appendChild(delBtn);
  li.appendChild(likeBtn);
  li.appendChild(disLikeBtn);
  ul.appendChild(li);
  document.querySelector(".review-list").appendChild(ul);

  if (currInfo[0].uid === user.uid) {
    modifyBtn.style.display = "block";
    delBtn.style.display = "block";
  } else {
    modifyBtn.style.display = "none";
    delBtn.style.display = "none";
  }

  modifyBtn.addEventListener("click", modifyReview);
  delBtn.addEventListener("click", deleteReview);

  likeBtn.addEventListener("click", () => {
    user.like++;
    likeBtn.innerText = `${user.like}👍`;
    reviewSave();
  });

  disLikeBtn.addEventListener("click", () => {
    user.disLike++;
    disLikeBtn.innerText = `${user.disLike}👎`;
    reviewSave();
  });
}

전역변수를 printReview 스코프내에서 선언하는것으로 변경했고, 만들어뒀던 함수를 없애고 스코프내에서 addEventListener로 같은 기능을 만들어줬다.
정확한 원인을 파악한지는 모르겠지만 likebtn과 dislikebtn은 해당 스코프내에서만 사용하는데 전역변수로 선언 후 함수로 만드려하다보니 뭔가 꼬였던것같다. 테스트겸 수정/삭제 버튼도 변수만 전역으로 빼보니까 동일하게 마지막 리뷰에만 생성되는것을 보니까 해당사항이 문제였던것같다.

---