Promise를 사용한 댓글 기능 개발

13 Sep 2023

Promise

댓글 기능은 웹 애플리케이션에서 사용자들이 내용에 대한 의견을 나누고 토론할 수 있는 중요한 기능입니다. 이번에는 Promise를 사용하여 간단한 댓글 기능을 개발하는 방법에 대해 알아보겠습니다.

1. 프론트엔드 개발

댓글을 작성하고 보여주기 위해서는 프론트엔드에서 사용자와의 상호작용을 처리해야 합니다. 예를 들어, 사용자가 댓글을 입력하고 제출하는 경우, 해당 내용을 서버로 전송하고 댓글 목록을 다시 불러와야 합니다.

// 댓글 작성하기
const submitComment = (comment) => {
  // 서버로 댓글 전송하는 API 호출
  return fetch('/api/comments', {
    method: 'POST',
    body: JSON.stringify(comment),
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(response => {
    // 응답 결과를 Promise로 반환
    return response.json();
  }).then(data => {
    // 서버에서 반환된 데이터 처리
    console.log(data);
  }).catch(error => {
    console.error('댓글 작성 중 오류 발생:', error);
  });
};

// 댓글 목록 불러오기
const fetchComments = () => {
  // 서버로 댓글 목록을 요청하는 API 호출
  return fetch('/api/comments')
    .then(response => {
      // 응답 결과를 Promise로 반환
      return response.json();
    })
    .then(data => {
      // 서버에서 반환된 댓글 목록 처리
      console.log(data);
    })
    .catch(error => {
      console.error('댓글 목록 로드 중 오류 발생:', error);
    });
};

// 댓글 작성 및 불러오기 처리
submitComment({ content: '안녕하세요!' })
  .then(() => {
    // 댓글 작성 후 댓글 목록을 다시 불러옴
    return fetchComments();
  })
  .catch(error => {
    console.error('댓글 작성 및 불러오기 중 오류 발생:', error);
  });

위의 코드에서는 submitComment 함수로 사용자가 작성한 댓글을 서버로 전송하고, fetchComments 함수로 댓글 목록을 서버로부터 받아옵니다. Promise를 사용하여 비동기 작업을 처리하고, 작업이 완료되면 다음 작업을 연결합니다.

2. 백엔드 개발

프론트엔드에서 댓글을 작성하고 불러오는 기능을 개발했으니 이제 해당 기능을 처리할 백엔드 API를 개발해야 합니다. 사용하는 백엔드 프레임워크에 따라 구현 방법이 달라질 수 있으며, 아래는 간단한 Express.js 기반의 예시입니다.

const express = require('express');
const app = express();
const port = 3000;

let comments = [];

// 댓글 작성 API
app.post('/api/comments', (req, res) => {
  const comment = req.body;

  // 댓글 목록에 추가
  comments.push(comment);

  // 성공 응답
  res.status(201).json({ message: '댓글이 작성되었습니다.' });
});

// 댓글 목록 조회 API
app.get('/api/comments', (req, res) => {
  // 댓글 목록 응답
  res.json(comments);
});

// 서버 시작
app.listen(port, () => {
  console.log(`서버가 http://localhost:${port} 에서 작동 중입니다.`);
});

위의 코드에서는 Express.js를 사용하여 /api/comments 로 요청이 오면 적절한 핸들러를 실행하고, 댓글 데이터를 메모리에 저장하여 목록을 유지합니다.

결론

Promise를 사용하여 프론트엔드와 백엔드에서 댓글 작성 및 불러오기 기능을 개발하는 방법에 대해 알아보았습니다. 프론트엔드에서는 사용자의 댓글을 서버로 전송하고, 백엔드에서는 해당 댓글을 저장하고 응답하는 API를 구현합니다. Promise를 사용하여 비동기 작업을 처리하고, 댓글 작성 후 댓글 목록을 다시 불러오는 흐름을 구성합니다.

#WebDevelopment #Promise #댓글기능