6/23 TIL

댓글수정기능

댓글 수정기능은 다들 참 쉽게 하는거 같은데 나는 너무 어려웠다.

내가 어려웠던 이유

  // 댓글 작성하기
  response.forEach(comment => {
    commentId = comment["id"]

    // 프로필 이미지 가져오기
    const User = comment.user;
    const UserAvatar = User.avatar;

    // 유저 프로필 이미지로 분할
    if (UserAvatar) {
      if (comment.user === currentUserPk) {
        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 id="comment_content${commentId}">${comment.content}</p>
          </div>
          <div id="comment_edit${commentId}" data-value="${commentId}">
            <button id="comment_put" onclick="commentPut(${commentId})" class="btn btn-primary" style="margin: auto; display: block;">수정</button>
            <button id="comment_delete" onclick="commentDelete(${commentId})" class="btn btn-primary" style="margin: auto; display: block;">삭제</button>
          </div>
        </li>`;
      }
      else {
        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 id="comment_content${commentId}">${comment.content}</p>
          </div>
        </li>`}
    } else {
      if (comment.user === currentUserPk) {
        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 id="comment_content${commentId}">${comment.content}</p>
          </div>
          <div id="comment_edit${commentId}">
            <button id="comment_put" onclick="commentPut(${commentId})" class="btn btn-primary" style="margin: auto; display: block;">수정</button>
            <button id="comment_delete" onclick="commentDelete(${commentId})" class="btn btn-primary" style="margin: auto; display: block;">삭제</button>
          </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 id="comment_content${commentId}">${comment.content}</p>
        </div>`}
    }

innerHTML을 사용해서 댓글을 생성했다.
그리고 현재 로그인 한 유저와 댓글 작성자를 비교하여 일치할 때 수정/삭제 기능이 보이도록 했다.

// 댓글 수정창
    const commentEditForm = document.createElement("div")
    commentEditForm.setAttribute("id", `comment_edit_${commentId}`)
    commentEditForm.setAttribute("class", "comment_edit_form")
    commentEditForm.style.display = "none"

    const commentEditInput = document.createElement("input")
    commentEditInput.setAttribute("id", `comment_edit_input${commentId}`)
    commentEditInput.setAttribute("type", "text")
    commentEditForm.appendChild(commentEditInput)

    const commentEditComplete = document.createElement("button")
    commentEditComplete.setAttribute("id", `comment_edit_complete${commentId}`)
    commentEditComplete.setAttribute("data-id", `${commentId}`) // commentId를 넘기기 위함.
    commentEditComplete.innerText = "수정완료"
    commentEditComplete.setAttribute("class", "btn btn-primary comment_edit_complete")
    commentEditForm.appendChild(commentEditComplete)

그리고 댓글 수정창은 js 코드를 통해 만들었다.

여기서 문제가