VLM_math_reasoning만들기

✅ 문제 요약

❓ 문제

LaTeX 수식이 다음과 같이 출력될 뿐, 실제 수식 렌더링이 되지 않음:

To solve the differential equation $\frac{dx^2}{dx}$, we need to understand ...

• $...$, $$...$$, \( ... \), \[ ... \] 형식으로 수식을 포함하고 있었지만,
• 브라우저에는 수식이 "텍스트 그대로" 출력됨 (ex. \frac{dx^2}{dx})

---

🧠 원인 분석

1. react-markdown, remark-math, rehype-katex, katex 간의 버전 불일치

• 일부 구버전 조합에서는 $x^2$ 형태의 인라인 수식이 파싱되지 않거나 무시됨
• 특히 react-markdown@8+은 플러그인 API가 바뀌면서 마이너 호환 문제가 생김
• 가장 핵심적인 문제는 라이브러리 간의 내부 구조 차이

---

🛠 해결 방법

🔧 핵심 조치 1: 라이브러리 버전 업그레이드

npm install react-markdown@8 remark-math@5 rehype-katex@6 katex@0.16

이렇게 모두 최신 호환 버전으로 맞춘 것이 결정적 해결책이었음.

---

🔧 핵심 조치 2: 수식 포맷 정리 (preprocessLatex)

function preprocessLatex(text) {
  return text
    .replace(/\\\[\s*/g, '$$')    // \[ → $$
    .replace(/\s*\\\]/g, '$$')    
    .replace(/\\\(\s*/g, '$')     // \( → $
    .replace(/\s*\\\)/g, '$')     
    .replace(/\\\\/g, '\\')       // \\ → \
    .replace(/\$\s+/g, '$')       // '$ x' → '$x'
    .replace(/\s+\$/g, '$');      // 'x $' → 'x$'
}

\( x \) → $x$ 등으로 변환하면서, 수식 양쪽 공백 제거까지 함께 처리함.

---

🔧 핵심 조치 3: CSS 반드시 import

import 'katex/dist/katex.min.css';

수식 스타일링을 위한 CSS를 적용하지 않으면 아무리 잘 렌더링되어도 보이지 않거나 깨져 보임.

---

✅ 결론

항목	상태
수식 파싱 안 됨	🔴 react-markdown과 플러그인 버전 불일치
수식 공백 문제	🟡 전처리로 해결 가능
수식 스타일 미적용	🔴 CSS 누락 시 발생
최종 해결	✅ 버전 업그레이드 + 전처리 함수 적용 + CSS import

---

필요하다면 이 내용 Markdown으로 PPT 슬라이드처럼 구성해줄 수도 있어 😎
다음 스텝은 이제 이 시스템에 GPT API 붙여서 문제 자동 풀이겠네?