jQuery 댓글 시스템 구현

✅ 댓글 시스템 구현

이번 강좌에서는 간단한 댓글 시스템을 구현해 보겠습니다. 사용자가 댓글을 작성하면 이를 웹 페이지에 동적으로 추가하는 기능을 구현하며, jQuery를 활용하여 DOM 조작을 효율적으로 처리합니다. 이 실습은 기본적인 사용자 입력 처리와 데이터 동적 갱신을 학습할 수 있는 좋은 예제입니다.

📝 1. 댓글 입력 폼 만들기

먼저, 댓글을 입력할 수 있는 폼을 만들어야 합니다. 댓글을 입력하는 텍스트 박스와 "댓글 남기기" 버튼을 추가하고, 버튼 클릭 시 댓글을 추가하는 기능을 구현합니다.

위 코드에서는 `textarea` 요소를 사용해 댓글을 입력받고, "댓글 남기기" 버튼을 클릭하면 댓글이 화면에 추가될 수 있도록 합니다.

💬 2. 댓글 목록 표시하기

이제 사용자가 입력한 댓글을 화면에 동적으로 추가할 수 있는 기능을 구현합니다. 댓글이 성공적으로 추가될 때마다 기존의 댓글 목록에 새로운 댓글이 추가되어야 합니다.

댓글 목록

<!-- 댓글 입력 폼 -->
<div id="commentSection">
  <textarea id="commentInput" placeholder="댓글을 작성하세요..." style="width:100%; height:100px; margin-bottom:10px;"></textarea>
  <button id="postCommentButton" style="background:#f39c12; color:white; border:none; padding:10px 20px; cursor:pointer;">댓글 남기기</button>
</div>

<ul id="commentList" style="list-style:none; padding-left:0;">
    <!-- 댓글이 여기에 추가됩니다. -->
 </ul>

`#commentsList` 영역 안에 댓글 목록을 표시할 `ul` 요소를 추가하고, 새로운 댓글이 추가될 때마다 이 영역에 목록을 갱신하도록 할 것입니다.

🔧 3. 댓글 추가 기능 구현

이제 사용자가 댓글을 입력하고, 댓글 목록에 추가되는 기능을 jQuery로 구현합니다. 사용자가 댓글을 입력하고 "댓글 남기기" 버튼을 클릭하면, 댓글이 목록에 추가됩니다.

$(document).ready(function() {
  // 댓글 남기기 버튼 클릭 시
  $("#postCommentButton").click(function() {
    var commentText = $("#commentInput").val(); // 입력된 댓글 텍스트 가져오기

    // 댓글이 비어있지 않다면
    if (commentText.trim() !== "") {
      // 새로운 댓글을 HTML로 추가
      $("#commentList").append("" + commentText + "");
      
      // 댓글 입력란 초기화
      $("#commentInput").val("");
    } else {
      alert("댓글을 입력해주세요.");
    }
  });
});
  

위 코드에서, 사용자가 댓글 입력란에 텍스트를 입력하고 "댓글 남기기" 버튼을 클릭하면, 입력된 댓글을 `#commentList`에 추가합니다. 댓글을 추가한 후에는 입력란을 비워 사용자가 새로운 댓글을 작성할 수 있게 합니다.

💡 4. 추가적인 기능

이 시스템에 몇 가지 추가적인 기능을 넣을 수 있습니다:

• 댓글 삭제: 각 댓글 옆에 삭제 버튼을 추가하여, 사용자가 댓글을 삭제할 수 있도록 구현
• 댓글 수정: 댓글을 클릭하면 수정할 수 있는 기능을 추가
• 댓글 API 통합: 서버와 연동하여 실제 댓글 데이터를 서버에 저장하고 불러오는 기능 추가

이런 기능들은 더 나은 댓글 시스템을 만들기 위한 기반이 될 수 있습니다. 이를 통해 웹 애플리케이션에서 댓글 시스템을 확장하고 개선할 수 있습니다.

🔄 5. 데이터 저장과 불러오기

실제 서비스에서는 댓글 데이터를 서버에 저장하고, 새로고침 시 서버에서 데이터를 불러오는 방식이 일반적입니다. 여기서는 댓글 데이터를 `localStorage`에 저장하여, 페이지 새로 고침 후에도 댓글 목록이 유지되도록 구현할 수 있습니다.

$(document).ready(function() {
  // 댓글 목록을 로드
  var savedComments = JSON.parse(localStorage.getItem("comments")) || [];
  savedComments.forEach(function(comment) {
    $("#commentList").append("" + comment + "");
  });

  // 댓글 남기기 버튼 클릭 시
  $("#postCommentButton").click(function() {
    var commentText = $("#commentInput").val();

    if (commentText.trim() !== "") {
      // 댓글 추가 후 로컬 스토리지에 저장
      savedComments.push(commentText);
      localStorage.setItem("comments", JSON.stringify(savedComments));

      $("#commentList").append("" + commentText + "");
      $("#commentInput").val("");
    } else {
      alert("댓글을 입력해주세요.");
    }
  });
});
  

이 코드에서는 댓글을 `localStorage`에 저장하여, 페이지를 새로 고침해도 댓글 목록이 유지됩니다. `JSON.stringify()`로 배열을 문자열로 변환하여 저장하고, `JSON.parse()`로 다시 배열로 변환하여 댓글 목록을 로드합니다.

🔗 요약

• 댓글 시스템을 구현하여 사용자 입력을 처리하고 화면에 동적으로 데이터를 반영
• jQuery를 사용하여 DOM 조작 및 이벤트 처리
• 댓글을 `localStorage`에 저장하여 페이지 새로 고침 후에도 데이터 유지