jwsongWriting
setup

이 블로그는 MDX 위에 올려두었다

글은 마크다운으로 쓰되, 필요한 자리에는 React 컴포넌트를 그대로 꽂을 수 있어야 했다. 그 조건 하나로 스택이 정해졌다.

jwsong··읽는 데 3분

공부한 걸 글로 남길 때 늘 걸리는 지점이 있다. 글 자체는 마크다운이 제일 편한데, 설명하려는 게 움직이는 것이면 마크다운으로는 손이 묶인다. 이미지로 박제하면 단계가 사라지고, 영상으로 올리면 되감기가 번거롭다.

그래서 조건을 하나로 정리했다. 글 중간에 React 컴포넌트를 그대로 꽂을 수 있을 것. 이 조건을 만족하는 순간 나머지는 거의 자동으로 결정된다.

구성

apps/blog/web/src/lib/mdx.ts
export const mdxOptions: MDXRemoteProps['options'] = {
  parseFrontmatter: false,
  mdxOptions: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [rehypeSlug, [rehypePrettyCode, prettyCode]],
  },
};

글은 content/posts/*.mdx 에 파일로 둔다. DB도, 관리자 화면도 없다. 글쓰기가 곧 파일 쓰기라서 에디터에서 바로 쓰고 커밋으로 발행한다.

조각선택이유
렌더next-mdx-remote (RSC)본문을 서버에서 컴파일한다. 클라이언트 번들에 MDX 런타임이 안 실린다
프론트매터gray-matter제목·날짜·태그를 파일 맨 위에 둔다
코드rehype-pretty-code + shiki빌드 타임 하이라이팅. 런타임 JS 0바이트
스타일Tailwind 4토큰은 @theme 한 곳에, 본문 타이포는 .prose 한 곳에

초안은 로컬에서만 보인다

프론트매터에 draft: true 를 달면 개발 중에만 목록에 뜨고 빌드에서는 빠진다.

function isVisible(post: Post): boolean {
  return !post.draft || process.env.NODE_ENV === 'development';
}

쓰다 만 글을 브랜치에 묵혀두지 않고 그냥 main 에 올려둘 수 있다는 게 생각보다 크다.

다음

  • 메커니즘 시각화 컴포넌트를 붙여서 <Mechanism steps={...} /> 한 줄로 글에 꽂는다
  • 태그별 목록과 RSS
  • 글 안에서 특정 단계로 바로 거는 링크
← 글 목록