KimYejiPostsCraftsTIL
Back

MDX Kitchen Sink

2026. 02. 20.Yeji Kim
docsmdx

🔔 Typography

(1) Headings

Heading은 1부터 6까지 구성되어 있습니다.

heading1 - #

heading2 - ##

heading3 - ###

heading4 - ####

heading5 - #####

heading6 - ######

(2) Paragraph

일반적인 본문 텍스트입니다.

두 번째 문단입니다. 문단 사이의 간격이 적절한지 확인합니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

(3) Emphasis

이것은 bold 텍스트입니다.

이것은 italic 텍스트입니다.

이것은 bold italic 텍스트입니다.

이것은 strikethrough 텍스트입니다.

(4) Links

내부 링크는 같은 탭에서 열립니다.

외부 링크는 새 탭에서 열립니다.

(5) Lists

Unordered List

  • 첫 번째 항목
  • 두 번째 항목
    • 중첩 항목 A
    • 중첩 항목 B
      • 더 깊은 중첩
  • 세 번째 항목

Ordered List

  1. React 컴포넌트 설계
  2. 상태 관리 구현
    1. 로컬 상태 정의
    2. 전역 상태 연결
  3. 스타일링 적용
  4. 테스트 작성

Task List

  • 프로젝트 초기 설정
  • 라우팅 구현
  • 다크 모드 최적화
  • 배포

(6) Blockquote

좋은 코드는 그 자체로 최고의 문서다. 주석을 달려고 할 때, 스스로에게 물어봐라. "이 주석이 필요 없도록 코드를 개선할 수 없을까?"

  • Steve McConnell

갑자기 뼈맞기...

(7) Inline Code

npm install 명령어로 패키지를 설치합니다. 컴포넌트에서 useState와 useEffect를 조합하면 대부분의 상태 관리를 처리할 수 있습니다. 파일 경로는 src/components/mdx/callout.tsx처럼 표시됩니다.

(8) Code Block

tsx
import { useState } from "react";
 
interface CounterProps {
  initial?: number;
}
 
export function Counter({ initial = 0 }: CounterProps) {
  const [count, setCount] = useState(initial);
 
  return (
    <button
      onClick={() => setCount((c) => c + 1)}
      className="rounded-lg bg-accent px-4 py-2 text-white"
    >
      Count: {count}
    </button>
  );
}
css
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}
bash
# 개발 서버 실행
pnpm dev
 
# 프로덕션 빌드
pnpm build && pnpm start

(9) Table

기능설명상태
MDX 렌더링마크다운 + JSX 컴포넌트완료
다크 모드시스템 설정 연동완료
다국어한국어 / English완료
스네이크 게임Canvas API 기반완료
RSS 피드자동 생성예정

(10) Image

Next.js Logo

🔔 Custom Components

(11) Callout - Info (기본)

기본 info 스타일의 콜아웃입니다. 일반적인 정보나 팁을 전달할 때 사용합니다. 내부에서 bold, italic, code 등 마크다운 문법을 사용할 수 있습니다.

Callout - Info with Title

참고

title prop을 전달하면 콜아웃 상단에 제목이 표시됩니다. 중요한 정보를 강조할 때 유용합니다.

Callout - Warning

주의

variant="warning" 스타일입니다. 사용자가 주의해야 할 사항이나 잠재적 문제를 안내할 때 사용합니다.

Callout - Success

완료

variant="success" 스타일입니다. 성공적인 결과나 권장 사항을 표시할 때 사용합니다.

Callout - Danger

위험

variant="danger" 스타일입니다. 치명적인 오류나 절대 하지 말아야 할 사항을 경고할 때 사용합니다. 예를 들어 rm -rf /는 실행하지 마세요.

(15) Math - 수식

remark-math + rehype-katex를 통해 LaTeX 수식을 렌더링합니다. KaTeX CDN 스타일시트가 전역으로 로드되어 있어 별도 import 없이 사용할 수 있습니다.

Inline Math

문장 안에 $...$로 인라인 수식을 삽입합니다. 감쇠비 ζ=c2km\zeta = \frac{c}{2\sqrt{km}} 처럼 본문 흐름을 유지하면서 수식을 표현할 수 있습니다.

mdx
감쇠비 $\zeta = \frac{c}{2\sqrt{km}}$ 는 ...

Display Math

$$...$$로 독립된 블록 수식을 작성합니다. 긴 수식은 자동으로 가로 스크롤됩니다.

m x¨(t)+c x˙(t)+k x(t)=0m\,\ddot{x}(t) + c\,\dot{x}(t) + k\,x(t) = 0

x(t)=xtarget−e−ζω0t[v0+ζω0Δxωdsin⁡(ωdt)+Δxcos⁡(ωdt)]x(t) = x_{\text{target}} - e^{-\zeta\omega_0 t}\left[\frac{v_0 + \zeta\omega_0 \Delta x}{\omega_d}\sin(\omega_d t) + \Delta x \cos(\omega_d t)\right]

mdx
$$m\,\ddot{x}(t) + c\,\dot{x}(t) + k\,x(t) = 0$$

수식이 화면 너비를 넘으면 해당 수식 영역 안에서 가로 스크롤이 가능합니다.

🔔 조합 테스트

(12) 코드 블록 + Callout

사용법

아래와 같이 Callout 컴포넌트를 MDX에서 사용할 수 있습니다.

mdx
<Callout variant="info" title="제목">
  콜아웃 내용을 여기에 작성합니다.
</Callout>

(13) 리스트 + Bold + Code

  • compileMDX로 MDX 문자열을 React Elements로 변환
  • mdxComponents에 등록된 컴포넌트를 자동 매핑
  • Tailwind Typography의 prose 클래스로 기본 스타일 적용

(14) Blockquote + Link

MDX를 사용하면 마크다운 안에서 React 컴포넌트를 자유롭게 사용할 수 있습니다. 이 블로그는 next-mdx-remote를 통해 서버 사이드에서 MDX를 컴파일합니다.