mdx테스트

mdx에 코드 스니펫 불러오기 작성 예시

import Hello from '/modules/test.tsx'
;<Hello />

  <Hello />

코드블럭에서 줄 첫번째에 컴포넌트를 작성하면 앞에 ; 이 붙기 때문에 이게 불편하면 앞에 공백을 추가해주면 된다
코드블럭 밖에서 사용하는 건 잘 된다

정적 페이지를 생성하기 때문에 다양한 라이브러리를 사용하더라도 다른 라이브러리간 에 간섭이 없다 mdx 작성 구조를 보면 필요한 컴포넌트는 import 하게 되고 깔려있는 react 기본 설정들이 없는 것을 확인할 수 있다

리액트 세팅 방법

일반 리액트를 설치하는 것부터 시작하면 되는데.... root를 생략하고 시작해도 된다

mdx 전역 변수

frontMatter 라는 속성 값이 있다
mdx 내에서 yaml 형식으로 작성한 내용을 가져올 수 있다

<ul>
  {Object.entries(frontMatter).map(([key, value]) => (
    <li key={key}>
      <b>{key}</b>: {value}
    </li>
  ))}
</ul>