← All posts

Hello World

#mdx#nextjs#blog

2025-06-01

etc

Welcome to my portfolio blog. This is written in MDX — Markdown that supports React components.

const component = () => {
  return <Component>This is a react component.</Component>;
};

Callout 컴포넌트

ℹ️ Info

MDX에서는 React 컴포넌트를 Markdown 안에서 직접 사용할 수 있습니다.

💡 Tip

next-mdx-remote를 사용하면 서버 컴포넌트에서도 MDX를 렌더링할 수 있습니다.

⚠️ Warning

MDX 파일에서 컴포넌트를 사용하려면 page.tsx의 components prop에 등록해야 합니다.

🚨 Danger

등록되지 않은 컴포넌트를 사용하면 렌더링 오류가 발생합니다.

Steps 컴포넌트

  1. MDX 파일 생성

    content/blog/ 디렉토리에 .mdx 파일을 만듭니다.

  2. Frontmatter 작성

    파일 상단에 title, date, excerpt를 작성합니다.

  3. 컴포넌트 사용

    Callout, Steps 같은 커스텀 컴포넌트를 바로 사용할 수 있습니다.

Embed 컴포넌트

YouTube

YouTube 영상 ID만 넘기면 반응형으로 임베드됩니다.

CodeSandbox

CodeSandbox의 샌드박스 ID를 넘기면 에디터가 바로 표시됩니다.

X Post

X(트위터) 게시물 ID로 임베드합니다.

GitHub 컴포넌트

GitHub 레포지토리

owner/repo 형식으로 레포 카드를 표시합니다. GitHub API로 스타, 포크, 설명을 자동으로 불러옵니다.

vercel/next.js

The React Framework

JavaScript★ 140,164⑂ 31,248

GitHub Gist

Gist ID로 코드 스니펫을 임베드합니다.

Tabs 컴포넌트

items prop에 탭 이름 배열을 넘기고, 자식으로 <Tab>을 순서대로 작성합니다.

function greet(name: string): string {
  return `Hello, ${name}!`
}

FileTree 컴포넌트

<FileTree>, <Folder>, <File>로 디렉토리 구조를 시각화합니다.

  • src
    • app
      • layout.tsx
      • page.tsx
    • _shared
      • ui
        • mdx
          • callout.tsx
          • tabs.tsx
          • file-tree.tsx
          • steps.tsx
          • embed.tsx
  • package.json
  • tsconfig.json

코드 블록 — shiki 트랜스포머

diff (추가 / 삭제)

코드 라인 끝에 // [!code ++] 또는 // [!code --]를 붙입니다.

function fetchUser(id: string) {
  const url = `/api/user/${id}`; 
  const url = `/api/users/${id}`; 
  return fetch(url).then((r) => r.json());
}

라인 하이라이트

// [!code highlight]로 특정 라인을 강조합니다.

const config = {
  theme: "github-dark", 
  transformers: [transformerNotationDiff(), transformerNotationHighlight()],
};

메타 하이라이트

코드 펜스 메타에 {줄번호}로 라인을 지정할 수 있습니다.

const a = 1;
const b = 2;
const c = 3;
const d = 4;

라인 넘버

showLineNumbers를 메타에 추가합니다.

import { MDXRemote } from "next-mdx-remote/rsc"
import remarkGfm from "remark-gfm"
import rehypePrettyCode from "rehype-pretty-code"
 
export function MdxContent({ source }: { source: string }) {
  return <MDXRemote source={source} />
}

focus

// [!code focus]가 붙은 라인만 선명하게, 나머지는 흐려집니다. 호버하면 전체 표시됩니다.

function add(a: number, b: number) {
  const result = a + b; 
  return result; 
}

error / warning

function divide(a: number, b: number) {
  if (b === 0) throw new Error("0으로 나눌 수 없습니다."); 
  if (b < 0) console.warn("음수 제수"); 
  return a / b;
}

GFM — remark-gfm

테이블

컴포넌트용도난이도
Callout경고, 팁, 정보 박스⭐
Steps단계별 가이드⭐
Tabs코드/내용 전환⭐⭐
FileTree디렉토리 구조⭐⭐

취소선 / 체크박스

더 이상 사용하지 않는 기능

  • remark-gfm 추가
  • shiki 트랜스포머 추가
  • Tabs 컴포넌트
  • FileTree 컴포넌트
  • ImageZoom 컴포넌트