[jQuery] 새로고침없이 댓글 추가, 수정 및 삭제하기

자바스크립트로 댓글을 수정하거나 삭제하는 코드는 일반적으로 서버와의 통신을 필요로 하며, 프론트엔드에서 이러한 작업을 수행하기 위해 AJAX 요청을 보냅니다.

예시로, jQuery를 사용한 AJAX 요청을 통해 댓글을 수정하고 삭제하는 방법을 보여드리겠습니다.

댓글 추가

자바스크립트로 댓글을 추가하는 것도 댓글 수정이나 삭제와 비슷하게, 서버에 새 댓글 데이터를 전송하고, 성공하면 이를 화면에 추가하는 방식으로 이루어집니다.

역시 AJAX 요청을 사용하여 서버와 통신합니다. 다음은 jQuery를 사용하여 댓글을 추가하는 예제입니다.

HTML

먼저, HTML에서 댓글을 추가할 수 있는 입력 필드와 버튼을 가정하겠습니다.

<div id="comment-form">
  <textarea id="new-comment" placeholder="Write your comment..."></textarea>
  <button id="add-comment">Add Comment</button>
</div>

<div id="comments">
  <!-- Existing comments will be here -->
</div>

jQuery 코드

$(document).ready(function() {
  $('#add-comment').click(function() {
    var newCommentText = $('#new-comment').val().trim();

    if (newCommentText) {
      $.ajax({
        url: '/api/comments',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({ text: newCommentText }),
        success: function(response) {
          // Assuming the response contains the new comment data
          var newComment = response.comment;

          var commentHtml = `
            <div class="comment" data-comment-id="${newComment.id}">
              <p class="comment-text">${newComment.text}</p>
              <button class="edit-comment">Edit</button>
              <button class="delete-comment">Delete</button>
            </div>
          `;

          $('#comments').append(commentHtml);
          $('#new-comment').val(''); // Clear the input field
        },
        error: function(xhr, status, error) {
          alert('Failed to add comment: ' + error);
        }
      });
    } else {
      alert('Comment cannot be empty.');
    }
  });
});

• 사용자가 add-comment 버튼을 클릭하면 new-comment 텍스트 영역의 내용을 가져옵니다.
• 내용이 비어 있지 않다면, AJAX POST 요청을 통해 서버에 새로운 댓글 데이터를 전송합니다.
• 서버가 요청을 성공적으로 처리하면, 서버로부터 받은 새 댓글 데이터를 사용하여 새로운 댓글 HTML을 생성하고 comments div에 추가합니다.
• 입력 필드를 초기화하여 비웁니다.

댓글 수정

먼저, HTML에서 댓글을 표시하는 기본 구조를 가정하겠습니다.

<div id="comments">
  <div class="comment" data-comment-id="1">
    <p class="comment-text">This is a comment.</p>
    <button class="edit-comment">Edit</button>
    <button class="delete-comment">Delete</button>
  </div>
  <!-- More comments -->
</div>

jQuery 코드

$(document).on('click', '.edit-comment', function() {
  var commentDiv = $(this).closest('.comment');
  var commentId = commentDiv.data('comment-id');
  var commentText = commentDiv.find('.comment-text').text();
  var newCommentText = prompt('Edit your comment:', commentText);

  if (newCommentText !== null && newCommentText !== commentText) {
    $.ajax({
      url: '/api/comments/' + commentId,
      method: 'PUT',
      contentType: 'application/json',
      data: JSON.stringify({ text: newCommentText }),
      success: function(response) {
        commentDiv.find('.comment-text').text(newCommentText);
      },
      error: function(xhr, status, error) {
        alert('Failed to update comment: ' + error);
      }
    });
  }
});

• edit-comment 버튼을 클릭하면 해당 댓글의 텍스트를 가져와 prompt 창에 표시합니다.
• 사용자가 수정된 텍스트를 입력하고 확인을 누르면, AJAX PUT 요청을 통해 서버에 업데이트된 텍스트를 전송합니다.
• 서버가 요청을 성공적으로 처리하면, 화면에 표시된 댓글 텍스트를 업데이트합니다.

댓글 삭제

$(document).on('click', '.delete-comment', function() {
  var commentDiv = $(this).closest('.comment');
  var commentId = commentDiv.data('comment-id');

  if (confirm('Are you sure you want to delete this comment?')) {
    $.ajax({
      url: '/api/comments/' + commentId,
      method: 'DELETE',
      success: function(response) {
        commentDiv.remove();
      },
      error: function(xhr, status, error) {
        alert('Failed to delete comment: ' + error);
      }
    });
  }
});

• delete-comment 버튼을 클릭하면 해당 댓글의 ID를 가져와 사용자에게 삭제 확인을 요청합니다.
• 사용자가 확인을 누르면, AJAX DELETE 요청을 통해 서버에 삭제 요청을 보냅니다.
• 서버가 요청을 성공적으로 처리하면, 화면에서 해당 댓글을 제거합니다.

이 예제는 기본적인 개념을 보여주는 것이며, 실제 구현에서는 서버 API의 URL 구조와 데이터 형식에 맞추어 코드를 조정해야 합니다. 댓글 데이터의 구조와 서버 응답 형식은 서버 측의 구현에 따라 다를 수 있습니다.