[hotamul] github 댓글 기능 (utterances, Vue.js)

share-blog 프로젝트는 협업 목적으로 만들고 있기 때문에 github과 연동해서 code 인용이나 참조를 쉽게 할 수 있어야 한다.

따라서 댓글 기능을 utterances를 이용해 구현했다.

...
<!-- Comments section-->
<div id="utte-comment" class="mb-5"></div>
...

원하는 위치에 id="utte-comment"인 태그를 만들고 Vue.js 코드에서는 다음과 같이 처리했다.

 mounted() {
   console.log("mounted()...");
   let script = document.createElement("script");
   script.setAttribute("src", "https://utteranc.es/client.js");
   script.setAttribute("issue-term", "pathname");
   script.setAttribute("repo", "toughhyeok/share-blog-comment");
   script.setAttribute("theme", "github-light");
   script.setAttribute("crossorigin", "anonymous");
   script.async = true;
   const element = document.getElementById("utte-comment");
   element.appendChild(script);
 },

mounted()에서 <script>태그를 <div id="utte-comment"> 태그 아래 추가하는 이유는 created() lifecycle에서 document.getElementById("utte-comment") 코드가 실행되었을 때 해당 id의 element를 가져오지 못하는 문제 때문이었다. (created()에 해당 코드를 작성했을 때 undefined에는 appendChild 메소드가 없다는 error가 발생되었다.)

 

utterances 적용된 모습