>_
#MDX#테스트#마크다운

[테스트] MDX 스타일 테스트 - 표, 코드, 마크다운

·4분 읽기Draft
3 of 5

MDX 스타일 테스트

이 포스트는 블로그의 다양한 MDX 스타일이 올바르게 렌더링되는지 테스트하기 위한 글입니다.

표 (Table) 테스트

기본 표

이름역할스택
AliceFrontendReact, TypeScript
BobBackendNode.js, PostgreSQL
CharlieDevOpsDocker, Kubernetes

정렬이 다른 표

왼쪽 정렬가운데 정렬오른쪽 정렬
LeftCenterRight
텍스트텍스트텍스트
123456789

복잡한 표

프레임워크언어장점단점GitHub Stars
Next.jsTypeScriptSSR, SSG, ISR 지원러닝 커브120k+
RemixTypeScript웹 표준 중심생태계 작음27k+
AstroMulti빠른 빌드, 콘텐츠 중심SPA 어려움40k+
SvelteKitSvelte번들 크기 작음커뮤니티 작음17k+

코드 블럭 테스트

JavaScript

javascript
// 피보나치 수열
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const result = fibonacci(10);
console.log(`10번째 피보나치 수: ${result}`);

TypeScript

typescript
interface User {
  id: number;
  name: string;
  email: string;
  roles: ("admin" | "user" | "guest")[];
}

async function fetchUser(id: number): Promise<User | null> {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) return null;
    return response.json();
  } catch (error) {
    console.error("Failed to fetch user:", error);
    return null;
  }
}

Python

python
from dataclasses import dataclass
from typing import List, Optional

@dataclass
class BlogPost:
    title: str
    content: str
    tags: List[str]
    published: bool = False

    def publish(self) -> None:
        self.published = True
        print(f"Published: {self.title}")

# 사용 예시
post = BlogPost(
    title="Hello World",
    content="첫 번째 포스트입니다.",
    tags=["python", "tutorial"]
)
post.publish()

CSS

css
.card {
  background: var(--color-mdx-bg);
  border: 1px solid var(--color-mdx-border);
  border-radius: 8px;
  padding: 1.5rem;
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

Bash / Shell

bash
# 프로젝트 설정
npm create next-app@latest my-blog --typescript --tailwind
cd my-blog

# 의존성 설치
npm install next-mdx-remote gray-matter
npm install -D remark-gfm rehype-slug rehype-prism-plus

# 개발 서버 실행
npm run dev

JSON

json
{
  "name": "my-blog",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^15.0.0",
    "react": "^19.0.0",
    "next-mdx-remote": "^5.0.0"
  }
}

Markdown

markdown
# 제목 1

## 제목 2

일반 텍스트와 **굵은 글씨**, *기울임*, ~~취소선~~을 사용할 수 있습니다.

### 리스트

- 항목 1
- 항목 2
  - 중첩 항목

1. 첫 번째
2. 두 번째

### 링크와 이미지

[링크 텍스트](https://example.com)

![이미지 설명](image.png)

### 코드

인라인 `코드`와 코드 블럭:

\`\`\`javascript
console.log("Hello!");
\`\`\`

### 표

| 헤더 1 | 헤더 2 |
|--------|--------|
| 셀 1   | 셀 2   |

> 인용문도 지원됩니다.

인라인 코드

본문 중에 const, let, function 같은 키워드나 npm install 같은 명령어를 언급할 때 인라인 코드를 사용합니다.

파일 경로도 app/components/mdx/index.tsx처럼 표시할 수 있습니다.

리스트 테스트

순서 없는 리스트

  • 첫 번째 항목
  • 두 번째 항목
    • 중첩된 항목 A
    • 중첩된 항목 B
  • 세 번째 항목

순서 있는 리스트

  1. 프로젝트 초기화
  2. 의존성 설치
  3. 컴포넌트 개발
    1. 레이아웃 설계
    2. 스타일링 적용
  4. 테스트 및 배포

인용문 (Blockquote)

좋은 코드는 그 자체로 최고의 문서다. 주석을 추가하려고 할 때, 스스로에게 물어보라: "이 코드를 어떻게 개선하면 주석이 필요 없을까?" — Steve McConnell

링크 테스트

강조 테스트

일반 텍스트 중에서 굵은 글씨와 기울임 글씨를 사용할 수 있습니다.

굵은 기울임도 가능합니다.

하이라이트도 지원됩니다.

수평선

아래는 수평선입니다:

수평선 위의 내용과 아래 내용을 구분합니다.

Callout 컴포넌트

이것은 Callout 컴포넌트입니다. 중요한 정보나 주의사항을 강조할 때 사용합니다.

TLDR 컴포넌트

🐰 TL;DR

  • 핵심 내용을 요약해서 보여주는 컴포넌트입니다
  • 글의 맨 위에 배치하면 독자가 빠르게 내용을 파악할 수 있습니다
  • 보통 3~4줄 정도로 작성합니다

TSX 코드 블럭

tsx
import { useState } from "react";

interface CounterProps {
  initialCount?: number;
}

export function Counter({ initialCount = 0 }: CounterProps) {
  const [count, setCount] = useState(initialCount);

  return (
    <button onClick={() => setCount((c) => c + 1)}>
      클릭 횟수: {count}
    </button>
  );
}

체크박스 리스트

  • 표 (Table) 테스트
  • 코드 블럭 테스트
  • 인라인 코드
  • 아직 안 한 항목
  • 이것도 아직

결론

모든 스타일이 잘 렌더링되고 있다면 성공입니다! 특히 표가 프로젝트 색상에 맞게 잘 보이는지 확인해주세요.