6/15 TIL

프론트 작업을 하다가 아직은 낯선 js에서 발견하여 떠듬떠듬 코드를 수정한 것을 기록하고자 한다.

async function loadComments(articleId) {
  const response = await getComments(articleId); // 해당 아티클의 댓글
  console.log(response)

  const commentList =document.getElementById("comment_list")
  commentList.innerHTML="" // 새로운 댓글을 포함한 댓글창을 새로고침 하지 않고 보여주기

  response.forEach(comment => {
    commentList.innerHTML += `
    <li class="media d-flex mb-3">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" class="mr-3" alt="프로필 이미지" width=50 height=50>
    <div class="media-body">
      <h5 class="mt-0 mb-1">${comment.user}</h5>
      <p>${comment.content}</p>
    </div>
  </li>`
  });
}

위 코드에서는 게시물의 댓글을 단 유저의 프로필 이미지를 특정해서 보여주고 있다.

이 때 프로필 이미지가 있는 사람도 해당 프로필 이미지가 아니라 정해진 특정 이미지가 노출된다는 것을 뒤늦게 깨달았다.

async function loadComments(articleId) {
  const response = await getComments(articleId); // 해당 아티클의 댓글

  const commentList =document.getElementById("comment_list")
  commentList.innerHTML="" // 새로운 댓글을 포함한 댓글창을 새로고침 하지 않고 보여주기

  response.forEach(comment => {
    // 프로필 이미지 가져오기
    const User = comment.user
    const UserAvatar = User.avatar
    // 유저 프로필 이미지로 분할
    if(UserAvatar) {
      commentList.innerHTML +=
      `<li class="media d-flex mb-3">
      <img src="${UserAvatar}" alt="프로필 이미지" width=50 height=50>
      <div class="media-body">
        <h5 class="mt-0 mb-1">${comment.user}</h5>
        <p>${comment.content}</p>
      </div>
    </li>`
    } else {
      commentList.innerHTML +=
      `<li class="media d-flex mb-3">
      <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" class="mr-3" alt="프로필 이미지" width=50 height=50>
      <div class="media-body">
        <h5 class="mt-0 mb-1">${comment.user}</h5>
        <p>${comment.content}</p>
      </div>
    </li>`
    }
  });
}

그래서 댓글 단 유저를 가져와서 if문 분기를 통해 프로필 이미지가 있는 경우 해당 이미지를, 그렇지 않은 경우 정해진 특정 이미지가 나오도록 코드를 짰다.

내일은 피드 좋아요와 댓글 작성자에게만 수정·삭제 기능이 노출되는 것을 구현 할 예정이다

가보자고!!