SEO Jing
Day 12 - 테스트 커버리지 개선, 모바일 프레젠테이션 버그 2건.
SEO Jing 개발 열두째 날. code-block 테스트 14개 추가로 커버리지 대폭 개선, 모바일 프레젠테이션에서 FullscreenView 방향 전환 문제와 스크롤 멈춤 버그 수정.
코드 블럭에 shiki를 쓰고 있었는데, 이게 내부적으로 WASM을 로딩하고 eval 같은
위험 요소가 있었다. 그래서 rehype-prism-plus로 교체했다. CSS 기반
하이라이팅이라 빌드 타임에 처리되고, 런타임 부담도 없다.
WASM shiki RSC 이슈
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에도 매핑해서 마크다운 테이블 문법을 쓰면 자동으로
스타일이 적용되게 했다.
그리고 드디어 노션에 정리해둔 글들을 MDX로 변환해서 포스팅했다.
vinext GitHub Actions 배포
Cloudflare Workers fs 이슈
WASM shiki RSC 이슈
useSyncExternalStore 하이드레이션
CLI한테 노션 MCP로 변환 시키고 검수하는 방식으로 진행했는데, 생각보다 괜찮았다.
최근 읽은 글 디자인을 정리하고, 앵커 디자인도 수정했다. README도 업데이트하면서 블로그 링크를 넣었는데, GitHub 마크다운 링크 포맷팅이 자꾸 깨져서 5번이나 수정함. 이건 진짜 부끄러운 커밋 히스토리다.
Post Q&A
Day 5 - shiki 제거, MDX 모듈화, 그리고 대량 포스팅 전체를 기준으로 질문과 피드백을 받아요.답을 본 뒤에는 이 내용을 댓글로 달아서 서징에게도 물어볼 수 있어요. 작성자가 직접 볼 수 있어요!