[javascript] jQuery를 사용하여 댓글과 평가 기능 추가하기

01 Dec 2023

javascript

이번 포스트에서는 jQuery를 사용하여 간단한 댓글과 평가 기능을 웹 페이지에 추가하는 방법을 알아보겠습니다. 이를 통해 동적인 웹 페이지를 구현할 수 있습니다.

1. HTML 마크업 작성하기

우선, 댓글과 평가를 보여줄 HTML 마크업을 작성해야 합니다. 예를 들어, 다음과 같이 <div> 요소를 사용하여 댓글과 평가를 감싸줄 컨테이너를 만들 수 있습니다.

<div id="comments-container">
  <h2>댓글</h2>
  <ul id="comments-list">
    <!-- 여기에 동적으로 생성된 댓글이 추가될 예정입니다 -->
  </ul>
  <h2>평가</h2>
  <div id="rating-section">
    <!-- 여기에 동적으로 생성된 평가가 추가될 예정입니다 -->
  </div>
</div>

2. jQuery 로드하기

다음으로, jQuery를 로드해야 합니다. jQuery는 웹 페이지에서 동적인 조작을 쉽게 처리할 수 있는 자바스크립트 라이브러리입니다. 다음 코드를 HTML 파일의 <head> 섹션에 추가하여 jQuery를 로드할 수 있습니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

3. 댓글과 평가 추가 기능 구현하기

이제 jQuery를 사용하여 댓글과 평가 추가 기능을 구현해봅시다. 먼저, 댓글을 추가하는 기능을 만들기 위해 다음 코드를 추가합니다.

function addComment(comment) {
  // 새로운 댓글을 생성하여 #comments-list에 추가합니다.
  var $newComment = $("<li>").text(comment);
  $("#comments-list").append($newComment);
}

$("#add-comment-button").click(function() {
  // 사용자가 입력한 댓글을 가져와 addComment() 함수를 호출합니다.
  var comment = $("#comment-input").val();
  addComment(comment);
  $("#comment-input").val(""); // 입력 필드를 비웁니다.
});

위의 코드에서 addComment() 함수는 사용자 입력을 받아와 새로운 <li> 요소를 생성하고, 해당 요소를 #comments-list에 추가합니다.

다음으로, 평가를 추가하는 기능을 만들기 위해 다음 코드를 추가합니다.

function addRating(rating) {
  // 새로운 평가를 생성하여 #rating-section에 추가합니다.
  var $newRating = $("<div>").text(rating);
  $("#rating-section").append($newRating);
}

$("#add-rating-button").click(function() {
  // 사용자가 입력한 평가를 가져와 addRating() 함수를 호출합니다.
  var rating = $("#rating-input").val();
  addRating(rating);
  $("#rating-input").val(""); // 입력 필드를 비웁니다.
});

위의 코드에서 addRating() 함수는 사용자 입력을 받아와 새로운 <div> 요소를 생성하고, 해당 요소를 #rating-section에 추가합니다.

4. 테스트

이제 HTML 마크업과 JavaScript 코드가 준비되었으므로, 페이지를 테스트해볼 차례입니다. 웹 페이지를 열고, 댓글과 평가를 입력할 수 있는 입력 필드와 추가 버튼이 표시되어야 합니다. 사용자가 댓글이나 평가를 입력하고 추가 버튼을 클릭하면, 해당 내용이 동적으로 추가되어야 합니다.

간단한 예제이지만, 이를 바탕으로 댓글과 평가를 보다 복잡하게 구현하는 것도 가능합니다. jQuery를 사용하면 다양한 기능을 쉽게 추가할 수 있으므로, 필요에 따라 확장하여 개발할 수 있습니다.

이상으로 jQuery를 사용하여 댓글과 평가 기능을 추가하는 방법에 대해 알아보았습니다. 좀더 복잡한 기능을 구현해보고 싶다면 jQuery 공식 문서를 참고하시기 바랍니다.