Hexo 블로그에 서버 API를 이용하는 덧글 위젯을 직접 만들고 싶다면 참조할 수 있는 포스팅이다.
Hexo는 정적 웹 블로그를 빠르게 작성할 수 있도록 하는 데에 주요 목적이 있기 때문에, 쿼리를 통해 데이터를 가져오고 서버통신을 통해 html dom을 렌더링하는 로직에 대한 지원은 그다지 좋지 않다.
Hexo 공식 사이트에서 지원하는 플러그인, 또는 Disqus나 Utterances 와 같은 덧글 위젯이 있지만.. 이런 위젯은 커스터마이징이나 데이터 저장 방식이 유연하지 못하다는 게 사실이다.
요약해서 말하자면, 결국 개발자들의 입맞에 맞지 않기 때문에 커스텀 위젯을 만들고자 하는 것이다 ^^;;
뭘 만들 것인가?
Hexo처럼 정적 프레임워크와 같이 사용할 수 있는, 덧글 위젯을 만들려고 한다.
어떻게 만들 것인가?
Hexo와 호환되려면 어떻게 해야 할까?
Hexo는 정적 블로그형 웹페이지 제작에 최적화된 별도의 서버를 가지고 있다. 이 서버는 Hexo를 가동시킬 때 .md(마크다운) 파일을 html로 내려준다.
*문제점 : Hexo와 위젯 API서버가 다르기 때문에 크로스오리진 이슈가 발생한다.
:할 수 있는 방법
위젯 따로 구동되는 방식을 이용해야 한다. 다른 웹페이지를 볼 수 있는 iframe 태그를 이용할수도 있고, 데이터만 전송받아 Hexo 상에서 DOM을 따로 그릴 수도 있다. 데이터 교환 방식은 ajax 또는 axios를 이용할 것이다.
흐름 구상은 다음과 같다.
- Hexo에서 ajax 혹은 axios를 이용하여 데이터를 요청한다.
- api를 통해 댓글 데이터를 전송한다.
- 전송된 데이터를 받아서 Hexo상에서 HTML DOM을 직접 그린다.
..해서 다음과 같은 과정이 될 것이다.
- Hexo ajax 요청 => 위젯 API의 수신 및 응답 => Hexo ajax 응답 완료 => Hexo의 js로 DOM 렌더링
그렇다면 이제 뭘 이용해서 구현할까?
페이지를 렌더링해서 iframe하는 방식도 해봤고 데이터만 받아와서 hexo상에서 렌더링하는 방식도 해봤는데
iframe은 크로스오리진 이슈 때문에 iframe 내부의 DOM을 조작하기가 까다로워서 ajax 요청을 통해 api 서버로부터 데이터를 받아와서
Hexo 측에서 댓글 위젯을 그리는 편을 택했다.
1. Node.js Express 프레임워크로 위젯이 가동될 서버 만들기
express를 사용하여 api 서버의 틀을 잡는다.
댓글이 저장될 데이터베이스 또한 작성해야 한다.
2. 위젯 서버의 API 로직 작성하기
Node Express 서버에 기본 CRUD를 할 수 있도록 기능을 만든다.
3. Hexo ajax 요청 로직 작성
Hexo 댓글 위젯의 버튼을 누르면 ajax 또는 axios 를 통해 위에서 작성한 api에 데이터를 요청할 수 있도록 한다.
4. 댓글 DOM 렌더링 로직 작성
데이터 전송이 끝나면 추가되는 댓글 또는 삭제되는 댓글을 렌더링할 수 있도록 html DOM 렌더러를 작성한다.
5. 댓글이 갱신되는것을 확인
댓글이 잘 작성된 것을 확인할 수 있었다.
지금은 익명 댓글이지만, 로그인 위젯을 만들어 놓으면 api 서버로부터 세션검증을 통해 유저검증을 하는 것도 가능할 것 같다.