마크다운 프리뷰, 직접 짜다가 라이브러리로 갈아탐

🤖 797 in / 995 out / 1792 total tokens

에디터 페이지에서 쓰던 regex 기반 renderMarkdown 함수를 걷어내고 react-markdown 기반의 MarkdownPreview 컴포넌트로 교체했다. 순수 정규식으로 마크다운을 파싱하려니 엣지 케이스가 끝도 없었고, 코드 블록 안에서 이스케이프 처리하다가 머리가 아팠다.

react-markdown에 rehype-highlight로 코드 신택스 하이라이팅, remark-gfm으로 테이블과 체크리스트 같은 GFM 문법까지 지원하게 했다. 의존성이 세 개나 늘었지만, 직접 구현하려면 깊어지는 늪을 생각하면 싼거다.

import MarkdownPreview from "../../components/MarkdownPreview";
 
// 예전엔 renderMarkdown(content)로 문자열 처리
// 이젠 <MarkdownPreview content={content} /> 로 깔끔하게

에디터 페이지 코드가 26줄이나 줄었다. 바퀴를 다시 발명하려는 충동을 잘 참았다. 마크다운 파싱은 이미 훌륭한 바퀴가 많으니 굳이 새로 만들 필요 없다.