본문으로 건너뛰기

Tistory 글 160편을 Docusaurus로 옮기기

· 약 2분
Seung hyo, Lee
Front End Engineer @ Assistfit

2022년 11월부터 2023년 4월까지는 Tistory에 글을 썼다. 알고리즘 풀이, 자바스크립트와 리액트 정리, 주간 회고 같은 글들이다. 학습 노트는 이미 이 Docusaurus 블로그에 모으고 있어서, 예전 글도 오늘 전부 옮겨 왔다.

수집 스크립트​

옮길 글이 160편이라 손으로 복사할 생각은 없었다. 먼저 Python 표준 라이브러리만 쓰는 스크립트를 만들었다. 명령은 두 개다.

  • list: 사이트맵을 읽어 글마다 id, 날짜, 카테고리, 제목을 날짜순 TSV로 뽑는다.
  • fetch: 글 하나의 이미지를 글 폴더에 img-NN 이름으로 내려받고, 정리한 본문 HTML과 메타데이터를 남긴다.

본문은 스킨의 본문 div를 찾은 뒤 여는 div와 닫는 div 수를 세어 짝이 맞는 지점까지 잘라냈다. 링크 카드 같은 장식은 이 단계에서 단순 링크로 바꿨다.

변환 가이드​

HTML을 마크다운으로 바꾸는 규칙은 가이드 문서로 따로 적었다. 제목 단계 매핑, 미리보기를 자를 위치, 카테고리와 태그의 대응표 같은 것들이다. 이미지는 최대한 텍스트로 옮기기로 했다. 코드 스크린샷은 언어를 지정한 코드 블록으로, 실행 결과 스크린샷은 접히는 details 블록으로, 표는 마크다운 표로 바꾼다. 다이어그램처럼 글로 옮길 수 없는 것만 이미지로 남긴다. 원문 주소와 작성일은 화면에 보이지 않는 MDX 주석으로 붙였다. 오타만 고치고 말투와 내용은 그대로 두는 것도 규칙에 넣었다.

저장소의 CLAUDE.md에는 "Tistory 글을 옮기라는 요청을 받으면 이 가이드를 따른다"는 한 줄을 넣었다. 그다음 실제 이전은 에이전트에게 글 단위로 맡겼다. 글 하나가 커밋 하나라서, 문제가 생긴 글만 골라 되돌리거나 고칠 수 있다.

MDX에서 걸린 것들​

전부 옮기고 빌드하니 네 편에서 MDX 오류가 났다.

  • 제목에 쓴 { Class }, {딕셔너리}를 MDX가 JS 표현식으로 읽었다. 중괄호를 이스케이프했다.
  • 문장 첫머리의 import 단어를 ESM import 문으로 해석했다. 인라인 코드로 감쌌다.
  • HTML 주석 <!-- -->은 MDX에서 쓸 수 없어 {/* */}로 바꿨다.

마지막으로 태그 목록을 정리하고, 블로그 사이드바에 전체 글이 보이도록 설정을 바꿨다. 글로 옮기지 못하고 이미지로 남은 파일은 156개다.