# MDX의 강력한 기능들 MDX는 마크다운과 JSX를 결합하여 강력하고 유연한 콘텐츠 작성을 가능하게 합니다. ## MDX란? MDX는 **Markdown + JSX**의 약자로, 마크다운 파일 안에서 React 컴포넌트를 사용할 수 있게 해줍니다. ```mdx # 일반 마크다운 이것은 일반 텍스트입니다. JSX 컴포넌트도 사용 가능! ``` ## 커스텀 컴포넌트 ### Callout 컴포넌트 다양한 유형의 알림 박스를 사용할 수 있습니다: 이것은 정보성 메시지입니다. 독자에게 유용한 팁을 제공할 때 사용합니다. 주의가 필요한 내용입니다. 흔한 실수나 함정을 피하는 방법을 안내합니다. 치명적인 문제나 피해야 할 안티패턴을 설명합니다. 작업이 성공적으로 완료되었거나 권장되는 모범 사례를 소개합니다. ## 코드 블록 기능 ### 기본 하이라이팅 ```typescript interface User { id: string name: string email: string } function greetUser(user: User): string { return `Hello, ${user.name}!` } ``` ### 제목이 있는 코드 블록 ```javascript title="utils.js" export function debounce(func, wait) { let timeout return function executedFunction(...args) { const later = () => { clearTimeout(timeout) func(...args) } clearTimeout(timeout) timeout = setTimeout(later, wait) } } ``` ### 라인 하이라이팅 특정 라인을 강조할 수 있습니다: ```python {2,4-6} def calculate_sum(numbers): total = 0 # 이 라인이 강조됩니다 for num in numbers: # 이 블록 전체가 강조됩니다 if num > 0: total += num return total result = calculate_sum([1, -2, 3, 4, -5]) ``` ### 라인 번호 표시 코드 블록에 라인 번호를 표시할 수 있습니다: ```typescript showLineNumbers title="fibonacci.ts" function fibonacci(n: number): number { if (n <= 1) { return n } return fibonacci(n - 1) + fibonacci(n - 2) } // 메모이제이션 버전 function fibonacciMemo(n: number, memo: Map = new Map()): number { if (n <= 1) return n if (memo.has(n)) return memo.get(n)! const result = fibonacciMemo(n - 1, memo) + fibonacciMemo(n - 2, memo) memo.set(n, result) return result } ``` ## 테이블 MDX는 GitHub Flavored Markdown 테이블을 지원합니다: | 기능 | 지원 여부 | 설명 | |------|----------|------| | 코드 하이라이팅 | ✅ | Shiki 기반 | | 다크모드 | ✅ | 자동 전환 | | 검색 | ✅ | 클라이언트 검색 | | 댓글 | ✅ | Giscus 통합 | | RSS 피드 | ✅ | 자동 생성 | ## 리스트 ### 순서 있는 리스트 1. 첫 번째 단계 2. 두 번째 단계 3. 세 번째 단계 - 하위 항목 A - 하위 항목 B 4. 네 번째 단계 ### 체크리스트 - [x] MDX 설정 완료 - [x] 코드 하이라이팅 적용 - [ ] 다크모드 구현 - [ ] 검색 기능 추가 - [ ] SEO 최적화 ## 인용구 > "MDX는 개발자 블로그에 완벽한 선택입니다. 코드와 콘텐츠를 자연스럽게 결합할 수 있기 때문입니다." > > — Next.js 팀 중첩된 인용구도 가능합니다: > 첫 번째 레벨 >> 두 번째 레벨 >>> 세 번째 레벨 ## 링크 ### 내부 링크 다른 포스트로 이동: [샘플 포스트](/posts/mdx-features) ### 외부 링크 외부 링크는 자동으로 새 탭에서 열립니다: [Next.js 공식 문서](https://nextjs.org/docs) ### 앵커 링크 페이지 내부 이동: [커스텀 컴포넌트](#커스텀-컴포넌트) ## 다양한 언어 지원 ### JavaScript ```javascript const fibonacci = (n) => { if (n <= 1) return n return fibonacci(n - 1) + fibonacci(n - 2) } ``` ### Python ```python def fibonacci(n): if n <= 1: return n return fibonacci(n - 1) + fibonacci(n - 2) ``` ### Rust ```rust fn fibonacci(n: u32) -> u32 { match n { 0 => 0, 1 => 1, _ => fibonacci(n - 1) + fibonacci(n - 2) } } ``` ### Go ```go func fibonacci(n int) int { if n <= 1 { return n } return fibonacci(n-1) + fibonacci(n-2) } ``` ## 이모지 지원 MDX는 이모지를 완벽하게 지원합니다! 🎉 - 🚀 빠른 성능 - 💎 아름다운 디자인 - 🔧 쉬운 커스터마이징 - 📱 완전한 반응형 ## 수학 표기법 인라인 수학: $E = mc^2$ 블록 수학: $$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$ ## 마무리 MDX는 개발자 블로그를 위한 완벽한 도구입니다.