[블로그 프로젝트] 4. giscus로 댓글 기능 구현하기

• 지난 글에서는 카테고리와 간단한 페이지네이션을 구현했다.
• 이번에는 giscus 라이브러리를 사용해, 간단하게 댓글 기능을 추가하는 방법에 대해 알아본다.

---

giscus란?

  Github Discussions를 사용해서 댓글 시스템을 구현할 수 있게 해주는 라이브러리다. 비슷한 것으로 유명한 utterances가 있고, giscus 또한 utterances에 강하게 영향 받았다고 언급하고 있다.

 

  둘의 차이점은, giscus가 Github Discussions를 사용하는 것에 반해 utterances는 Issues를 사용한다는 것이다. 어떤 것을 사용할까 고민했는데 댓글의 역할을 수행하는 데 issue보다는 discussion이 더 적합하다는 의견에 공감하기도 했고, 결정적으로 현재시점에서 giscus가 좀 더 활발히 관리되고 있는 것 같아 선택하게 되었다.

 

 

giscus를 블로그에 적용하기

  giscus를 적용하는 방법으로 크게 2가지가 있다. 하나는 giscus에서 제공하는 라이브러리를 사용하는 것이다. 자신의 프로젝트가 React, Vue, Svelte 등을 사용하고 있다면 간단하게 giscus를 적용할 수단으로 사용할 수 있다.

 

https://github.com/giscus/giscus-component

GitHub - giscus/giscus-component: Component library for giscus, a comment system powered by GitHub Discussions.

 

 

  두 번째 방법은 직접 giscus를 세팅하는 것이다. 직접이라고는 하나, giscus에서 엄청 간편하게 세팅을 도와주기 때문에 쉽게 추가가 가능하다. 생각보다 작업량이 적어서, 나는 굳이 라이브러리를 쓰지 않고 이 방법을 사용했다.

 

  giscus를 추가하기 전에 해야할 것은 giscus 댓글을 관리할 레포지터리를 만드는 것이다. giscus에서 사용할 레포지터리를 지정하면, 작성된 댓글은 해당 레포지터리의 discussion 탭에 작성된다. 레포지터리는 블로그 레포지터리를 그대로 써도 되고, 별도의 댓글용 레포지터리를 따로 생성해도 된다. 나는 이전까지 블로그 레포지터리를 Private으로 두고 있었고, 댓글을 따로 관리하고 싶어 새 레포지터리를 만들었다.

 

  이때 사용할 레포지터리는 아래의 사항을 준수해야 한다. 이들은 giscus 페이지에도 안내되어 있다.

 

1. 공개(Public) 레포지터리여야 한다.
2. giscus 앱이 설치되어있어야 한다.
3. 사용하려는 레포지터리의 Discussions 기능이 활성화되어있어야 한다.

 

레포지터리 설정에서 Discussions를 체크한다.

 

 

 

  레포지터리의 준비가 끝났다면 giscus를 직접 추가하기 위해서 giscus 페이지를 방문한다.

giscus 페이지

 

  설정 단락에 나오는 항목들을 채운다. 기입해야 하는 항목들은 아래와 같다.

 

1. 저장소 이름 : 댓글을 관리할 공개 저장소를 입력한다.
2. 페이지 ↔ Discussions 연결 : 블로그 각 페이지와 그 페이지의 댓글을 연결할 방법을 설정한다. 나는 페이지 경로로 연결하게 했는데, 이 경우 댓글 작성 시 댓글이 작성된 페이지의 경로가 제목인 새 Discussion이 생성된다.
3. Discussion 카테고리 : Discussion이 작성될 카테고리를 선택한다. Giscus에서 권장하는 카테고리는 Announcements.
4. 기능 : 추가하고자 하는 부가 기능을 체크한다.
5. 테마 : 원하는 테마를 설정할 수 있다.

 

  여기까지 다 채우고 나면 기입한 설정에 맞춰 giscus가 자동으로 script 태그를 생성해준다. 이것을 댓글을 넣고자 하는 부분에 사용해주면 된다.

 

  React에서 사용할 때는 이 페이지의 예시를 따랐다. 아래 코드에서 추가하는 속성은 자신의 giscus 세팅에 따라 적절히 바꾸면 된다.

import React, { useEffect, useRef, useState } from 'react';

const Comments = () => {
  const [mounted, setMounted] = useState<boolean>(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!mounted) {
      setMounted(true);
    }
  }, [mounted]);

  useEffect(() => {
    const scriptElement = document.createElement('script');
    scriptElement.setAttribute('src', 'https://giscus.app/client.js');
    scriptElement.setAttribute('data-repo', [레포지터리 이름]);
    scriptElement.setAttribute('data-repo-id', [레포지터리 id]);
    scriptElement.setAttribute('data-category', [Discussion 카테고리 이름]);
    scriptElement.setAttribute('data-category-id', [레포지터리 카테고리 id]);
    scriptElement.setAttribute('data-mapping', 'pathname');
    scriptElement.setAttribute('data-strict', '0');
    scriptElement.setAttribute('data-reactions-enabled', '1');
    scriptElement.setAttribute('data-emit-metadata', '0');
    scriptElement.setAttribute('data-input-position', 'bottom');
    scriptElement.setAttribute('data-theme', 'dark');
    scriptElement.setAttribute('data-lang', 'ko');
    scriptElement.setAttribute('data-loading', 'lazy');
    scriptElement.setAttribute('crossorigin', 'anonymous');
    scriptElement.async = true;

    ref.current?.appendChild(scriptElement);
  }, [mounted]);

  if (!mounted) return null;

  return <div ref={ref} />;
};

export default Comments;

 

  완성된 댓글 컴포넌트를 블로그 페이지에 추가 후, 테스트해보면 아래와 같이 댓글 작성과 표시가 잘 작동하는 것을 확인할 수 있다!

 

댓글 기능이 추가된 모습