TIL Note

He11divers TIL 마크다운 사용 가이드

현재 TIL 뷰어에서 지원하는 마크다운 문법과 작성 방법

TIL 파일 만들기

내 GitHub 아이디 폴더인 raw/r3j0 아래에 .md 파일을 만들면 왼쪽 사이드바에 자동으로 표시됩니다. 폴더를 더 만들어 주제별로 글을 나눌 수도 있습니다.

raw/
└── r3j0/
    ├── javascript/
    │   └── event-loop.md
    └── markdown-guide.md

모든 TIL 파일은 문서 맨 위에 다음과 같은 frontmatter가 필요합니다.

---
title: 이벤트 루프 정리
description: 태스크 큐와 마이크로태스크 큐의 실행 순서
date: "2026-09-01"
---
항목필수 여부작성 규칙
title필수비어 있지 않은 문자열
description선택비어 있지 않은 문자열
date필수따옴표로 감싼 YYYY-MM-DD 형식의 실제 날짜

title, description, date는 글 상단에 자동으로 표시됩니다. 따라서 본문에서는 같은 제목을 다시 # 제목으로 쓰기보다 ## 첫 번째 주제부터 시작하는 것을 권장합니다.

제목

#의 개수로 제목의 단계를 정합니다.

# 제목 1
## 제목 2
### 제목 3
#### 제목 4

문서 구조는 순서를 건너뛰지 않고 ## 아래에 ###, 그 아래에 ####를 사용하는 편이 읽기 좋습니다.

문단과 줄바꿈

빈 줄을 하나 넣으면 새로운 문단이 됩니다.

첫 번째 문단입니다.

두 번째 문단입니다.

같은 문단 안에서 강제로 줄을 바꾸려면 문장 끝에 공백 두 칸을 넣습니다. 다만 내용이 달라진다면 강제 줄바꿈보다 문단을 나누는 것이 좋습니다.

글자 꾸미기

**굵은 글자**
*기울임 글자*
***굵고 기울인 글자***
~~취소선~~
`인라인 코드`

렌더링 결과:

굵은 글자, 기울임 글자, 굵고 기울인 글자, 취소선, 인라인 코드

목록

순서 없는 목록은 -, 순서 있는 목록은 1.로 작성합니다. 들여쓰기하면 하위 목록을 만들 수 있습니다.

- JavaScript
  - 실행 컨텍스트
  - 이벤트 루프
- React

1. 문제를 재현한다.
2. 원인을 찾는다.
3. 해결 과정을 기록한다.

렌더링 결과:

  • JavaScript
    • 실행 컨텍스트
    • 이벤트 루프
  • React
  1. 문제를 재현한다.
  2. 원인을 찾는다.
  3. 해결 과정을 기록한다.

체크리스트

GitHub 스타일 체크리스트를 지원합니다.

- [x] 개념 정리
- [x] 예제 작성
- [ ] 복습하기

렌더링 결과:

  • 개념 정리
  • 예제 작성
  • 복습하기

체크박스는 진행 상태를 보여 주기 위한 표시이며, 뷰어 화면에서 직접 클릭해 파일의 값을 바꾸지는 못합니다.

링크

[GitHub](https://github.com)
https://github.com

렌더링 결과:

GitHub

https://github.com

외부 링크는 https://를 포함한 전체 주소로 작성하는 것이 안전합니다.

인용문

줄 앞에 >를 붙여 인용문이나 핵심 메모를 강조할 수 있습니다.

> 오늘 배운 내용을 한 문장으로 요약합니다.
>
> 인용문 안에서도 **강조**와 `코드`를 사용할 수 있습니다.

렌더링 결과:

오늘 배운 내용을 한 문장으로 요약합니다.

인용문 안에서도 강조와 코드를 사용할 수 있습니다.

코드

짧은 코드나 이름은 백틱 하나로 감쌉니다: Array.prototype.map.

여러 줄 코드는 백틱 세 개로 감싸고, 시작 백틱 뒤에 언어 이름을 적습니다. 언어 이름이 있으면 지원되는 언어에 한해 구문 강조가 적용됩니다.

```typescript
type Til = {
  title: string;
  learnedAt: string;
};

const today: Til = {
  title: "Markdown viewer",
  learnedAt: "2026-09-01",
};
```

렌더링 결과:

type Til = {
  title: string;
  learnedAt: string;
};

const today: Til = {
  title: "Markdown viewer",
  learnedAt: "2026-09-01",
};

언어를 지정하지 않은 코드 블록도 표시되지만 구문 강조는 적용되지 않습니다.

표

표와 열 정렬을 지원합니다. 구분선의 콜론 위치로 왼쪽, 가운데, 오른쪽 정렬을 지정합니다.

| 문법 | 용도 | 지원 여부 |
| :--- | :---: | ---: |
| 표 | 비교 | O |
| 체크리스트 | 진행 상태 | O |
| HTML | 직접 렌더링 | X |

렌더링 결과:

문법용도지원 여부
표비교O
체크리스트진행 상태O
HTML직접 렌더링X

화면보다 표가 넓으면 표 영역을 가로로 스크롤할 수 있습니다.

구분선

별도의 줄에 하이픈 세 개를 적으면 내용을 구분하는 선이 생깁니다.

---

렌더링 결과:

이미지

외부 이미지 주소와 TIL 파일 기준 상대경로를 모두 사용할 수 있습니다.

![이미지 설명](https://example.com/image.png)
![프로젝트 구조](./images/project-structure.png)
![상위 폴더의 이미지](../images/shared-diagram.webp)

로컬 이미지는 마크다운 파일을 기준으로 경로를 계산합니다. 예를 들어 raw/r3j0/javascript/event-loop.md에서 ./images/event-loop.png를 사용하면 실제 파일은 raw/r3j0/javascript/images/event-loop.png에 두어야 합니다.

지원하는 로컬 이미지 형식은 .png, .jpg, .jpeg, .gif, .svg, .webp입니다. 대체 텍스트에는 이미지가 보이지 않을 때도 내용을 이해할 수 있는 설명을 적어 주세요.

이스케이프

마크다운 기호 자체를 글에 표시하려면 기호 앞에 역슬래시(\)를 붙입니다.

\# 제목이 아니라 일반 텍스트
\*기울임이 아니라 별표가 포함된 텍스트\*

렌더링 결과:

# 제목이 아니라 일반 텍스트

*기울임이 아니라 별표가 포함된 텍스트*

지원 범위와 주의할 점

  • 표, 체크리스트, 취소선, 자동 링크를 포함한 GitHub Flavored Markdown을 지원합니다.
  • 원시 HTML 태그는 보안상 HTML로 렌더링하지 않습니다. 레이아웃은 마크다운 문법으로 표현해 주세요.
  • 코드 블록의 언어 이름은 javascript, typescript, tsx, css, bash, json처럼 일반적으로 쓰이는 소문자 식별자를 권장합니다.
  • 파일 확장자는 반드시 .md여야 사이드바와 TIL 목록에서 찾을 수 있습니다.
  • frontmatter의 날짜는 글 정렬과 기여 기록에 사용되므로 실제 작성 날짜를 정확히 적어 주세요.

바로 복사해서 쓰는 템플릿

---
title: 오늘 배운 내용
description: 무엇을 배우고 기록했는지 한 줄로 요약
date: "2026-09-01"
---

## 배운 내용

핵심 개념을 내 언어로 설명합니다.

## 예제

```typescript
// 직접 실행해 본 예제를 작성합니다.
```

## 알게 된 점

- 헷갈렸던 부분
- 새롭게 이해한 부분
- 다음에 더 알아볼 부분

## 참고 자료

- [자료 이름](https://example.com)