ANIMATION & MDX
Showcase
조작 가능한 애니메이션과 MDX 읽기 도구를 살펴보고 작성 문법을 복사해 사용하세요
자동 재생 장면
두 데모는 현재 페이지에 맞춘 경량 SVG 프로토타입이며 각 도구의 제작 모델과 경계를 보여줍니다
MDX 읽기 도구와 작성 문법
미리보기를 직접 조작하고 MDX 원문을 복사해 글에 사용하세요.
형광펜 강조
독자가 다시 찾을 핵심 구절을 강조합니다.
미리보기
핵심 결론은 재시도해도 같은 결과를 유지하는 것입니다.
핵심 결론은 <mark>재시도해도 같은 결과를 유지하는 것</mark>입니다.
작성 시 주의점: 짧은 구절을 강조하고 색상 없이도 의미가 전달되게 씁니다. ==강조== 문법은 지원하지 않습니다.
GitHub 알림 다섯 종류
참고·팁·중요·주의·경고를 제목과 아이콘으로 구분합니다.
미리보기
> [!NOTE]
> 이 설정은 프로젝트 전체에 적용됩니다.
> [!TIP]
> 변경 전에 현재 상태를 확인하세요.
> [!IMPORTANT]
> 먼저 기존 설정을 백업하세요.
> [!WARNING]
> 실행 중인 작업이 중단될 수 있습니다.
> [!CAUTION]
> 삭제한 데이터는 복구하지 못할 수 있습니다.
작성 시 주의점: 표식은 인용문의 첫 줄에 대문자로 단독 작성합니다. 아래는 종류 비교용이며 실제 글에서는 필요한 알림만 사용합니다.
부연 설명 접기
본문 흐름을 유지하면서 추가 설명을 선택해 읽게 합니다.
미리보기
<details>
<summary>왜 요청 식별자를 저장하나요?</summary>
같은 요청을 다시 받았을 때 이미 처리한 결과를 반환하기 위해서입니다.
- 처리한 요청의 식별자를 저장합니다.
- 자세한 정의는 [멱등성](#showcase-ko-glossary-idempotency)을 확인하세요.
</details>
작성 시 주의점: summary는 첫 자식으로 작성하고 Markdown 앞뒤에 빈 줄을 둡니다. 핵심 결론이나 경고는 접지 않습니다.
용어 정의와 이동 링크
반복해서 쓰는 용어의 정의로 바로 이동합니다.
미리보기
자세한 정의는 멱등성.
- 멱등성
같은 작업을 여러 번 수행해도 한 번 수행한 것과 같은 결과가 되는 성질입니다.
- 재시도
- 실패하거나 응답을 받지 못한 작업을 다시 요청하는 것입니다.
자세한 정의는 [멱등성](#showcase-ko-glossary-idempotency).
<dl>
<dt id="showcase-ko-glossary-idempotency">멱등성</dt>
<dd>
같은 작업을 여러 번 수행해도 한 번 수행한 것과 같은 결과가 되는
성질입니다.
</dd>
<dt>재시도</dt>
<dd>실패하거나 응답을 받지 못한 작업을 다시 요청하는 것입니다.</dd>
</dl>
작성 시 주의점: id와 링크를 함께 수정하고 문서 안에서 고유한 접두사를 사용합니다.
코드 강조·줄 번호·설명
주목할 코드 줄과 설명을 함께 제공합니다.
미리보기
const userId = "reader";
const requestId = "request-1";
const key = userId + ":" + requestId; 1–2행
사용자와 요청의 식별자를 준비합니다.3행
두 값을 연결해 사용자별 요청을 구분합니다. 실제 구현에서는 만료와 동시성도 처리해야 합니다.
<CodeExample>
```ts title="request-key.ts" lineNumbers
const userId = "reader";
const requestId = "request-1";
const key = userId + ":" + requestId; // [!code highlight]
```
<CodeNotes>
<CodeNote lines="1–2행">사용자와 요청의 식별자를 준비합니다.</CodeNote>
<CodeNote lines="3행">
두 값을 연결해 <mark>사용자별 요청</mark>을 구분합니다. 실제 구현에서는
만료와 동시성도 처리해야 합니다.
</CodeNote>
</CodeNotes>
</CodeExample>
작성 시 주의점: 코드가 바뀌면 CodeNote의 lines도 갱신합니다. title, lineNumbers와 강조 주석을 코드 울타리에 그대로 작성합니다.
변경 전·후 비교와 diff
같은 조건에서 변경의 효과를 나란히 비교합니다.
미리보기
변경 전
사용자 식별자만 사용하면 서로 다른 요청도 같은 요청으로 취급할 수 있습니다.
const key = userId;변경 후
사용자와 요청 식별자를 함께 사용하면 요청 단위를 구분할 수 있습니다.
const key = userId + ":" + requestId;const key = userId;
const key = userId + ":" + requestId;
<Comparison title="요청 키의 변경">
<ComparisonItem title="변경 전">
사용자 식별자만 사용하면 서로 다른 요청도 같은 요청으로 취급할 수 있습니다.
```ts title="before.ts"
const key = userId;
```
</ComparisonItem>
<ComparisonItem title="변경 후">
사용자와 요청 식별자를 함께 사용하면 요청 단위를 구분할 수 있습니다.
```ts title="after.ts"
const key = userId + ":" + requestId;
```
</ComparisonItem>
</Comparison>
<CodeExample>
```ts title="key-change.ts"
const key = userId; // [!code --]
const key = userId + ":" + requestId; // [!code ++]
```
</CodeExample>
작성 시 주의점: 각 항목에 구체적인 제목을 붙이고 색상뿐 아니라 설명과 +/− 표시로 변경을 전달합니다.
예제·반례
성공 조건과 실패 이유를 함께 설명합니다.
미리보기
예제: 같은 요청을 재전송
같은 요청 식별자를 보내 이미 처리한 결과를 돌려받습니다.
반례: 매번 새 식별자를 생성
서버가 서로 다른 요청으로 인식하므로 중복 처리를 막을 수 없습니다.
<Comparison title="재시도의 조건">
<ComparisonItem title="예제: 같은 요청을 재전송">
같은 요청 식별자를 보내 이미 처리한 결과를 돌려받습니다.
</ComparisonItem>
<ComparisonItem title="반례: 매번 새 식별자를 생성">
서버가 서로 다른 요청으로 인식하므로 중복 처리를 막을 수 없습니다.
</ComparisonItem>
</Comparison>
작성 시 주의점: 같은 입력과 조건을 기준으로 비교합니다. 세 가지 이상 대안에는 표를 사용합니다.
예상 결과·확인 절차
기대하는 출력과 독자가 실행할 검사를 함께 둡니다.
미리보기
예상 결과와 확인 방법
reader:request-1- 같은 요청은 같은 키를 생성하는지 확인합니다.
- 다른 요청은 다른 키를 생성하는지 확인합니다.
<ExpectedResult title="예상 결과와 확인 방법">
```text title="예상 요청 키"
reader:request-1
```
1. 같은 요청은 같은 키를 생성하는지 확인합니다.
2. 다른 요청은 다른 키를 생성하는지 확인합니다.
</ExpectedResult>
작성 시 주의점: 예상 결과는 실제 검사 통과 표시가 아닙니다. 확인할 입력과 출력의 관계를 명시합니다.