기존에는 개인 DB를 사용하고 직접 댓글 및 대댓글 기능을 구현하여 블로그에 적용시켰는데 몇가지 불편한점들이 있어 utterances를 사용해 새로운 댓글 기능을 제작하려고합니다.

 

## 🔮 utterances 란?

**utterances**는 github issues를 기반으로 블로그에 댓글을 달 수 있도록 지원해주는 오픈소스 위젯입니다.
**utterances** 위젯에 댓글을 입력하면 지정된 github 저장소에 포스트 정보(pathname, url 등)와 관련된 issue가 등록되고 등록된 issue를 읽어 위젯에 댓글로 나타납니다.

 

## 🙄 utterances 를 사용하는 이유

* **댓글 기능을 쉽고 빠르게 구현할 수 있어요.**
 댓글을 기능을 구현하기 위해 회원, 댓글 관련 DB와 관련 기능을 구현하지 않아도 위젯만 연결하면 사용할 수 있어요.

* **블로그 방문자가 댓글을 달기 쉬워요.**
 블로그 방문자가 회원가입을 하지 않아도 github 아이디만 있다면 쉽게 댓글을 달 수 있어요.

* **알림을 보내줘요.**
 github 계정과 연결된 이메일로 댓글과 관련된 알림을 보내줘요.

* **Markdown 문법을 사용할 수 있어요.**

 


## 🤔 utterances 적용 방법
먼저 github에 댓글 저장소로 사용할 repository를 생성해줍니다.
저는 블로그 댓글 기능으로 사용하기 때문에 'chanstory-comments'라는 repository를 생성했습니다.
 
다음으로 repository에 utterances.json 파일을 만든 뒤 블로그의 도메인을 입력해주세요.
```ts
// utterances.json
{
 "origins": ["https://chanstory.dev"]
}
```

 
json 파일 생성까지 완료했다면 [https://github.com/apps/utterances](https://github.com/apps/utterances)에 접속해서 utterances를 설치하고 생성한 저장소에 연결해주세요.
 
연결을 완료했다면 [utteranc.es](utteranc.es)에 접속해서 다음 작업을 진행해주세요.
 

**1. repository를 연결해주세요.**

![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/81b47547-319e-422a-0de9-92f51b00e400/public)

생성했던 repository를 입력해주세요.

 

**2. 어떻게 issue를 남길지 선택해주세요.**

![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/c555d726-f992-4ca2-b0b7-75396d3dd000/public)

블로그 포스트와 github issue를 맵핑할 방식을 선택해주세요.
pathname, url, title 등 원하는 선택지를 골라주세요.

 

**3. 라벨, 테마 등을 선택하고 완성된 코드를 복사하세요.**

![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/7b1c6f1f-69b8-442d-3b9e-f7fa8a08d100/public)

라벨, 테마 등의 선택을 마치면 위의 과정을 통해 설정된 내용들로 만들어진 스크립트 코드가 생성됩니다. 해당 스크립트를 복사한 뒤 댓글 컴포넌트가 필요한 부분에 붙여넣으면 완료됩니다.
그런데 react 환경에서는 utterances를 사용하려면 조금 다른 방식으로 사용해야합니다.

 

## 😁 React 환경에서 utterances 사용하기
react 환경에서 스크립트를 불러오면 초기 렌더링 했을 때 UI와 script로 불러온 utterances UI와의 차이로 오류가 발생하기 때문에 아래와 같은 방식으로 스크립트를 입력해야합니다.
```ts
// comment.tsx
import { useEffect, useRef } from "react";

export default function Comment() {
 const commentsEl = useRef<HTMLDivElement>(null);

 useEffect(() => {
 const scriptEl = document.createElement("script");
 scriptEl.async = true;
 scriptEl.src = "https://utteranc.es/client.js";
 scriptEl.setAttribute("repo", "sancy1003/chanstory-comments");
 scriptEl.setAttribute("issue-term", "pathname");
 scriptEl.setAttribute("theme", "github-light");
 scriptEl.setAttribute("crossorigin", "anonymous");
 commentsEl.current?.appendChild(scriptEl);
 }, []);

 return (
 <div>
 <div ref={commentsEl} />
 </div>
 );
}
```

 
위와 같이 댓글 컴포넌트를 생성하여 사용하면 정상 작동 하는 것을 확인할 수 있습니다!

기존에는 개인 DB를 사용하고 직접 댓글 및 대댓글 기능을 구현하여 블로그에 적용시켰는데 몇가지 불편한점들이 있어 utterances를 사용해 새로운 댓글 기능을 제작하려고합니다.

 

## 🔮 u

react 환경에서 utterances를 사용해 댓글 기능 제작하기