GitHub Flavored Markdown (GFM)

GitHub Flavored Markdown(GFM) 은 소프트웨어 개발 및 협업을 위해 특별히 설계된 추가 기능을 갖춘 GitHub 의 향상된 Markdown 버전입니다. 이 가이드는 GitHub 에서 사용할 수 있는 모든 특별한 구문 확장 기능을 다룹니다.

GitHub Flavored Markdown(GFM) 이란 무엇인가요?

GitHub Flavored Markdown 은 기본 Markdown 구문을 확장하여 다음과 같은 용도로 더 유용하게 만듭니다:

문서화 (READMEs, wikis)
이슈 추적
풀 리퀘스트
코드 리뷰
프로젝트 관리

주요 GFM 기능

1. 펜스드 코드 블록

GFM 은 언어별 구문 강조를 지원하는 펜스드 코드 블록을 지원합니다:

```javascript
function calculateSum(numbers) {
  return numbers.reduce((sum, num) => sum + num, 0);
}

const result = calculateSum([1, 2, 3, 4, 5]);
console.log(result); // Output: 15
```

javascript

function calculateSum(numbers) {
  return numbers.reduce((sum, num) => sum + num, 0);
}

const result = calculateSum([1, 2, 3, 4, 5]);
console.log(result); // Output: 15

2. 구문 강조

GitHub 는 수백 가지 언어에 대한 구문 강조를 지원합니다. 일반적인 언어는 다음과 같습니다:

bash

# Bash 스크립트
echo "Hello GitHub!"

python

# Python 스크립트
def greet(name):
    return f"Hello, {name}!"

java

// Java 코드
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello GitHub!");
    }
}

3. 작업 목록

체크박스가 있는 인터랙티브한 작업 목록을 만듭니다:

markdown

- [x] 사용자 인증 완료
- [x] API 엔드포인트 구현
- [ ] 단위 테스트 작성
  - [ ] 백엔드 테스트
  - [ ] 프론트엔드 테스트
- [ ] 프로덕션에 배포

[x] 사용자 인증 완료
[x] API 엔드포인트 구현
[ ] 단위 테스트 작성
- [ ] 백엔드 테스트
- [ ] 프론트엔드 테스트
[ ] 프로덕션에 배포

4. 표

GFM 은 표를 만들기 위한 간단한 구문을 제공합니다:

markdown

| 기능            | 지원 | 설명                          |
|-----------------|------|-------------------------------|
| 펜스드 코드     | ✅   | 언어별 강조                   |
| 작업 목록       | ✅   | 인터랙티브한 체크박스         |
| 표              | ✅   | 구조화된 데이터 표시          |
| 멘션            | ✅   | 사용자 및 팀 알림             |
| 이모지          | ✅   | 시각적 표현                   |

기능	지원	설명
펜스드 코드	✅	언어별 강조
작업 목록	✅	인터랙티브한 체크박스
표	✅	구조화된 데이터 표시
멘션	✅	사용자 및 팀 알림
이모지	✅	시각적 표현

5. 멘션

사용자나 팀을 언급하여 알림을 보냅니다:

markdown

@username - 특정 사용자 멘션
@team-name - 팀 멘션

6. 이모지

단축코드를 사용하여 이모지를 추가합니다:

markdown

:smile: - 😊
:thumbsup: - 👍
:heart: - ❤️
:rocket: - 🚀
:warning: - ⚠️

😄 - 😊 👍 - 👍 ❤️ - ❤️ 🚀 - 🚀 ⚠️ - ⚠️

7. 자동 링크

GFM 은 특정 유형의 콘텐츠를 자동으로 링크합니다:

이슈 및 풀 리퀘스트 번호

markdown

#123 - 이슈 123 에 링크
PR #456 - 풀 리퀘스트 456 에 링크

SHA 해시

markdown

a1b2c3d - 이 SHA 를 가진 커밋에 링크

이슈/풀 리퀘스트의 사용자 멘션

markdown

@username - 사용자 프로필에 자동으로 링크

URL

markdown

https://github.com - 자동으로 링크로 변환

8. 취소선

GFM 은 취소선 텍스트를 지원합니다:

markdown

~~이 텍스트는 취소선이 그어집니다~~

~~이 텍스트는 취소선이 그어집니다~~

9. 자동 링크 참조

GFM 은 다음에 대한 링크를 자동으로 생성합니다:

HTTP/HTTPS URL
이메일 주소
GitHub 이슈/풀 리퀘스트 번호
커밋 SHA

markdown

https://github.com/markdownlang/markdownlang.com
user@example.com
#123
PR #456
a1b2c3d4e5f6

10. 코드 블록 줄 강조

코드 블록에서 특정 줄을 강조합니다:

```javascript{2,4}
function calculateSum(numbers) {
  return numbers.reduce((sum, num) => sum + num, 0); // Highlighted
}

const result = calculateSum([1, 2, 3, 4, 5]); // Highlighted
console.log(result);
```

javascript

function calculateSum(numbers) {
  return numbers.reduce((sum, num) => sum + num, 0); // Highlighted
}

const result = calculateSum([1, 2, 3, 4, 5]); // Highlighted
console.log(result);

11. Diff 구문 강조

diff 구문을 사용하여 코드의 변경 사항을 강조합니다:

```diff
- const oldFunction = () => {
-   return "old value";
- };
+
+ const newFunction = () => {
+   return "new value";
+ };
```

diff

- const oldFunction = () => {
-   return "old value";
- };
+
+ const newFunction = () => {
+   return "new value";
+ };

12. GitHub 특정 마크업

경고

GitHub 문서에서 경고를 위해 특별한 구문을 사용합니다:

markdown

> [!NOTE]
> 이것은 참고 알림입니다.

> [!TIP]
> 이것은 팁 알림입니다.

> [!IMPORTANT]
> 이것은 중요한 알림입니다.

> [!WARNING]
> 이것은 경고 알림입니다.

> [!CAUTION]
> 이것은 주의 알림입니다.

NOTE

이것은 참고 알림입니다.

TIP

이것은 팁 알림입니다.

IMPORTANT

이것은 중요한 알림입니다.

WARNING

이것은 경고 알림입니다.

CAUTION

이것은 주의 알림입니다.

상대 링크

동일한 저장소의 파일 간에 탐색하기 위해 상대 링크를 사용합니다:

markdown

[README](/README.md)
[기여 가이드](/CONTRIBUTING.md)
[API 문서](/docs/api.md)

마우스 오버 텍스트가 있는 이미지 링크

markdown

![GitHub Logo](/images/github-logo.png "GitHub Logo - 마우스 오버 텍스트")

고급 GFM 사용법

1. 중첩 목록과 작업 목록

중첩 목록과 작업 목록을 결합합니다:

markdown

## 프로젝트 로드맵

### 1 단계: 계획
- [x] 프로젝트 범위 정의
- [x] 요구사항 식별
  - [x] 기능적 요구사항
  - [x] 비기능적 요구사항
- [x] 타임라인 생성

### 2 단계: 개발
- [x] 프로젝트 구조 설정
- [ ] 핵심 기능 구현
  - [x] 인증
  - [ ] 대시보드
  - [ ] API 통합

2. 이모지와 링크가 있는 표

이모지와 링크로 표를 향상시킵니다:

markdown

| 구성 요소      | 상태              | 유지 관리자  |
|----------------|-------------------|--------------|
| 인증           | ✅ 안정적         | @johndoe     |
| 데이터베이스   | ⚠️ 업데이트 필요  | @janedoe     |
| API            | 🚧 진행 중        | @bobsmith    |
| UI             | ✅ 안정적         | @alicesmith  |

구성 요소	상태	유지 관리자
인증	✅ 안정적	@johndoe
데이터베이스	⚠️ 업데이트 필요	@janedoe
API	🚧 진행 중	@bobsmith
UI	✅ 안정적	@alicesmith

3. 목록 내 코드 블록

목록 내에 코드 블록을 포함합니다:

markdown

1. 종속성 설치:

   ```bash
   npm install

개발 서버 실행:
bash
```
npm run dev
```
프로덕션 빌드:
bash
```
npm run build
```


### 4. 코드가 있는 인용 블록

인용구와 코드 블록을 결합합니다:

```markdown
> **전문가 팁:** 다음 명령을 사용하여 Git 상태를 빠르게 확인하세요:
>
> ```bash
> git status
> ```

전문가 팁: 다음 명령을 사용하여 Git 상태를 빠르게 확인하세요:
bash
git status

다양한 GitHub 컨텍스트에서의 GFM

README 파일

README 파일은 모든 GFM 기능을 지원하며 저장소 페이지에서 자동으로 렌더링됩니다.

이슈 및 풀 리퀘스트

작업 목록을 사용하여 진행 상황 추적
협업을 위해 팀 멤버 멘션
구문 강조가 있는 코드 스니펫 포함
#123 구문을 사용하여 관련 이슈/풀 리퀘스트 참조

빠른 반응을 위해 이모지 사용
줄 댓글로 코드의 줄 참조
인용 블록을 사용하여 특정 항목에 응답

위키

중첩 페이지로 콘텐츠 구성
구조화된 데이터에 표 사용
구문 강조가 있는 코드 예제 포함

모범 사례

1. 코드 스타일

markdown

<!-- ✅ 좋음 -->
```javascript
// 설명적인 함수 이름 사용
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

javascript

function f(i){return i.reduce((a,b)=>a+b.p,0)}```

2. 표 디자인

markdown

<!-- ✅ 좋음 -->
| 기능 | 설명 | 상태 |
|------|------|------|
| 기능 1 | 간단한 설명 | ✅ |
| 기능 2 | 다른 설명 | 🚧 |

<!-- ❌ 피하기 -->
| 기능 | 설명 | 상태 | | | |
|------|------|------|---|---|---|
| 기능 1 | 이 설명은 너무 길어서 모바일 장치에서 표를 읽기 어렵게 만듭니다 | ✅ | | | |

3. 작업 목록 사용

markdown

<!-- ✅ 좋음 -->
## 스프린트 백로그
- [x] 사용자 프로필 페이지 완료
- [ ] 검색 기능 구현
  - [x] 백엔드 API
  - [ ] 프론트엔드 컴포넌트
- [ ] 문서 작성

<!-- ❌ 피하기 -->
- [ ] 작업 1
- [ ] 작업 2
- [ ] 작업 3
- [ ] 작업 4
- [ ] 작업 5
(조직 없이 작업이 너무 많음)

GFM 대 표준 Markdown

기능	표준 Markdown	GitHub Flavored Markdown
펜스드 코드 블록	❌	✅
구문 강조	❌	✅
작업 목록	❌	✅
표	❌	✅
취소선	❌	✅
이모지	❌	✅
멘션	❌	✅
자동 링크	제한적	광범위

GFM 작업을 위한 도구

로컬 편집기

Visual Studio Code - GFM 미리 보기 및 확장 프로그램
Typora - 실시간 GFM 렌더링
Mark Text - GFM 지원

온라인 도구

GitHub Gist - GFM 스니펫 생성 및 공유
Dillinger - 온라인 GFM 편집기
StackEdit - 클라우드 동기화와 GFM 지원

명령줄 도구

glow - 터미널 GFM 렌더러
pandoc - GFM 을 다른 형식으로 변환
marked - Node.js GFM 파서

일반적인 문제 및 해결 방법

1. 코드 블록이 강조되지 않음

문제: 코드 블록에 구문 강조가 표시되지 않음

해결: 올바른 언어를 지정했는지 확인하세요:

markdown

<!-- ✅ 올바름 -->
```javascript
console.log("Hello");

jsx

console.log("Hello"); // JSX 가 아닌 코드에 javascript 대신 jsx 사용


### 2. 작업 목록 체크박스가 작동하지 않음

**문제:** 작업 목록 체크박스가 인터랙티브하지 않음

**해결:** 올바른 구문을 사용했는지 확인하세요 (`-` 와 `[ ]` 사이에 공백):

```markdown
<!-- ✅ 올바름 -->
- [ ] 작업

<!-- ❌ 잘못됨 -->
-[ ] 작업 (공백 없음)
-[x] 작업 (공백 없음)

3. 표가 올바르게 렌더링되지 않음

문제: 표 열이 정렬되지 않음

해결: 파이프가 올바르게 정렬되었는지 확인하세요:

markdown

<!-- ✅ 올바름 -->
| Column 1 | Column 2 |
|----------|----------|
| Data 1   | Data 2   |

<!-- ❌ 잘못됨 -->
|Column 1|Column 2|
|--|--|
|Data 1|Data 2|

다음 단계

GitHub Flavored Markdown 은 소프트웨어 개발에서 의사소통과 협업을 위한 강력한 도구입니다. 이러한 기능을 숙달하면 더 효과적인 문서를 만들고, 이슈를 더 잘 추적하며, 팀과 더 효율적으로 협업할 수 있습니다.

GitHub Flavored Markdown (GFM) ​