🛠 블로그에 마크다운 지원 추가하기｜React Markdown으로 실시간 미리보기 구현

Next.js 기반 블로그에서 개발자 친화적인 글쓰기 환경을 위해 마크다운 지원 기능을 구현했습니다.
실시간 미리보기, 코드 하이라이팅, GitHub Flavored Markdown(GFM) 등 다양한 기능을 적용해 더 풍부한 콘텐츠 작성을 가능하게 했습니다.

✅ 구현 목표

• 마크다운 문법 지원 (GFM 포함)
• 실시간 편집/미리보기 탭 제공
• 코드 블록 구문 하이라이팅
• 관리자 페이지에서 편집/미리보기 전환 기능
• 홈페이지 및 리스트 페이지에서 깔끔한 excerpt 출력

📦 사용한 패키지

npm install react-markdown remark-gfm rehype-highlight rehype-raw --legacy-peer-deps

• react-markdown: React에서 마크다운을 렌더링
• remark-gfm: GitHub Flavored Markdown 지원 (체크박스, 테이블 등)
• rehype-highlight: 코드 구문 하이라이팅
• rehype-raw: HTML 태그 렌더링

⚙️ 핵심 구현
1. MarkdownPreview 컴포넌트 제작

<MarkdownPreview
  value={formData.content}
  onChange={(value) => handleInputChange('content', value)}
  placeholder="마크다운으로 작성하세요"
/>

탭을 이용해 편집/미리보기 전환이 가능하도록 구성했습니다. 작성 도중에도 실시간으로 마크다운 결과를 확인할 수 있습니다.

2. 포스트 상세 페이지 마크다운 렌더링

<ReactMarkdown
  remarkPlugins={[remarkGfm]}
  rehypePlugins={[rehypeHighlight, rehypeRaw]}
  components={{
    h1: ({ children }) => <h1 className="text-3xl font-bold">{children}</h1>,
    p: ({ children }) => <p className="mb-4 leading-relaxed">{children}</p>,
    code: ({ inline, className, children, ...props }) => {
      const match = /language-(\w+)/.exec(className || '')
      return !inline && match ? (
        <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
          <code className={className} {...props}>
            {children}
          </code>
        </pre>
      ) : (
        <code className="bg-gray-100 px-1 py-0.5 rounded">{children}</code>
      )
    },
  }}
>
  {post.content}
</ReactMarkdown>

3. excerpt 처리: 마크다운 문법 제거

const generateExcerpt = (content: string, maxLength = 150) => {
  return content
    .replace(/```[\s\S]*?```/g, '') // 코드 블럭 제거
    .replace(/`([^`]+)`/g, '$1') // 인라인 코드 제거
    .replace(/!\[.*?\]\(.*?\)/g, '') // 이미지 제거
    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '$1') // 링크 제거
    .replace(/[#>*_~\-]/g, '') // 기타 마크다운 문법 제거
    .replace(/\s+/g, ' ') // 공백 정리
    .trim()
    .slice(0, maxLength) + '...'
}

🧪 트러블슈팅

• --legacy-peer-deps를 사용한 이유: 패키지 간 peer dependency 충돌 회피
• 타입스크립트 오류: 마크다운 관련 상태값 타입 명시로 해결
• 렌더링 스타일 불일치: 마크다운 요소별 Tailwind 클래스 적용으로 일관된 UI 유지

✨ 구현 결과

• ✅ 마크다운 기반 콘텐츠 작성 가능

• ✅ 실시간 편집/미리보기 제공

• ✅ 코드 하이라이팅 및 GFM 테이블, 체크리스트 지원

• ✅ excerpt 영역에서는 마크다운 문법 자동 제거