Web (2) 썸네일형 리스트형 React-Markdown에서 커스텀 컴포넌트 타입 안정성 챙기기 React-Markdown 라이브러리에서 커스텀 컴포넌트를 렌더링하기 위해서react-markdown과 rehype 조합이 사실상 표준처럼 쓰입니다.하지만 이 라이브러리 조합엔 한 가지 불편한 점이 있습니다.💡 rehype 플러그인은 타입 안정성이 거의 없습니다.rehype 플러그인은 HTML AST를 직접 다루기 때문에,각 노드의 형태나 속성을 TypeScript로 보장하기 어렵습니다.즉, “이 노드에는 반드시 url이 있다”는 걸 코드로 증명할 수 없죠.결국 런타임 에러나 타입 추론 불가능한 상황이 자주 생깁니다.문제 상황저는 react-markdown을 기반으로 커스텀 블록(예: Rechart, Mermaid, Callout 등)을 구현하고 있었어요. rehype 플러그인은 HTML AST 노드를.. [Next] <Link> 태그 passHref 속성 이해하기 왜 passHref가 필요한가?passHref는 Next.js의 Link 컴포넌트가 생성하는 href prop을 자식 컴포넌트에게 전달하는 역할을 합니다.SEO 최적화: 검색 엔진이 링크를 올바르게 인식할 수 있습니다.브라우저 기능: 우클릭 메뉴의 "새 탭에서 열기" 등이 정상 작동합니다. passHref가 필요한 경우1. Link 내부에 커스텀 컴포넌트나 button을 사용할 때가장 대표적인 경우입니다. Link 안에 태그가 아닌 다른 커스텀 컴포넌트를 넣을 때 passHref가 필요합니다.// ❌ 잘못된 방법 - passHref 없이 사용function ViewAllButton({ children = "전체보기", className, href, ...props }) { return ( .. 이전 1 다음