안녕하세요!
블로그나 웹사이트를 운영하는 경우 댓글 시스템을 추가하는 것은 독자와 소통하고 콘텐츠를 중심으로 커뮤니티를 구축하는 좋은 방법이 될 수 있습니다. 그러나 올바른 댓글 시스템을 찾는 것은 어려움이 있습니다.. 특히 개인 정보 보호, 보안 및 사용 편의성이 우려되는 경우 더욱 그렇습니다.
오늘은 notion api를 활용해 개발중인 blog에 utterance를 활용한 댓글기능 구현에 대해 알아보도록 하겠습니다. 보통 댓글작업할때 server db나 파이어베이스 등 을 활용해서 작업하는데요, utterance라는 것을 활용하면 github issue를 마치 댓글처럼 사용할 수 있습니다.
Utterances
[Utterances_공홈]을 보면 사용방법에 대해 자세하게 알려져 있습니다.
utterance는 GitHub 문제를 댓글 저장 및 관리를 위한 백엔드로 사용하는 간단한 오픈 소스 댓글 시스템입니다. 이번 포스팅에서는 스크립트를 사용하여 React 앱에 Utterances 주석 시스템을 추가하는 방법을 소개할 예정입니다!
Utterances 사용해보기!
1단계: GitHub 리포지토리 생성
Utterances를 사용하려면 웹 사이트 또는 블로그에 대한 공용 GitHub 리포지토리를 만들어야 합니다. 웹 사이트의 각 페이지 또는 게시물에는 저장소에 해당 문제가 있으므로 저장소에 문제가 활성화되어 있는지 확인해야합니다.
2단계: 반응 구성 요소 만들기
React 앱에서 페이지 또는 게시물에 대한 새 구성 요소를 만듭니다. useEffect hook을 사용하여 Utterances 스크립트를 DOM에 추가합니다.
import { useEffect } from 'react'; function Post() { useEffect(() => { const script = document.createElement('script'); script.setAttribute('src', 'https://utteranc.es/client.js'); script.setAttribute('crossorigin', 'anonymous'); script.setAttribute('async', true); script.setAttribute('repo', 'myusername/mywebsite-comments'); script.setAttribute('issue-term', 'pathname'); script.setAttribute('theme', 'github-light'); document.body.appendChild(script); }, []); return ( <div> <h1>My Awesome Post</h1> <p>Welcome to my post! Here's some content...</p> <div id="utterances-container" /> </div> ); }
이 코드에서는
useEffect 를 사용하여 새 script 요소를 만들고 Utterances 스크립트에 필요한 속성을 설정하고 문서의 body에 추가합니다.또한 댓글을 표시하는 데 사용될
utterances-container의 id를 사용하여 빈 div를 렌더링하고 있습니다.3단계: Utterances 스크립트 사용자 지정
repo 속성은 GitHub 리포지토리의 사용자 이름/repo-name으로 설정되어야 하며 issue-term
속성은 pathname 으로 설정되어야 합니다. theme 속성을 설정하여 댓글 시스템의 테마를 사용자 정의할 수도 있습니다.4단계: 구성 요소 추가
마지막으로
Post 구성 요소를 React 앱에 추가하고 테스트해볼 수 있습니다.function App() { return ( <div> <Post /> </div> ); }
이제 끝입니다! 스크립트를 사용하여 React 앱에 Utterances 주석 시스템을 성공적으로 추가했습니다.
Utterances를 사용하면 기존 GitHub 문제 시스템을 활용하여 안전하고 사용하기 쉽고 사용자 지정 가능한 방식으로 웹 사이트 또는 블로그에 댓글 시스템을 추가할 수 있습니다.
Utterances에 darkmode, lightmode 추가하기
우리는 next를 사용하고 있으며, theme에 따라 darkmode, lightmode 를 구분하게 할 것입니다.
"use client"; import { useEffect } from "react"; import { CONFIG } from "../../../site.config"; import { useTheme } from "next-themes"; type Props = { issueTerm: string; }; export default function Utterances({ issueTerm }: Props) { const { systemTheme, theme } = useTheme(); const currentTheme = theme === "system" ? systemTheme : theme; useEffect(() => { const theme = currentTheme === "dark" ? "github-dark" : "github-light"; // 'github-dark' const script = document.createElement("script"); const anchor = document.getElementById("comments"); if (!anchor) return; script.setAttribute("src", "https://utteranc.es/client.js"); script.setAttribute("crossorigin", "anonymous"); script.setAttribute("async", `true`); script.setAttribute("issue-term", issueTerm); script.setAttribute("theme", theme); const config: { [key: string]: string } = CONFIG.utterances.config; Object.keys(config).forEach((key) => { script.setAttribute(key, config[key]); }); anchor.appendChild(script); return () => { anchor.innerHTML = ""; }; }); return ( <> <div id="comments" className="md:-ml-16"> <div className="utterances-container"></div> </div> </> ); }
여기서 봐야할 내용은 useTheme() 입니다. 우리는 useTheme을 통해서 시스템의 다크, 라이트 모드를 구분 그로인해 utterances의 theme을 변경해주는 것입니다.
이렇게 하면 우리는 darkmode와 lightmode를 구분할 수 있습니다.
결론
결론적으로 Utterances는 웹사이트나 블로그에 댓글 시스템을 추가할 수 있는 간단하고 오픈 소스이며 사용자 지정 가능한 방법을 제공합니다. Utterances는 GitHub 문제의 기능을 활용하여 댓글을 관리하고 구성하기 위한 안전하고 사용하기 쉬운 플랫폼을 제공합니다.
이 포스팅에 설명된 단계를 따르면 스크립트를 사용하여 쉽고 빠르게 Utterances 주석 시스템을 React, Next.js 앱에 추가할 수 있습니다. 개인 블로그를 운영하든 대규모 웹 사이트를 운영하든 Utterances는 독자와 소통하고 콘텐츠를 중심으로 커뮤니티를 구축하는 데 도움이 될 수 있습니다.
그렇다면 Utterances를 사용해 보고 웹 사이트나 블로그에서 사용자 경험을 향상시키는 데 어떻게 도움이 되는지 확인해보세요! 사용 용이성, 보안 및 사용자 지정 옵션을 갖춘 Utterances는 자신의 웹사이트나 블로그에 댓글 시스템을 추가하려는 모든 사람에게 탁월한 선택일겁니다.
이상입니다! 감사합니다 :D