mdx 파일과 마크다운 가이드

• Markdown 이란?
• 1.기본 마크다운 문법
  • 1.1 헤더(Headers): #, ##, ###, ####, #####, ###### 등을 사용하여 다양한 레벨의 헤더를 생성합니다.
  • 1.2 강조(Emphasis): 텍스트 또는 텍스트 (이탤릭체), 텍스트 또는 텍스트 (볼드체), ~~텍스트~~ (취소선).
  • 1.3 목록(Lists): - 또는 * (순서 없는 목록), 1., 2. 등 (순서 있는 목록).
  • 1.4 이미지(Images)
  • 1.5 링크(Links)
  • 1.6 인용(Blockquotes): >를 사용하여 인용문을 생성합니다.
  • 1.6 코드(Code): 인라인 코드는 코드로, 코드 블록은 ` 를 3개 연달아 사용합니다.
  • 1.7 목록구분
  • 1.8 표
• 2.JSX와 리액트 컴포넌트
  • 예시
• 3. 동적 JSX 사용
  • 코드
  • 결과
• 4. 메타데이터 사용 (Frontmatter)

Markdown 이란?

Markdown은 웹에서 텍스트를 스타일링하는 방법입니다. 문서의 표시를 제어하여 단어를 굵게 하거나 이탤릭체로 표현하고, 이미지를 추가하며 목록을 만드는 것을 할 수 있습니다.

마크다운 관련 깃허브 공식문서 입니다. https://guides.github.com/features/mastering-markdown/

1.기본 마크다운 문법

1.1 헤더(Headers): #, ##, ###, ####, #####, ###### 등을 사용하여 다양한 레벨의 헤더를 생성합니다.

# This is a h1 tag

## This is a h2 tag

#### This is a h4 tag

1.2 강조(Emphasis): 텍스트 또는 텍스트 (이탤릭체), 텍스트 또는 텍스트 (볼드체), 텍스트 (취소선).

_This text will be italic_

**This text will be bold**

_You **can** combine them_

This text will be italic

This text will be bold

You can combine them

1.3 목록(Lists): - 또는 * (순서 없는 목록), 1., 2. 등 (순서 있는 목록).

순서 없는 목록

- Item 1
- Item 2
  - Item 2a
  - Item 2b

• Item 1
• Item 2
  • Item 2a
  • Item 2b

순서 있는 목록

1. Item 1
1. Item 2
1. Item 3
   1. Item 3a
   1. Item 3b

1. Item 1
2. Item 2
3. Item 3
   1. Item 3a
   2. Item 3b

1.4 이미지(Images)

로 이미지를 삽입합니다.

![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
Format: ![Alt Text](url)

1.5 링크(Links)

텍스트를 사용하여 하이퍼링크를 생성합니다.

http://github.com - automatic!
[GitHub](http://github.com)

http://github.com - automatic! GitHub

1.6 인용(Blockquotes): >를 사용하여 인용문을 생성합니다.

인용구문 테스트:

> 유의 바랍니다.

> 주의 바랍니다.

인용구문 테스트:

유의 바랍니다.

주의 바랍니다.

1.6 코드(Code): 인라인 코드는 코드로, 코드 블록은 ` 를 3개 연달아 사용합니다.

{언어명} 코드

나는 python을 좋아합니다.

print("python")

1.7 목록구분

- [x] 목록 구문이 필요합니다
- [x] 이것은 완료된 항목입니다
- [ ] 이것은 미완료된 항목입니다

• 목록 구문이 필요합니다
• 이것은 완료된 항목입니다
• 이것은 미완료된 항목입니다

1.8 표

첫 번째 행에는 하이픈 -으로 구분한 다음 각 열을 파이프 |로 분리하여 표를 만들 수 있습니다

| 첫 번째 헤더                | 두 번째 헤더                |
| --------------------------- | ---------------------------- |
| 셀 1의 내용                | 셀 2의 내용                |
| 첫 번째 열의 내용          | 두 번째 열의 내용          |

2.JSX와 리액트 컴포넌트

MDX에서는 JSX 문법을 사용할 수 있으므로, 리액트 컴포넌트를 마크다운 파일에 직접 삽입할 수 있습니다. 컴포넌트 삽입: MDX 파일에서 import 구문을 사용하여 리액트 컴포넌트를 가져온 후, JSX 형식으로 해당 컴포넌트를 사용할 수 있습니다.

예시

3. 동적 JSX 사용

MDX 내에서 JavaScript 표현식을 안에 삽입하여 동적 내용을 생성할 수 있습니다.

코드

Today's date is {new Date().toLocaleDateString()}.

결과

Today's date is 9/19/2024.

4. 메타데이터 사용 (Frontmatter)

MDX 파일의 최상단에 YAML 형식으로 문서의 메타데이터를 정의할 수 있습니다. 이는 제목, 날짜, 태그 등의 정보를 포함할 수 있습니다.

자주 사용되는 메타데이터 리스트

• title
• date
• tags
• draft
• summary
• images
• lastmod
• authors
• layout
• bibliography