ZOD (1) 썸네일형 리스트형 React-Markdown에서 커스텀 컴포넌트 타입 안정성 챙기기 React-Markdown 라이브러리에서 커스텀 컴포넌트를 렌더링하기 위해서react-markdown과 rehype 조합이 사실상 표준처럼 쓰입니다.하지만 이 라이브러리 조합엔 한 가지 불편한 점이 있습니다.💡 rehype 플러그인은 타입 안정성이 거의 없습니다.rehype 플러그인은 HTML AST를 직접 다루기 때문에,각 노드의 형태나 속성을 TypeScript로 보장하기 어렵습니다.즉, “이 노드에는 반드시 url이 있다”는 걸 코드로 증명할 수 없죠.결국 런타임 에러나 타입 추론 불가능한 상황이 자주 생깁니다.문제 상황저는 react-markdown을 기반으로 커스텀 블록(예: Rechart, Mermaid, Callout 등)을 구현하고 있었어요. rehype 플러그인은 HTML AST 노드를.. 이전 1 다음