자바스크립트에서 JSON 데이터를 이용하여 댓글 기능 생성하기

15 Sep 2023

javascript

댓글 기능은 웹 사이트나 앱에서 사용자간의 소통을 촉진하는 중요한 기능 중 하나입니다. 이번 블로그 포스트에서는 자바스크립트와 JSON 데이터를 이용하여 간단한 댓글 기능을 생성하는 방법에 대해 알아보겠습니다.

JSON 데이터 구조 설계하기

첫 번째로 해야 할 일은 댓글을 저장하기 위한 JSON 데이터 구조를 설계하는 것입니다. 일반적으로 댓글은 사용자 이름, 내용, 작성 시간 등의 정보를 포함합니다. 따라서 다음과 같은 구조로 JSON 데이터를 설계할 수 있습니다:

{
  "comments": [
    {
      "name": "사용자1",
      "content": "댓글 내용1",
      "timestamp": "2022-01-01 12:00:00"
    },
    {
      "name": "사용자2",
      "content": "댓글 내용2",
      "timestamp": "2022-01-02 09:30:00"
    },
    ...
  ]
}

JSON 데이터 불러오기

다음으로 할 일은 댓글을 불러와서 화면에 표시하는 것입니다. 이를 위해 fetch 함수를 사용하여 JSON 데이터를 가져올 수 있습니다:

fetch('댓글.json')
  .then(response => response.json())
  .then(data => {
    // 댓글 데이터를 화면에 표시하는 코드 작성
  });

위의 코드에서 '댓글.json'은 JSON 데이터가 위치한 파일의 경로입니다. 이 경로를 알맞게 수정하여 사용하세요.

댓글 데이터 화면에 표시하기

JSON 데이터를 가져온 다음에는 해당 데이터를 화면에 표시해야 합니다. 이를 위해 HTML 요소를 동적으로 생성하여 데이터를 추가할 수 있습니다. 예를 들어, 다음과 같은 HTML 코드를 사용하여 댓글을 표시할 수 있습니다:

<div id="comment-container"></div>

자바스크립트 코드에서는 comment-container 요소를 찾아 댓글 데이터를 추가할 수 있습니다:

const commentContainer = document.getElementById('comment-container');

data.comments.forEach(comment => {
  const commentElement = document.createElement('div');
  commentElement.innerHTML = `
    <p>${comment.name}</p>
    <p>${comment.content}</p>
    <p>${comment.timestamp}</p>
  `;

  commentContainer.appendChild(commentElement);
});

댓글 추가 기능 구현하기

마지막으로 사용자가 댓글을 작성하고 추가할 수 있는 기능을 구현해야 합니다. 이를 위해 폼 요소와 버튼을 사용하여 사용자 입력을 받을 수 있습니다. 예를 들어, 다음과 같은 HTML 코드를 사용하여 댓글 입력 폼을 생성할 수 있습니다:

<input type="text" id="name-input" placeholder="이름">
<textarea id="content-input" placeholder="댓글 내용"></textarea>
<button id="add-comment-button">댓글 추가</button>

자바스크립트 코드에서는 add-comment-button 버튼을 클릭할 때 입력된 댓글을 JSON 데이터에 추가할 수 있습니다:

const addButton = document.getElementById('add-comment-button');
addButton.addEventListener('click', () => {
  const nameInput = document.getElementById('name-input');
  const contentInput = document.getElementById('content-input');

  const newComment = {
    name: nameInput.value,
    content: contentInput.value,
    timestamp: new Date().toISOString()
  };

  data.comments.push(newComment);
  // JSON 데이터를 서버에 업데이트하는 코드 작성

  // 화면에 새로운 댓글 추가하기
  const commentElement = document.createElement('div');
  commentElement.innerHTML = `
    <p>${newComment.name}</p>
    <p>${newComment.content}</p>
    <p>${newComment.timestamp}</p>
  `;

  commentContainer.appendChild(commentElement);

  // 입력 폼 초기화
  nameInput.value = '';
  contentInput.value = '';
});

위의 코드에서는 새로운 댓글을 JSON 데이터에 추가한 다음, 서버에 업데이트하는 부분은 생략되어 있습니다. 실제 애플리케이션에서는 서버와의 통신을 통해 JSON 데이터를 업데이트하는 로직을 작성해야 합니다.

마무리

이제 자바스크립트와 JSON 데이터를 활용하여 간단한 댓글 기능을 생성하는 방법에 대해 알아보았습니다. 이를 통해 웹 사이트나 앱에 댓글 기능을 추가하고 사용자간의 소통을 촉진할 수 있습니다.

#javascript #JSON #댓글 #프로그래밍