파일 기반 문서 관리 - markdown

 

화면에 띄울 텍스트나 문서를 코드 또는 문자열 형식으로 작성할 수도 있지만, 더 좋은 방법은 데이터베이스에 저장하거나 파일로 관리하는 것입니다. 이렇게 하면 문서 관리가 쉬워지고, 동적으로 콘텐츠를 화면에 띄울 수 있습니다.

파일 기반 관리

• 문서를 Markdown, HTML, 또는 JSON 파일로 관리하고, 필요할 때 파일을 읽어 화면에 표시합니다.
• 예: docs/ 디렉터리에 각 문서를 저장.

import React, { useState, useEffect } from "react";
import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw"; // HTML 파싱
import rehypeHighlight from "rehype-highlight"; // 코드 하이라이트
import "highlight.js/styles/github.css"; // 코드 하이라이트 테마

const MarkdownViewer = ({ fileName }) => {
  const [content, setContent] = useState("");

  useEffect(() => {
    // Markdown 파일을 읽어오는 fetch 호출
    fetch(`/docs/${fileName}.md`)
      .then((response) => response.text())
      .then((text) => setContent(text))
      .catch((error) => console.error("Markdown 파일 읽기 오류:", error));
  }, [fileName]);

  return (
    <div>
      <ReactMarkdown rehypePlugins={[rehypeRaw, rehypeHighlight]}>
        {content}
      </ReactMarkdown>
    </div>
  );
};

export default MarkdownViewer;

 

이 코드는 React로 작성된 컴포넌트로, 주어진 마크다운 파일을 읽어와 HTML로 렌더링하는 기능을 제공합니다. 주요 포인트를 단계적으로 해석하면 다음과 같습니다:

---

1. 주요 기능

• 마크다운 파일 읽기: 지정된 경로에서 마크다운 파일을 가져옵니다.
• HTML로 렌더링: 마크다운 내용을 HTML로 변환하고 화면에 표시합니다.
• 코드 하이라이팅 지원: 마크다운 내 코드 블록에 대한 하이라이팅을 제공합니다.

---

2. 코드 구조

useState와 useEffect 사용

• useState:
  • content라는 상태 변수에 마크다운 파일의 내용을 저장합니다.
  • 초기값은 빈 문자열 ""입니다.
• useEffect:
  • 컴포넌트가 마운트되거나 fileName이 변경될 때 실행됩니다.
  • fetch를 사용해 /docs/${fileName}.md 경로에서 마크다운 파일을 읽어옵니다.
  • 성공적으로 읽으면 내용을 content 상태로 업데이트합니다.
  • 에러가 발생하면 콘솔에 에러 메시지를 출력합니다.

fetch 사용

fetch(`/docs/${fileName}.md`)

• /docs 디렉토리에서 fileName에 해당하는 .md 파일을 읽어옵니다.
• fileName은 이 컴포넌트가 호출될 때 전달받는 props입니다.

 

3. 마크다운 렌더링

ReactMarkdown

<ReactMarkdown rehypePlugins={[rehypeRaw, rehypeHighlight]}>
  {content}
</ReactMarkdown>

• ReactMarkdown 컴포넌트를 사용해 content 상태에 저장된 마크다운 파일 내용을 렌더링합니다.
• rehypePlugins 옵션:
  • rehypeRaw: HTML 태그를 파싱하여 렌더링할 수 있도록 허용합니다.
  • rehypeHighlight: 코드 블록에 대한 문법 하이라이팅을 지원합니다.

코드 하이라이팅

• highlight.js 라이브러리를 활용합니다.
• 스타일 테마로 github.css를 적용하여 깔끔한 GitHub 스타일의 코드 하이라이팅을 제공합니다.