TistoryEditor를 만들기 위해서는 html to markdown, markdown to html 변환을 해야한다. tistory api에서 당연하게도 content를 html로 주기 때문이다. 그래서 수정을 하려고 할때는 markdown으로 변환하고 다시 저장할 때는 html로 변환해야한다.
makrdown to html
markdown을 html로 변환하는 것은 수요가 많기도 하겠고, markdown의 규칙이 그리 어렵지 않아서 그런지 많은 라이브러리가 있다. 그 중에 제일 사용자가 많아보이는 marked를 사용하기로 했다. 이전에 티스토리에 markdown으로 글쓰려고 만든 툴에서도 이걸 쓰기도 했고 benchmark에서 가장 빠르다고 한다. (더 빠른 것으로 보이는 robotskirt는 C로 만든 node module이다. 브라우저에서 쓸 수 없다.)
html to markdown
html을 markdown으로 변환하는 것은 수요가 없어서 그런지 라이브러리가 그리 많지는 않았다. 그 중에 제일 간단하고 쓸만해보이는 to-markdown를 사용하기로 했다. 일단 동작하는데에는 문제가 없다. 내가 주로 쓰는 스타일과 다른 형태의 마크다운을 만들어주긴 하지만 상관없었다.
to-markdown은 node도 커버하려다보니 jsdom이라는 document를 흉내내는 라이브러리를 쓴다. 난 역시 이걸 브라우저에서 쓸거라서 jsdom은 필요없다. 하지만 to-markdown의 코드안에서 사용하는 부분이 있기 때문에 webpack이 같이 패키징한다. 이 때문에 webpack이 결과물을 만들어낼 때마다 난 이런 걸 봐야했다.
jsdom를 로드하지말자
모든 원흉은 jsdom이니 이걸 없애야 한다. 역시 나만 이런 생각을 하는 건 아니었다. 찾아본 문서에는 webpack.IngorePlugin을 통해서 없애는 방법을 알려줬다. 근데 그렇게 하면 to-markdown 자체를 쓸 수 없는 상태가 되었다. 아마도 jsdom 자체를 로드하지 않는 것 같다. 그럼 당연히 to-markdown에서 오류가 발생할테니 아예 빼버린 것 같다.
다른 방법을 찾아야한다. 최악의 경우 to-markdown을 고칠 생각으로 jsdom을 어디에서 쓰는지 찾아봤다. 찾아보니 document가 undefined인 경우에만 사용된다. 브라우저에서는 당연히 저런 경우가 없다. 이런 식으로 사용된 경우엔 코드를 수정하거나 jsdom을 require할때 실제 jsdom대신 다른걸 주도록 하면 될 것 같았다. 문득 cdn으로 미리 로드한 녀석들 require할때 사용한 방법이 생각났다.
externals: {
"jsdom": {}
}
아주 간단한 방법이다. webpack에 externals로 저렇게 설정해두면 require할때 module을 로드하는 대신 저 값을 할당한다. 이걸 했더니 to-markdown도 잘 동작하고 오류도 없어졌고 패키지된 js파일도 용량이 절반으로 줄어들었다.
기쁘다. 좋다. 크리스마스 선물받은 기분이다. 이제 다음 스텝으로 후련히 갈 수 있겠다.
