React-Markdown API 연동 가이드

백엔드 개발자를 위한 React-Markdown 텍스트 전달 규칙

📋 목차

• 기본 개념
• 줄바꿈 처리
• 텍스트 스타일
• 목록 생성
• 링크 및 이미지
• 코드 블록
• 표 생성
• 실제 API 응답 예시

🎯 기본 개념

React-Markdown은 마크다운 문법을 따릅니다. API에서 전달하는 텍스트가 어떻게 화면에 표시되는지 이해하고 올바른 형태로 전달해주세요.

📏 줄바꿈 처리

❌ 주의사항

// 이렇게 전달하면 모두 한 줄로 표시됩니다
{
  "content": "첫 번째 줄\n두 번째 줄\n세 번째 줄"
}

결과: 첫 번째 줄 두 번째 줄 세 번째 줄 (공백으로 합쳐짐)

✅ 올바른 줄바꿈

1. 일반적인 줄바꿈 (같은 문단 내에서)

{
  "content": "첫 번째 줄\\\n두 번째 줄"
}

결과:

첫 번째 줄
두 번째 줄

2. 문단 분리

{
  "content": "첫 번째 문단입니다.\n\n두 번째 문단입니다."
}

결과:

첫 번째 문단입니다.

두 번째 문단입니다.

3. 빈 줄 추가 (시각적 여백)

{
  "content": "첫 번째 줄\\\n\\\n세 번째 줄"
}

결과:

첫 번째 줄


세 번째 줄

🎨 텍스트 스타일

굵게 (Bold)

{
  "content": "이것은 **굵은 텍스트**입니다."
}

기울임 (Italic)

{
  "content": "이것은 *기울임 텍스트*입니다."
}

굵게 + 기울임

{
  "content": "이것은 ***굵고 기울임 텍스트***입니다."
}

취소선

{
  "content": "이것은 ~~취소선 텍스트~~입니다."
}

📋 목록 생성

순서 없는 목록

{
  "content": "쇼핑 목록:\n\n* 사과\n* 바나나\n* 오렌지"
}

순서 있는 목록

{
  "content": "할 일:\n\n1. 코딩하기\n2. 테스트하기\n3. 배포하기"
}

중첩 목록

{
  "content": "프로젝트 구조:\n\n* 프론트엔드\n  * React\n  * CSS\n* 백엔드\n  * Node.js\n  * Database"
}

🔗 링크 및 이미지

링크

{
  "content": "자세한 내용은 [공식 문서](https://reactjs.org)를 참고하세요."
}

이미지

{
  "content": "![대체 텍스트](https://example.com/image.jpg)"
}

💻 코드 블록

인라인 코드

{
  "content": "JavaScript에서 `console.log()`를 사용합니다."
}

코드 블록

{
  "content": "JavaScript 예시:\n\n```javascript\nfunction greet(name) {\n  console.log(`Hello, ${name}!`);\n}\n```"
}

언어 지정 없는 코드 블록

{
  "content": "코드 예시:\n\n```\necho \"Hello World\"\nls -la\n```"
}

📊 표 생성

{
  "content": "사용자 정보:\n\n| 이름 | 나이 | 직업 |\n|------|------|------|\n| 홍길동 | 30 | 개발자 |\n| 김철수 | 25 | 디자이너 |"
}

🚀 실제 API 응답 예시

채팅 메시지 응답

{
  "message": "안녕하세요! 질문에 답변드리겠습니다.\n\n**주요 포인트:**\n\n1. 첫 번째 해결방법\n2. 두 번째 해결방법\n\n자세한 코드는 다음과 같습니다:\n\n```javascript\nconst result = processData(input);\nconsole.log(result);\n```\n\n추가 질문이 있으시면 언제든 말씀해주세요!"
}

에러 메시지 응답

{
  "error": "❌ **오류가 발생했습니다**\n\n오류 내용:\n\n* 필수 파라미터가 누락되었습니다\n* `user_id` 값을 확인해주세요\n\n해결방법:\n\n```json\n{\n  \"user_id\": \"12345\",\n  \"action\": \"update\"\n}\n```"
}

도움말 응답

{
  "help": "## 📖 사용법 가이드\n\n### 기본 명령어\n\n* `/help` - 도움말 보기\n* `/status` - 상태 확인\n* `/reset` - 초기화\n\n### 고급 기능\n\n**검색 기능:**\n\n검색어를 입력하면 관련 결과를 보여드립니다.\n\n**예시:** `검색 react hooks`\n\n---\n\n더 자세한 정보는 [공식 문서](https://docs.example.com)를 참고하세요."
}

⚡ 빠른 참조표

기능	마크다운 문법	API에서 전달할 형태
줄바꿈 (같은 문단)	\\\n	"텍스트\\\n다음줄"
문단 분리	\n\n	"문단1\n\n문단2"
굵게	**텍스트**	"**굵은글씨**"
기울임	*텍스트*	"*기울임*"
코드	`코드`	"\코드`"`
링크	[텍스트](URL)	"[링크](http://example.com)"
목록	* 항목	"* 항목1\n* 항목2"

🔧 개발 팁

1. JSON에서 백슬래시 처리

// JavaScript에서 백슬래시는 이스케이프가 필요합니다
const response = {
  content: "첫 줄\\n두 번째 줄"  // \\\n이 아닌 \\n으로 작성
};

2. 여러 줄 텍스트 처리

// Template literal 사용 추천
const longContent = `
안녕하세요!

**중요한 내용:**

1. 첫 번째 항목
2. 두 번째 항목

감사합니다.
`.trim();

3. 동적 내용 생성

function formatResponse(data) {
  return `
## 검색 결과

총 **${data.count}**개의 결과를 찾았습니다.

${data.items.map((item, index) => `${index + 1}. ${item.title}`).join('\n')}

---
검색 완료 시간: ${new Date().toLocaleString()}
  `.trim();
}

❓ 자주 묻는 질문

Q: 줄바꿈이 제대로 안 되는데요?

A: \n 대신 \\\n을 사용하세요. 또는 문단 분리를 위해 \n\n을 사용하세요.

Q: HTML 태그를 사용할 수 있나요?

A: 기본적으로는 불가능합니다. 마크다운 문법을 사용해주세요.

Q: 특수문자는 어떻게 처리하나요?

A: 대부분의 특수문자는 그대로 사용 가능하지만, *, _, `, # 등은 마크다운 문법으로 해석될 수 있으니 주의하세요.

---

📝 이 문서가 도움이 되셨나요? 추가 질문이나 요청사항이 있으면 언제든 말씀해주세요!