Disqus API로 블로그에 댓글 기능을 추가하기!

이번 포스팅에서는 Disqus API로 포스트에 댓글 기능을 추가하는 방법에 대해 이야기할 것이다!

내 블로그는 Gatsby로 만들었기 때문에 동적인 기능을 할 수 없다..(하려면 하겠지만 많이 복잡하겠지..?)

그래서 댓글 기능을 지원해주는 서비스를 찾아보았는데, 역시 대부분이 사용하는 Disqus를 사용하기로 했다.

Disqus는 SaaS형 댓글 호스팅 서비스이다.

여러 가지 언어, 프레임워크에 간단하게 삽입하여 각 포스트에 댓글 기능을 추가할 수 있다.

Disqus를 추가하기 위해 우선 Gatsby에서 Disqus와 관련된 모듈이 있는지 먼저 찾아보았다.

아니나 다를까 역시 존재했다.. Gatsby 짱짱! 👍👍

gatsby-plugin-disqus

먼저, 짧게 정리를 해보자면 Disqus에 가입하고 관련 모듈을 설치한 후, Post Component에 Disqus Component를 추가해주면 된다.

Disqus 회원가입 먼저 진행하자!

회원가입과 블로그 등록은 매우 쉬워서 생략하겠다! 가장 중요한 것은 위 사진의 Shortname을 기억하는 것이다.

다음으로, yarn add gatsby-plugin-disqus 커맨드로 Disqus 관련 모듈을 설치해준다.

gatsby-config.js파일로 이동해서 아래의 코드를 추가해준다!

(나의 경우에는 shortname: 'binary01'를 추가했다.)

{
  resolve: 'gatsby-plugin-disqus',
  options: {
    shortname: 'binary01'
  }
},

마지막으로 포스팅을 담당하는 Component로 이동하자.

import { Disqus } from 'gatsby-plugin-disqus';

...

const Post = ({ post }: Props) => {
    
  ...

  let disqusConfig = {
    identifier: post.id,
    title: post.title,
  };

  return (

  ...

      <div className={styles['post__comments']}>
        <Disqus config={disqusConfig} />
      </div>
  )
};

Disqus와 관련된 코드는 위의 코드가 끝이다.

모듈에서 Disqus Component를 불러오고, 각 post(Gatsby로 만들었다면 post Props는 아마 거의 다 있을 것이다..)의 id, title을 disqusConfig에 맵핑하자!

Disqus쪽에서 어떤 post가 어떤 댓글을 가지고 있는지 알기 위한 작업이다.

이제 Disqus Component를 원하는 위치에 삽입해주면 끝이다!

짜잔! 원하던 결과대로 포스트에 댓글 달기 기능이 추가되었다.

Let’s Encrypt를 활용하여 http를 https로 전환하는 방법도 다루려 했지만, 생각보다 글이 길었다..

너무 길면 가독성이 떨어질 거 같아 Let’s Encrypt는 다음 포스팅에서 다루겠다!

안뇽 ~~ 😜😜