🗣

[Gatsby] 댓글 기능 구현 - Utterances


댓글 기능을 추가하기 위해 utterances를 사용했다. 이런 서비스를 "소셜 댓글 기능"이라고 한다. 댓글을 직접 구현하지 않고 내 서비스에 삽입하면 바로 사용 가능하다.

왜 Utterances?

요놈은 깃헙의 issues를 사용해서 댓글을 생성한다. 그래서 댓글에 마크다운을 사용할 수 있다.
다른 장점으로는 가볍고, 광고도 안달리고, 공짜다. 하지만 내가 사용한 가장 큰 이유는 사용하기 쉬워서이다ㅎ.

React에서 사용법

일반 HTML에 넣는 방법은 공식 사이트를 참조하길 바란다. 요놈 사용법이 <script>로 된 코드를 원하는 곳에 넣으면 끝인데... 리액트는 XSS를 막기 때문에 다른 방법을 사용해야 한다.
useEffect를 사용해서 원하는 곳에 직접 <script> 요소를 생성해서 필요한 속성을 넣으면 된다.

1useEffect(() => {
2 const script = document.createElement('script');
3 script.src = 'https://utteranc.es/client.js';
4 script.setAttribute('repo', 'woong-jae/Blog');
5 script.setAttribute('issue-term', 'pathname');
6 script.setAttribute('theme', 'github-light');
7 script.setAttribute('crossorigin', 'anonymous');
8 script.async = true;
9
10 const comments = document.getElementById(COMMENTS_ID);
11 if (comments) comments.appendChild(script);
12
13 // This function will get called when the component unmounts
14 // To make sure we don't end up with multiple instances of the comments component
15 return () => {
16 const comments = document.getElementById(COMMENTS_ID);
17 if (comments) comments.innerHTML = '';
18 };
19}, []);

8월 18일 Update:
기존 블로그 포스트를 쿼리하는 방법은 id를 조회해서 포스트를 들고오는 방법을 사용하고 있었다. 여기서 문제점은 포스트에 변경할게 생기면 id도 변경이 돼서 기존 포스트의 URL이 변경된다... 이게 왜 문제냐면 Utterances가 URL에 연관시켜서 댓글을 만들어주는데, URL이 바뀌니까 기존 댓글들이 다 날아간다는 것이다! 하하... 그래서 slug로 불러오는 방식으로 변경했다.