개요

소개

이 블로그는 unified와 여러 remark, rehype 패키지를 통해 마크다운과 MDX를 파싱합니다. next-mdx-remote 덕분에 webpack 설정 없이도 .mdx와 .md 파일을 유연하게 처리할 수 있습니다.

문법은 GitHub Flavored Markdown(GFM)을 기준으로 하며, mdx-prism이 코드 블록의 구문 강조를 담당합니다. 아래에서 어떻게 보이는지 데모를 확인해 보세요.

이 마크다운 치트시트는 GitHub의 공식 가이드를 바탕으로 작성되었습니다.

마크다운이란?

마크다운은 웹에서 텍스트에 서식을 적용하는 간단한 방법입니다. 문서의 표시 방식을 직접 제어할 수 있죠. 단어를 굵게 만들거나 기울이고, 이미지를 추가하거나 목록을 만드는 등 다양한 작업을 할 수 있습니다.

대부분의 마크다운은 일반 텍스트에 #나 * 같은 몇 가지 특수 문자를 더하는 것만으로 완성됩니다.

헤더 (Headers)

# h1 태그
## h2 태그
#### h4 태그

h1 태그

h2 태그

h4 태그

강조 (Emphasis)

_이 텍스트는 기울임꼴이 됩니다_

**이 텍스트는 굵게 표시됩니다**

_이렇게 **조합**해서 사용할 수도 있습니다_

이 텍스트는 기울임꼴이 됩니다

이 텍스트는 굵게 표시됩니다

이렇게 조합해서 사용할 수도 있습니다

줄바꿈 (Line Breaks)

This example
Will span two lines

» This example Will span two lines

.md 파일에서 위 예시는 줄바꿈 없이 한 줄로 표시됩니다. 줄바꿈을 추가하려면 다음 중 하나를 사용해야 합니다:

1. 첫 번째 줄의 끝에 공백 두 개를 넣으세요.

This example
Will span two lines

2. 첫 번째 줄의 끝에 백슬래시를 넣습니다.

This example\
Will span two lines

3. 첫 번째 줄의 끝에 HTML 단일 줄바꿈 태그를 포함합니다.

This example<br/>
Will span two lines

This example
Will span two lines

목록 (Lists)

순서 없는 목록

- 항목 1
- 항목 2
  - 항목 2a
  - 항목 2b

• 항목 1
• 항목 2
  • 항목 2a
  • 항목 2b

순서 있는 목록

1. 항목 1
2. 항목 2
3. 항목 3
   1. 항목 3a
   2. 항목 3b

1. 항목 1
2. 항목 2
3. 항목 3
   1. 항목 3a
   2. 항목 3b

이미지 (Images)

마크다운의 기본 문법을 사용하여 이미지를 바로 표시할 수 있습니다.

![tech spoon 로고](https://res.cloudinary.com/dm5amo7c8/image/upload/v1752631898/brand-icon.png)
사용법: ![대체 텍스트](URL)

CldImage 컴포넌트 사용

또는, CldImage 컴포넌트를 사용하여 이미지를 삽입할 수도 있습니다. 이 방법을 사용하려면, 먼저 이미지를 tech-spoon Cloudinary 저장소에 업로드해야 합니다.

그 다음, 컴포넌트의 src prop에는 Public ID 또는 Cloudinary URL를 전달해야 합니다.

<CldImage
  src="brand-icon"
  alt="brand-icon"
  width={100}
  height={100}
  replace={{
    from: 'dot',
    to: 'spoon',
    preserveGeometry: true,
  }}
/>

컴포넌트를 사용하면 Cloudinary의 고성능 CDN을 통해 이미지가 전송되고, 기기 화면 크기에 맞춰 최적화된 이미지를 자동으로 제공(srcset)하는 등 추가적인 성능 이점을 얻을 수 있습니다.

부가적인 기능은 해당 문서를 참고해 주세요.

비디오 (Video)

비디오를 삽입하려면 CldVideoPlayer 컴포넌트를 사용하세요.

먼저 비디오 파일을 tech-spoon Cloudinary 저장소에 업로드한 뒤, 컴포넌트의 src prop에 Public ID 또는 Cloudinary URL을 전달하면 됩니다.

<CldVideoPlayer src="samples/elephants" width="450" height="253" />

GIF처럼 사용하기

CldImage 컴포넌트로 gif를 표시할 수도 있지만, 최대 렌더링 크기가 0.5MP로 제한되어 있어 긴 gif는 지원되지 않습니다.

이 경우 CldVideoPlayer에 likeGif prop을 추가하면, 비디오를 gif처럼 재생할 수 있습니다.

<CldVideoPlayer
  src="samples/elephants"
  width="450"
  height="253"
+ likeGif
/>

링크 (Links)

http://github.com - URL을 그대로 넣으면 자동으로 링크가 됩니다.
[GitHub](http://github.com)

http://github.com - URL을 그대로 넣으면 자동으로 링크가 됩니다. GitHub

인용문 (Blockquotes)

카니예 웨스트(Kanye West)는 이렇게 말했습니다:

> 우리는 미래를 살고 있기에,
> 현재는 우리의 과거다.

카니예 웨스트(Kanye West)는 이렇게 말했습니다:

우리는 미래를 살고 있기에, 현재는 우리의 과거다.

인라인 코드 (Inline code)

이 부분에는 `<addr>` 요소를 사용하는 것이 좋겠습니다.

이 부분에는 <addr> 요소를 사용하는 것이 좋겠습니다.

구문 강조 (Syntax highlighting)

다음은 GitHub Flavored Markdown을 활용한 구문 강조 예시입니다.

코드 제목과 함께 표시

```js:fancyAlert.js
function fancyAlert(arg) {
  if (arg) {
    $.facebox({ div: '#foo' })
  }
}
```

function fancyAlert(arg) {
  if (arg) {
    $.facebox({ div: '#foo' })
  }
}

특정 줄 하이라이트 및 줄 번호 표시

```js {1,3-4} showLineNumbers
function fancyAlert(arg) {
  if (arg) {
    $.facebox({ div: '#foo' })
  }
}
```

function fancyAlert(arg) {
  if (arg) {
    $.facebox({ div: '#foo' })
  }
}

차이점 강조 (Diff)

```diff-js
function fancyAlert(arg) {
  if (arg) {
-   $.facebox({ div: '#foo' })
+   $.facebox({ div: '#bar' })
  }
}
```

function fancyAlert(arg) {
  if (arg) {
-   $.facebox({ div: '#foo' })
+   $.facebox({ div: '#bar' })
  }
}

각주 (Footnotes)

여기에 간단한 각주[^1]를 추가할 수 있습니다. 각주 뒤에는 일반 텍스트를 계속해서 작성하면 됩니다.

[^1]: 여기에 각주에 대한 설명을 작성합니다.

여기에 간단한 각주¹를 추가할 수 있습니다. 각주 뒤에는 일반 텍스트를 계속해서 작성하면 됩니다.

작업 목록 (Task Lists)

- [x] 완료된 항목
- [ ] 미완료 항목
- [ ] 순서 있는 목록이나 순서 없는 목록 구문이 필요합니다.

• 완료된 항목
• 미완료 항목
• 순서 있는 목록이나 순서 없는 목록 구문이 필요합니다.

표 (Tables)

하이픈(-)으로 헤더와 셀을 구분하고, 파이프(|)로 각 열을 구분하여 표를 만들 수 있습니다.

| 첫 번째 헤더      | 두 번째 헤더      |
| ----------------- | ----------------- |
| 첫 번째 셀 내용   | 두 번째 셀 내용   |
| 첫 번째 열의 다른 내용 | 두 번째 열의 다른 내용 |

취소선 (Strikethrough)

물결표 두 개(~~)로 단어를 감싸면 이렇게 취소선이 적용됩니다.

수학 구문 (Math Syntax)

수학 구문도 지원하여 복잡한 방정식과 수식을 문서에 포함할 수 있습니다. 이는 주로 LaTeX 문법을 기반으로 하며, KaTeX와 같은 렌더링 라이브러리를 통해 표시됩니다.

양력($$L$$)은 다음과 같은 식으로 양력 계수($$C_L$$)에 의해 결정됩니다.

양력($L$)은 양력 계수($C_L$)를 이용한 아래 식을 통해 계산할 수 있습니다.

// 첫 번째 방식

$$
L = \frac{1}{2} \rho v^2 S C_L
$$

// 두 번째 방식

```math
L = \frac{1}{2} \rho v^2 S C_L
```

알림 (Alerts)

알림을 추가하려면, 특수 블록 인용문 라인에 알림 유형을 지정한 다음, 표준 블록 인용문(Blockquotes)으로 알림 정보를 작성합니다.

다음 5가지 유형의 알림을 사용할 수 있습니다:

> [!NOTE]
> 사용자가 내용을 빠르게 훑어볼 때도 알아야 할 유용한 정보입니다.

> [!TIP]
> 더 좋거나 쉽게 작업을 수행하는 데 도움이 되는 조언입니다.

> [!IMPORTANT]
> 사용자가 목표를 달성하기 위해 알아야 할 핵심 정보입니다.

> [!WARNING]
> 문제를 방지하기 위해 즉각적인 사용자 주의가 필요한 긴급 정보입니다.

> [!CAUTION]
> 특정 작업의 위험 또는 부정적인 결과에 대해 조언합니다.

아코디언 컴포넌트 (Accordion)

부가적인 설명은 Accordion 컴포넌트를 활용해 접었다 펼 수 있도록 작성할 수 있습니다.

<Accordion summary="아코디언 컴포넌트 사용법" defaultOpen>
- `summary` prop에는 아코디언 제목을, `defaultOpen` prop을 추가하면 기본적으로 펼쳐진 상태로 표시됩니다.
- `children`에는 아코디언 내부에 표시할 내용을 markdown 형식으로 작성합니다.

```tsx
<Accordion summary="제목" defaultOpen={false}>
  아코디언 내부에 표시할 내용
</Accordion>
```

</Accordion>

<Accordion summary="제목" defaultOpen={false}>
  아코디언 내부에 표시할 내용
</Accordion>

목차 컴포넌트 (TOC)

목차 생성을 간편하게 하려면 TOCInline 컴포넌트를 사용할 수 있습니다.

예를 들어, 이 게시물의 TOC는 다음 코드를 사용하여 생성되었습니다.

<TOCInline
  toc={props.toc}
  exclude={['개요', 'h1 태그', 'h2 태그', 'h4 태그']}
  asDisclosure
  toHeading={4}
/>

제목 표시 설정

fromHeading과 toHeading prop을 설정하여 표시할 제목의 범위를 지정하거나, exclude prop에 특정 제목(문자열 또는 문자열 배열)을 전달하여 제외할 수 있습니다.

들여쓰기 설정

기본적으로 깊이가 3 이하인 모든 제목은 들여쓰기됩니다. 이 동작은 indentDepth prop으로 변경할 수 있습니다.

확장형 목차 (Disclosure)

asDisclosure prop을 true로 설정하면, 목차 전체가 HTML의 <details> 태그로 감싸지고 제목 부분은 <summary> 태그로 생성됩니다. 이를 통해 확장/축소 가능한 목차를 만들 수 있습니다.

이때 collapse prop을 true로 설정하면 목차를 기본적으로 접힌 상태로 표시합니다.

아래는 disclosure 요소를 사용한 전체 목차 렌더링 예시입니다

<TOCInline toc={props.toc} asDisclosure />

스타일 커스터마이징

ulClassName과 liClassName prop을 사용하여 각각 <ul> 및 <li> 요소에 CSS 클래스를 추가함으로써 목차의 스타일을 직접 커스터마이징할 수 있습니다.