댓글 기능 추가하기 — Disqus, GitHub Discussion, 자체 API

블로그는 글을 쓰는 것도 중요하지만, 소통이 있어야 살아있는 공간이 됩니다.
방명록처럼 “잘 봤어요!”라는 댓글 하나도 글쓴이에겐 큰 힘이 되죠.

이번 글에서는 댓글 기능을 구현하는 세 가지 방식:

• ① Disqus: 가장 대중적인 외부 댓글 위젯
• ② GitHub Discussion: 깃헙 계정을 이용한 댓글 연동
• ③ 자체 API: 직접 구축하는 댓글 저장/조회 시스템

---

① Disqus 연동하기 (가장 쉬운 방법)

Disqus는 외부 댓글 위젯을 HTML에 삽입하는 방식입니다.

1. Disqus 사이트에서 회원가입 및 사이트 등록
2. shortname 확인 (예: myblog-123)
3. 다음 스크립트를 포스트 페이지에 삽입

import { DiscussionEmbed } from 'disqus-react';

export default function Post({ postData }) {
  const disqusConfig = {
    url: `https://yourblog.com/posts/${postData.slug}`,
    identifier: postData.slug,
    title: postData.title,
  };

  return (
    <div className="mt-12">
      <DiscussionEmbed shortname="your-shortname" config={disqusConfig} />
    </div>
  );
}

Disqus는 손쉽지만, 광고가 포함될 수 있고 느릴 수 있어요.

---

② GitHub Discussion 활용하기

GitHub Discussion을 블로그 댓글창처럼 연동할 수 있어요. 이는 댓글을 깃헙 이슈나 토론으로 연결하는 방식입니다.

1. 블로그용 GitHub 레포지토리의 Discussions 활성화
2. 각 포스트에 대해 Discussion Thread 생성 (자동화 스크립트 가능)
3. 다음과 같이 링크 삽입 또는 utterances 위젯 사용

<script
  src="https://utteranc.es/client.js"
  repo="yourusername/yourblog"
  issue-term="pathname"
  label="💬 comments"
  theme="github-light"
  crossorigin="anonymous"
  async
/>

장점: 깃헙 계정으로 댓글 작성, 이슈 기반으로 관리 쉬움
단점: 깃헙 로그인 필요, GitHub UI에 종속됨

---

③ 자체 API로 댓글 시스템 구축하기

가장 유연한 방식은 내가 직접 댓글을 저장하고 관리하는 API를 만드는 거예요.

1) 댓글 모델 예시

interface Comment {
  id: string;
  postSlug: string;
  author: string;
  content: string;
  createdAt: string;
}

2) API Routes 만들기

// pages/api/comments.ts
let comments: Comment[] = [];

export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json(comments.filter(c => c.postSlug === req.query.slug));
  } else if (req.method === 'POST') {
    const { author, content, postSlug } = req.body;
    const newComment = {
      id: Date.now().toString(),
      postSlug,
      author,
      content,
      createdAt: new Date().toISOString()
    };
    comments.push(newComment);
    res.status(200).json(newComment);
  } else {
    res.status(405).end();
  }
}

3) 클라이언트에서 댓글 입력/조회

const [comments, setComments] = useState([]);
const [newComment, setNewComment] = useState("");

useEffect(() => {
  fetch(`/api/comments?slug=${slug}`)
    .then(res => res.json())
    .then(setComments);
}, []);

const submitComment = async () => {
  await fetch('/api/comments', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      author: "익명",
      content: newComment,
      postSlug: slug,
    })
  });
};

장점: 자유도 최고, 로그인 없이도 작성 가능
단점: DB와 백엔드 관리 필요, 스팸 방지 시스템 필요

---

✅ 마무리하며

댓글 기능은 블로그를 “일방향 글쓰기”에서 “양방향 소통의 공간”으로 바꿔줍니다.

단순한 기능 같지만, 글쓴이에게는 가장 소중한 피드백이죠.

“댓글 하나로 이어지는 개발자들의 연결.”