HOMEShowcaseActivity

Showcase using MDX

Showcase using MDX

이 사이트에 MDX를 적용해보았다.

원래 이 포트폴리오 사이트를 만들었던 이유가, "코드와 실행되는 화면을 동시에 보여주고 싶어서" 였던 만큼, MDX를 알게 되자마자 "유레카"를 외쳤다.

이 적용 과정에서 좋았던 점들과 아쉬웠던 점들을 짤막하게 정리해보려고 한다.

좋았던 점

텍스트 사이에 컴포넌트나 코드를 마음껏 넣을 수 있다.

도 넣을 수 있었고

이런 툴팁 컴포넌트 같이 기능이 들어간 컴포넌트도 마음껏 텍스트와 함께 배치할 수 있었다!

아쉬웠던 점

다만 페이지를 구성하는 과정이 조금 불편하다고 느껴졌다. MDX 자체를 페이지로 만들지 않고 내부 컴포넌트에서만 사용하기엔 무리가 있었다.

MDX 렌더링에는 두 가지 옵션이 있고, 이 각각의 방식을 살펴보았다.

첫번째 옵션은 MDX 파일 자체가 페이지를 구성하는 방식이다.

사실, MDX가 하나의 route와 일대일 대응되는 것이 크게 이상하지도 않고 (마크다운이 그렇듯이) 해당 MDX 콘텐츠를 담을 수 있는 레이아웃 컴포넌트를 만들어서 사용하면 되기 때문에, 그렇게 어려운 일은 아니다.

이 방식을 사용하면 MDX 파일을 다른 곳에서 재사용하기가 어렵다는 문제가 있긴 하지만, MDX로 하나의 글을 써서 하나의 페이지를 배포하는 방식을 사용하는 나에게는 크게 문제가 되지는 않았다. 지금 이 글 역시 이 첫번째 방식을 사용한 MDX로 작업되었다.

아래 내용이 통째로 mdx 파일의 내용이다.

import PostLayout from "@pages/posts/PostLayout"
여기에 글을 작성한다. <button>버튼</button>이나 <Tooltip title="test">툴팁</Tooltip> 같은 컴포넌트를 이렇게 쓸 수 있다는 게 아주 좋다.
// MDX에 해당하는 highlightjs 지원이 없어서 이상하게 보이는 점은 약간 아쉽다.
export default ({ children }) => <PostLayout meta={meta}>{children}</PostLayout>

두 번째 옵션은 MDX 파일을 컴포넌트로 사용하는 방식이다.

<MDXProvider>를 통해 MDX 파일에서 사용할 컴포넌트들을 한번에 넘겨주면, 내부에서 mdx 파일을 import 해 컴포넌트인 것 처럼 사용할 수 있다.

만약 mdx 파일을 원격 서버에 작성하고, 그 파일을 가져와서 사용하고 싶다면, (next-mdx-remote)[https://github.com/hashicorp/next-mdx-remote] 같은 라이브러리를 사용해야 하는데,

이 경우 SSG를 위해서 getStaticProps 같은 도구를 사용해 mdx 파일을 가져와야 한다.

작성한 글들을 한 곳에서 관리하기에는 이 방식이 그닥 편리할 것 같지 않았으므로, 채택하지 않았다.

import { MDXRemote } from "next-mdx-remote"

export default function Page() {
  return (
    <PostLayout>
      <MDXRemote source={source} components={{ SomeComponent }} />
    </PostLayout>
  )
}

결론

일단 MDX 자체는 markdown과 컴포넌트를 잘 버무려 사용하기 좋은 라이브러리인 듯 하다.

다만 이 과정에서 텍스트로 작성한 MDX의 "컴포넌트"가 어떤 컴포넌트로 렌더링되어야 하는가를 렌더러에게 전달하는 과정이 머리아픈 부분이었다.

여기에 SSG 방식에 대한 고민이 한 스푼 더해지면, 생각보다 깔끔하게 풀어내기엔 쉽지 않은 것 같다.

하지만 일단은 지금의 방식에 만족하고, 이 방식을 더 활용해서 글을 써 보는 방향으로 노력해보려고 한다.