마크다운에 컴포넌트 추가하기

구조와 흐름

• unified 플러그인 기반의 마크다운 → mdast → hast → HTML 변환 과정
• remark-parse의 mdast 생성, remark-rehype의 hast 변환, rehype-stringify의 HTML 직렬화
• 구문 트리 변환을 통한 문법 확장과 노드 단위 가공 가능성

해결 방법

• Gatsby가 변환 중간 단계 개입이 어려운 제약에 대응한 최종 HTML 재파싱 방식
• rehype-parse로 HTML을 hast로 분해하고 rehype-react로 React 노드 변환
• components 옵션에 커스텀 태그와 SplitDiff·IframeOpener 컴포넌트 연결

선택 이유

• 마크다운의 raw HTML 태그 지원을 활용한 커스텀 태그 입력 방식
• 기존 Gatsby 플러그인 적용 결과를 유지하는 후처리 방식
• JSX 기반 컴포넌트 삽입을 단순화하는 MDX 대안

주의할 점

• Gatsby의 markdownRemark HTML 결과물 이후에만 적용 가능한 구조
• 원본 마크다운을 직접 변환할 경우 기존 Gatsby 플러그인 효과 상실 가능성