MDX로 인터랙티브한 블로그 글 작성하기

MDX란?

MDX는 Markdown + JSX의 합성어로, Markdown 파일 안에서 컴포넌트를 사용할 수 있게 해줍니다.

일반 Markdown으로는 표현하기 어려운 인터랙티브한 콘텐츠를 만들 수 있어서, 기술 블로그에 특히 유용합니다.

MDX의 장점

1. 컴포넌트 재사용: 자주 사용하는 UI 패턴을 컴포넌트로 만들어 재사용
2. 인터랙티브 콘텐츠: 버튼, 탭, 토글 등을 글 안에 포함
3. 데이터 시각화: 차트나 그래프를 Markdown 안에 삽입
4. 코드 하이라이팅: 커스텀 코드 블록 구현 가능

Astro에서 MDX 사용하기

Astro는 기본적으로 MDX를 지원합니다. .mdx 확장자로 파일을 만들면 됩니다:

---
title: 'My MDX Post'
---

import MyComponent from './MyComponent.astro';

# 제목

일반 Markdown과 **컴포넌트**를 함께 사용할 수 있습니다.

<MyComponent />

마무리

MDX는 기술 블로그의 가능성을 크게 확장해줍니다. Markdown의 간결함과 컴포넌트의 표현력을 동시에 활용해보세요! ✨