MDX의 강력한 기능들

MDX는 마크다운과 JSX를 결합하여 강력하고 유연한 콘텐츠 작성을 가능하게 합니다.

MDX란?

MDX는 Markdown + JSX의 약자로, 마크다운 파일 안에서 React 컴포넌트를 사용할 수 있게 해줍니다.

mdx

# 일반 마크다운
이것은 일반 텍스트입니다.
 
<CustomComponent prop="value">
  JSX 컴포넌트도 사용 가능!
</CustomComponent>

커스텀 컴포넌트

Callout 컴포넌트

다양한 유형의 알림 박스를 사용할 수 있습니다:

정보

이것은 정보성 메시지입니다. 독자에게 유용한 팁을 제공할 때 사용합니다.

경고

주의가 필요한 내용입니다. 흔한 실수나 함정을 피하는 방법을 안내합니다.

오류

치명적인 문제나 피해야 할 안티패턴을 설명합니다.

성공

작업이 성공적으로 완료되었거나 권장되는 모범 사례를 소개합니다.

코드 블록 기능

기본 하이라이팅

typescript

interface User {
  id: string
  name: string
  email: string
}
 
function greetUser(user: User): string {
  return `Hello, ${user.name}!`
}

제목이 있는 코드 블록

utils.js

javascript

export function debounce(func, wait) {
  let timeout
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout)
      func(...args)
    }
    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
  }
}

라인 하이라이팅

특정 라인을 강조할 수 있습니다:

python

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])

라인 번호 표시

코드 블록에 라인 번호를 표시할 수 있습니다:

fibonacci.ts

typescript

function fibonacci(n: number): number {
  if (n <= 1) {
    return n
  }
  return fibonacci(n - 1) + fibonacci(n - 2)
}
 
// 메모이제이션 버전
function fibonacciMemo(n: number, memo: Map<number, number> = 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 피드	✅	자동 생성

리스트

순서 있는 리스트

첫 번째 단계
두 번째 단계
세 번째 단계
- 하위 항목 A
- 하위 항목 B
네 번째 단계

체크리스트

인용구

"MDX는 개발자 블로그에 완벽한 선택입니다. 코드와 콘텐츠를 자연스럽게 결합할 수 있기 때문입니다."

— Next.js 팀

중첩된 인용구도 가능합니다:

첫 번째 레벨

두 번째 레벨

세 번째 레벨

링크

내부 링크

다른 포스트로 이동: 샘플 포스트

외부 링크

외부 링크는 자동으로 새 탭에서 열립니다: Next.js 공식 문서(새 탭에서 열림)

앵커 링크

페이지 내부 이동: 커스텀 컴포넌트

다양한 언어 지원

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

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는 개발자 블로그를 위한 완벽한 도구입니다.