Day 5 - shiki 제거, MDX 모듈화, 그리고 대량 포스팅

코드 블럭에 shiki를 쓰고 있었는데, 이게 내부적으로 WASM을 로딩하고 eval 같은 위험 요소가 있었다. 그래서 rehype-prism-plus로 교체했다. CSS 기반 하이라이팅이라 빌드 타임에 처리되고, 런타임 부담도 없다.

gray-matter 라이브러리를 직접 구현해서 제거했다. YAML frontmatter 파싱 정도는 직접 해도 충분하고, 의존성 하나 줄이는 게 번들에도 좋으니까.

그리고 next-mdx-remote의 eval 위험을 해소하기 위해 MDX를 JS 모듈로 빌드타임에 컴파일하는 방식으로 변경했다. 빌드 스크립트(generate-content-tree.ts)가 대폭 수정됐고, content-types도 새로 정의했다. reading-time 유틸도 추가.

리팩터링 후에 하이드레이션 에러가 터졌다. 마운트 시기를 조절해서 해결했는데, 그 직후 무한 루프 문제가 또 발생. useEffect 의존성 배열을 잘못 넣어서 생긴 문제였다. 커밋 로그를 보면 refactor → fix → fix가 연달아 있는데, 전형적인 리팩터링 후폭풍.

포스트 디테일 페이지에서 Ctrl+F 같은 페이지 내 검색 기능을 추가했다. 헤더에 검색 버튼을 넣어서 트리거하는 방식.

MDX에서 테이블을 쓸 일이 많을 것 같아서 ArticleTable 디자인시스템 컴포넌트를 구현했다. MdxRenderer에도 매핑해서 마크다운 테이블 문법을 쓰면 자동으로 스타일이 적용되게 했다.