LogoSEO Jing
  • All Posts
  • SEO Jing
  • okayJing
  • KD Team
  • CLAB Coreteam
  • Study

Contact Me

© 2026 SEOJing. All rights reserved.

MDX가 뭘까? | SEOJing
DevLogSEO JingInsight

MDX가 뭘까?

2026년 3월 13일·3분 읽기

MDX란?

한 줄로 요약하면 Markdown + React 컴포넌트를 같이 쓸 수 있는 파일 형식이다.

Markdown부터 먼저

아마 README.md 써보셨죠? 그게 Markdown이다.
markdown
# 제목

**굵게**, _기울임_

- 리스트
- 리스트
이걸 HTML로 자동 변환해줘서 글 쓰기 편한 형식이다.

MDX = Markdown + JSX

Markdown의 불편한 점이 정적이라는 거다. 근데 MDX는 안에 React 컴포넌트를 그냥 넣을 수 있다.

jsx
# 리액트 훅 정리

일반 마크다운 텍스트는 그냥 이렇게 씁니다.

{/* React 컴포넌트를 바로 삽입 */}
<CodeBlock language="tsx">
  const [count, setCount] = useState(0)
</CodeBlock>

## 직접 눌러보세요

<InteractiveCounter />  {/* 실제로 동작하는 컴포넌트! */}

실제로 뭐가 가능하냐면

1. 코드 하이라이팅 컴포넌트

파일명, 하이라이트 줄 번호 같은 props를 넘겨서 커스텀 코드 블럭을 만들 수 있다.

2. 경고/팁 박스

Callout 같은 컴포넌트로 경고, 팁, 정보 박스를 자유롭게 넣을 수 있다.

3. 탭 UI

npm, yarn, pnpm 같은 설치 방법을 탭으로 구분할 수 있다.

4. 글 상단 메타데이터 (frontmatter)

yaml
---
title: TanStack Query 완벽 정리
date: 2024-03-14
tags: [react, query]
thumbnail: /images/tanstack.png
---

이 --- 안에 있는 데이터를 코드에서 읽어서 목록 페이지, SEO 태그 등에 활용한다.

일반 블로그 플랫폼이랑 비교

티스토리/벨로그MDX 블로그
글 작성에디터에서 작성VSCode에서 .mdx 파일 작성
저장서버 DBGitHub 레포
커스텀제한적무제한 (내 컴포넌트 삽입)
디자인테마 선택직접 구현
이식성플랫폼 종속파일이라 어디서든 이동 가능

결론

개발 블로그에 MDX가 좋은 이유는:

  • 글 = 코드 파일이라 git으로 버전 관리가 됨
  • 코드 하이라이팅, 인터랙티브 데모 같은 개발자 특화 기능 만들기 쉬움
  • 직접 만든 컴포넌트를 글 안에 자유롭게 넣을 수 있음

요즘 개발자 블로그 (Josh Comeau, Kent C. Dodds 등) 대부분 MDX 기반이다!

Post Q&A

오케이징에게 물어보기

MDX가 뭘까? 전체를 기준으로 질문과 피드백을 받아요.답을 본 뒤에는 이 내용을 댓글로 달아서 서징에게도 물어볼 수 있어요. 작성자가 직접 볼 수 있어요!

0/500

포스트 목록

/SEOJing/devLog/insight
파일 10개, 폴더 0개
엄청난 피드백생각보다 어려웠던 댓글, 완독 로컬스토리지디자인 시스템을 구축할 때 주의할 점폰트는 왜 메인 페이지에서만 적용이 안되고 있었을까?MDX DOM 트리 파싱하기MDX 관련 이슈 노트결국 Node.js 까지 와버렸다전체적인 플로우Storybook으로 디자인 시스템 테스팅하기MDX가 뭘까?

같은 섹션의 대표 이미지

10 posts · latest first
SEO Jing26. 03. 15.

엄청난 피드백.

CLI 코드 리뷰에서 받은 피드백과 전체 코드 수정 계획을 정리했다.

26. 03. 15.SEOJing
SEO Jing26. 03. 15.

생각보다 어려웠던 댓글, 완독 로컬스토리지.

localStorage만으로 글 읽기 추적, 스크롤 진행률, 댓글 감지를 구현한 과정을 정리했다.

26. 03. 15.SEOJing
SEO Jing26. 03. 15.

MDX 관련 이슈 노트.

블로그 디테일 페이지에서 MDX를 렌더링하기 위해 검토한 라이브러리들과 최종 선택 과정.

26. 03. 15.SEOJing
SEO Jing26. 03. 14.

디자인 시스템을 구축할 때 주의할 점.

디자인 시스템 구현 시 파일 구조, 디자인 토큰, 유의 사항을 정리했다.

26. 03. 14.SEOJing
SEO Jing26. 03. 14.

폰트는 왜 메인 페이지에서만 적용이 안되고 있었을까?.

Tailwind v4 환경에서 폰트가 메인 페이지에서만 적용되지 않던 원인과 Hydration Mismatch 이슈를 정리했다.

26. 03. 14.SEOJing
SEO Jing26. 03. 14.

MDX DOM 트리 파싱하기.

MDX 파일의 경로 탐색 로직과 콘텐츠 트리 생성 과정을 정리했다.

26. 03. 14.SEOJing
SEO Jing26. 03. 14.

결국 Node.js 까지 와버렸다.

MDX 파일 구조를 JSON으로 변환하기 위해 Node.js의 fs 모듈을 배워봤다.

26. 03. 14.SEOJing
SEO Jing26. 03. 13.

전체적인 플로우.

SEO Jing 프로젝트의 기술 스택 선정과 전체적인 개발 플로우 정리.

26. 03. 13.SEOJing
SEO Jing26. 03. 13.

Storybook으로 디자인 시스템 테스팅하기.

Storybook의 사용법과 디자인 시스템 개발에서의 장점을 정리했다.

26. 03. 13.SEOJing
SEO Jing26. 03. 13.

MDX가 뭘까?.

MDX의 개념과 블로그에서 활용하는 이유를 정리했다.

26. 03. 13.SEOJing