[JS] 소셜웹페이지 - 댓글 추가기능 구현

classList

/* CSS */
.emptyHeart {
  content: url(/img/icon/heart.png);
}

.fullHeart {
  content: url(/img/icon/fullheart.png);
}

.deleteButton {
  content: url(/img/icon/cancel.png);
  float: right;
  width: 12px;
}

// JS
const changeHeart = (e) => {
  let target = e.target.classList;
  if (target.contains("emptyHeart")) {
    target.remove("emptyHeart")
    target.add("fullHeart")
  } else {
    target.remove("fullHeart")
    target.add("emptyHeart")
  }
}

 댓글에 하트 버튼을 눌러서 하트가 켜지고 끄게 만들기 위해서 CSS에 이미지를 받아오는 클래스를 만들어두고, click시 바뀌는 함수를 만들었다. 클래스를 생성할 때 className 대신 classList를 사용했는데 className을 사용하면 기존 클래스가 모두 삭제되는 문제가 있기 때문이다.

 

오류) classList를 사용해 클래스를 여러 개 추가할 때는

newCommentHeart.classList.add("heartCheck", "emptyHeart");

콤마를 쓰면서 계속 써주면 된다. 이를 이용해서 처음 좋아요 버튼을 만들 때는

const changeHeart = (e) => {
  let target = e.target.classList;
  if (target.contains("emptyHeart")) {
    newCommentHeart.classList.add("heartCheck", "fullHeart");
  } else {
    newCommentHeart.classList.add("heartCheck", "emptyHeart");
  }
}

클래스 자체를 바꿔주는 식으로 했는데 작동하지 않는다. 하나씩 지워주고받는 식으로 사용해야 한다.

composedPath

const deleteAlert = (e) => {
  if (confirm("정말 삭제하시겠습니까?")) {
    e.composedPath()[1].remove()
  }
}

 댓글을 삭제하는 버튼은 댓글 목록인 <li>을 지워주기 위해 composedPath로 태그 부모를 가져왔다. alert 대신 confirm을 쓰면 예, 아니오 같은 버튼 입력에 따라 동작하게 할 수 있다.

 

 처음엔 path만 사용해서 시도했는데, 에러 메시지가 뜨진 않지만 개발자 도구에 경고 메시지가 남게 된다. 권고사항에 따라 composedPath를 사용했다.

const deleteAlert = (e) => {
  if (confirm("정말 삭제하시겠습니까?")) {
    e.path[1].remove();
  }
}

fetch

let USERID;
let feeds;
fetch("data/feed.json")
  .then((res) => res.json())
  .then((obj) => {
    feeds = obj.feeds;
    feeds.forEach((data,i) => {
      loadCommentsID[i].textContent = data.commentID;
      loadComments[i].textContent = data.commentText;
      feedPicture[i].src = data.feedPicture;
      feedWriterProfile[i].src = data.WriterProfile;
      feedWriter[i].textContent = data.feedID;
      likeCount[i].textContent = `좋아요 ${data.like} 개`;
      contentsText[i].innerText = data.feedText;
      USERID = data.commentID;
    })
  })

 HTML에 하드코딩해놓은 부분들을 JSON으로 받아오게 바꿨다. 댓글을 쓰는 함수에서 ID값을 받도록 했다 보니 ID를 받아오는 게 급해서 일단 선언하는 식으로 fetch의 비동기 방식을 해결했는데, 더 좋은 방법이 있을 것 같아서 수정해보려 한다.