지금은 1월 11일 1시 11분이다. 뭐 그렇다고 ;;
Tistory Editor에 Quilljs를 붙였는데 생각했던 것처럼 쉽지가 않았다. 결국 나는 html이 필요하고 Quilljs의 데이터를 html로 변환해야 한다. Quilljs의 개발자는 1.0 버전에서 getHtml을 없애버렸다. 이유는 더이상 에디터 dom에 class들이 붙지 않아 innerHTML 로 깨끗한 html을 얻을 수 있기 때문이라고 한다. 그런데 code-block 같은 경우는 내가 원하는 <pre><code>가 아니라 <pre>로만 만들어진다. 거기다 syntax highlight를 하면 그 부분은 완전히 변형된다. 거의 쓸 수 없는 수준이다.
한동안 찾아다녔다. getContents를 통해서 얻은 Delta를 html로 변환하는 것을 누군가는 만들어뒀겠지 하며 찾았다. 그런데 없다. code-block를 대응한 것을 찾지 못했다. 아마도 대부분의 경우 innerHTML로 충분했던 것 같다. 아무래도 직접 만들어야 할 것 같았다. 그래서 시작했다.
delta-to-html
사실 javascript로 모듈을 제작해 본 경험이 없다. 그래서 다른 모듈을 참고해서 시작했다. 테스트, 커버리지 같은 것들을 먼저 세팅했다.
테스트는 mocha가 유명한 것 같은데 참고한 모듈이 jasmine을 사용해서 나도 jasmine을 사용해보기로 했다. ci 서비스는 이전에 circleci를 써봤으니 이번엔 travis-ci를 사용하기로 했다. coverage는 가능하다는 것을 이번 기회에 알았다. github에 연동된 coveralls라는 서비스도 있는 마당에 이런 걸 처음 알다니 ㅠㅠ 앞으로 놀지 않고 공부많이 해야겠다는 생각이 들었다.
이렇게 세팅을 하고보니 TDD가 가능할 것 같다. 결국 BDD로 하긴 했지만 어쨌든 스펙을 먼저 테스트로 만들고 해결을 해나가는 일을 정말 오랜 만에 해본 것 같다. 이것도 자꾸자꾸 해봐야 익숙해져서 또 하게 되는 것 같다.
완성
시행착오도 많았고, 코드가 엄청 더럽고 복잡하게 나오긴 했지만 일단은 모든 테스트를 통과하는 결과물이 나왔다. npm에 publish도 처음 해봤다. 에디터에 붙여보니 잘된다. 이제 다음 단계로 갈 차례다.
