MDX란 무엇인가? MDX의 개념 MDX는 Markdown with JSX의 약자로, Markdown과 JSX를 결합한 문서 형식이다. 마크다운 Markdown 문서 안에 JSX React/Astro 등 컴포넌트 구문 를 직접 삽입하여 사용할 수 있게 해주는 포맷으로 파일 확장자는 .mdx 를 사용한다. Markdown이 텍스트 중심의 정적인 문서를 빠르게 작성하는 데 특화되어 있는 마크업 언어이고, JSX는 JavaScript에서 XML과 유사한 문법을 사용하여 UI를 정의할 수 있는 문법이다. MDX는 이 두가지 장점을 합쳐, 콘텐츠 작성과 동적인 인터페이스 구성을 한 곳에서 할 수 있게 해준다. MDX 도입 배경 및 장단점 Markdown과 개념 비교 MDX의 장점 확장성: MDX를 사용하면 일반적인 Markdown에서 할 수 없는 복잡한 UI요소를 쉽게 포함할 수 있다. 재사용성: 컴포넌트를 사용함으로써 코드를 재사용할 수 있다. 생산성: Markdown의 간결함과 프론트엔드 프레임워크의 강력함을 동시에 누릴 수 있어 문서 작성과 UI 개발의 생산성을 크게 향상시킨다. 유연성: 콘텐츠와 UI를 한 곳에서 관리할 수 있어 유지보수가 쉬워진다. MDX 핵심 문법 기본 Markdown 문법 및 스타일링 제목 Headings 나의 블로그 같은 경우 ToC에서 H2 H4까지가 자동 적용되도록 제작하였다. 텍스트 스타일링 리스트 링크 및 이미지 코드블록 인라인 코드 : 백틱 한 개로 감싸서 사용한다. 예: const a = 1; 블록 코드 : 백틱 세 개 markdown 인용문구 중첩된 인용 문구 markdown | 헤더 | 헤더2 | | | | | 데이터1 | 데이터2 | | 데이터3 | 데이터4 | c import CustomButton from '../components/CustomButton.jsx';

Search