#TIL(Today I Learned)_댓글 좋아요/싫어요 기능에 관한 고찰 2편

# 1편에서 이어서 >>

# 진행하면서 겪었던 문제에 대해2

[잘 작동하던 버튼이 팀원과 파일 통합 후 사라지는 문제발생]

너무나 당황했습니다. 잘 작동하던 좋아요, 싫어요. 버튼이 작업 중간에 팀원이 보내준 수정된 파일과 통합하면서 증발해 버렸습니다. 정확히 표현하자면 싫어요. 버튼은 사라지고 좋아요. 버튼은 있긴 한데 댓글 창 안에 감춰져서 버튼의 틀 부분만 살짝 빼꼼 나오게 되었습니다. 
 

<당시 콘솔창에 떳던 오류 내용입니다.>

---

<기존에 있었던 버튼 사진_클릭도 잘 작동했었습니다.>

---

<파일 병합 후 나타난 증상_버튼이 사라져버렸습니다.>

 

버튼이 분명 있었는데...... 없었습니다~???

작업자 도구를 켜서 comment 박스의 내부 공간을 보니 기존의 div 값의 공간이 없어져 버렸고 버튼들 또한 div 위치에 속했기 때문에 div 공간이 사라지면서 자연스럽게 사라진 것 같습니다. 

---

문제를 해결하기 위해 js파일 안에서 div값 만들어서 버튼 만들기 

 /*-- 2. <div>태그의 innerHTML 값 넣어주기 --------------------------*/
  newDiv.innerHTML = `
  <div class="commentUserBox">
    <div class='commentUser'>
        <div id='s_${idx}'>${star}</div>
        <div class='comment' id='c_${idx}'>${content}</div>
        <div class='timeBox'>
          <div class='user' id='w_${idx}'>${writer}</div>
          <div>${timeAgo}</div>
          <div class= likeDis>
              <button class="likeBtn">
               <svg aria-label="좋아요" class="_8-yf5 white" display="none" ....></svg>
               <svg aria-label="좋아요 취소" class="_8-yf5 red" display="none" ...></svg>
               <span class="button-text">좋아요</span>
               <span class="like-count">${likes}</span>
              </button>
              <button class="dislikeBtn">
               <svg aria-label="싫어요" class="_8-yf5 white" display="none" ....></svg>
               <svg aria-label="싫어요 취소" class="_8-yf5 red" display="none" ...></svg>
               <span class="button-text">싫어요</span>
               <span class="dislike-count">${dislikes}</span>
               </button>
        </div>
      </div>
      <div class='buttonBox'>
        <div class='BtnStyle' onclick=editForm(${idx})>수정</div>
        <div class='BtnStyle' onclick=del(${idx})>삭제</div>
      </div>
  </div>
  `;

기존에 작성하였던 html의 버튼과 css스타일을 삭제하고 위에 코드에서처럼 js파일에 버튼을 적용시켰습니다.  

---

js 파일에서 버튼 생성 후 원하는 위치가 잘 들어갔는지 관리자 도구로 확인해봤습니다. 
다행이 제가 원하던 위치에 버튼 두 개가 알맞게 잘 들어갔습니다. 

<개발자 도구를 통해 본 div.likeDis자리의 버튼 공간입니다. >

---

<원하는 위치에 버튼이 다시 잘 들어갔습니다.>

---

[ JavaScript 코드에서 textContent 값을 설정하려는데 해당 값이 null인 오류 발생]
Cannot set properties of null (setting 'textContent') 오류는 주로 querySelector나 getElementById와 같은 DOM 요소를 선택하거나 가져올 때 해당 요소를 찾을 수 없는 경우에 발생합니다.

<textContent 값을 설정하려는데 해당 값 null 오류가 나타났습니다.>

---

문제가 발생한 이전의 코드

// 좋아요 버튼에 대한 이벤트 리스너 추가
const likeBtns = document.querySelectorAll('.likeBtn');
likeBtns.forEach((likeBtn) => {
  likeBtn.addEventListener('click', (e) => {
    const commentId = likeBtn.getAttribute('data-comment-id');
    toggleLikeDislike(commentId, 'like');
  });
});

// 싫어요 버튼에 대한 이벤트 리스너 추가
const dislikeBtns = document.querySelectorAll('.dislikeBtn');
dislikeBtns.forEach((dislikeBtn) => {
  dislikeBtn.addEventListener('click', (e) => {
    const commentId = dislikeBtn.getAttribute('data-comment-id');
    toggleLikeDislike(commentId, 'dislike');
  });
});

 

위에는 문제가 발생한 코드입니다. 부분을  querySelector로 likeBtn 및 dislikeBtn을 선택하고 textContent 값을 설정하려고 하는데, 선택한 요소가 없거나 존재하지 않는 경우에 likeBtn 또는 dislikeBtn은 null이 되고, null에는 textContent와 같은 속성을 설정할 수 없기 때문에 이 오류가 발생합니다.

---

이 문제를 해결하기 위해 수정한 코드

// 좋아요 버튼에 대한 이벤트 리스너 추가
const likeBtns = document.querySelectorAll('.likeBtn');
for (const likeBtn of likeBtns) {
  likeBtn.addEventListener('click', (e) => {
    const commentId = likeBtn.getAttribute('data-comment-id');
    const comment = getCommentFromLocalStorage(commentId); // 댓글 정보 가져오기
    toggleLikeDislike(commentId, 'like', comment); // 좋아요 토글
  });
}

// 싫어요 버튼에 대한 이벤트 리스너 추가
const dislikeBtns = document.querySelectorAll('.dislikeBtn');
dislikeBtns.forEach((dislikeBtn) => {
  dislikeBtn.addEventListener('click', (e) => {
    const commentId = dislikeBtn.getAttribute('data-comment-id');
    toggleLikeDislike(commentId, 'dislike');
  });
});

좋아요와 싫어요 버튼에 대한 이벤트 리스너는 수정되지 않았지만, 이벤트 리스너에서 toggleLikeDislike 함수를 호출할 때 댓글 정보(comment)를 가져와 인수로 전달하도록 변경되었습니다. 이렇게 하면 좋아요 및 싫어요 기능이 올바르게 작동해야 합니다.
 

<콘솔창에 해당 오류가 사라진 모습입니다. >

# 3편에서 계속>>