Colin's Blog
자바스크립트 fetch API를 사용한 댓글 시스템 구현

댓글 시스템은 많은 웹 애플리케이션에서 필요한 기능 중 하나입니다. 사용자들이 게시물에 대한 의견을 남기고, 상호작용할 수 있는 기능을 제공합니다. 이번 블로그 포스트에서는 자바스크립트의 fetch API를 사용하여 간단한 댓글 시스템을 구현하는 방법에 대해 알아보겠습니다.

Fetch API란?

Fetch API는 브라우저에서 제공하는 웹 요청에 사용되는 인터페이스입니다. 이 API를 사용하여 서버로 데이터를 전송하고, 서버로부터 데이터를 가져올 수 있습니다. 댓글 시스템에서는 POST 요청을 이용하여 새로운 댓글을 작성하고, GET 요청을 이용하여 기존 댓글을 가져올 수 있습니다.

기능 명세

이번에 구현할 댓글 시스템은 다음의 기능을 제공할 것입니다:

코드 예시

1. 새로운 댓글 작성

const submitComment = async (comment) => {
  try {
    const response = await fetch('/api/comments', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ comment }),
    });

    if (response.ok) {
      console.log('댓글이 작성되었습니다.');
      // 댓글 작성 후 처리할 로직 추가
    } else {
      console.error('댓글 작성 실패');
      // 댓글 작성 실패 처리할 로직 추가
    }
  } catch (error) {
    console.error('오류 발생:', error);
    // 오류 발생 시 처리할 로직 추가
  }
};

2. 기존 댓글 조회

const getComments = async () => {
  try {
    const response = await fetch('/api/comments');
    if (response.ok) {
      const comments = await response.json();
      console.log('기존 댓글: ', comments);
      // 댓글 조회 후 처리할 로직 추가
    } else {
      console.error('댓글 조회 실패');
      // 댓글 조회 실패 처리할 로직 추가
    }
  } catch (error) {
    console.error('오류 발생:', error);
    // 오류 발생 시 처리할 로직 추가
  }
};

3. 댓글 삭제

const deleteComment = async (commentId) => {
  try {
    const response = await fetch(`/api/comments/${commentId}`, {
      method: 'DELETE',
    });
    if (response.ok) {
      console.log('댓글이 삭제되었습니다.');
      // 댓글 삭제 후 처리할 로직 추가
    } else {
      console.error('댓글 삭제 실패');
      // 댓글 삭제 실패 처리할 로직 추가
    }
  } catch (error) {
    console.error('오류 발생:', error);
    // 오류 발생 시 처리할 로직 추가
  }
};

위의 코드는 각각 새로운 댓글 작성, 기존 댓글 조회, 댓글 삭제에 대한 예시입니다. fetch 함수를 사용하여 API 요청을 보내고, await 키워드를 사용하여 응답을 기다립니다. 성공적인 응답의 경우 response.ok 를 확인하여 적절한 로직을 실행합니다.

결론

이번 포스트에서는 자바스크립트의 fetch API를 사용하여 간단한 댓글 시스템을 구현하는 방법에 대해 알아보았습니다. fetch API는 웹 애플리케이션에서 서버와의 통신을 간단하게 처리할 수 있는 강력한 도구입니다. 이를 통해 사용자와의 상호작용이 가능한 동적인 웹 애플리케이션을 구현할 수 있습니다. 자세한 내용은 공식 MDN 문서를 참고하시기 바랍니다.

© 2018 Colin. All rights reserved.