[FE] MarkDown lib를 적용해 시험지 정렬

마크다운을 이용해서 시험지의 이미지와 시험 자료들을 불러 올 수 있는 방법들을 모색하다 마크다운 라이브러리를 이용하고자 했다. 예시로 아래와 같은 정렬된 모습을 구현하려고 했다.

왼쪽 해당 정렬된 모습은 리액트에서 마크다운이 아닌 css로 구현한 것이다. 오른쪽은 마크다운과 Html과 혼용해서 css로 구현한 것이다. 이러한 정렬을 마크다운 라이브러를 활용해서 구현하면 좋겠다고 생각했다. 마크다운 라이브러리 중 가장 많이 사용하고 많은 자료를 가지고 있는 react-markdown을 사용했다. 간단한 사용 예시는 아래와 같다.

import ReactMarkdown from "react-markdown";
 
const markdown = `
  # Heading 1
  This is a **bold** text and this is a *italic* text.
`;

return (
    <div>
      <ReactMarkdown>{markdown}</ReactMarkdown>
    </div>
 );

react-markdown을 import하고 변수로 내가 원하는 글을 마크다운으로 작성하고 해당 변수를 ReactMarkdown 컴포넌트 안에 해당 변수를 넣어주면 그만이다. 마크다운의 결과는 잘 도출이 된다. 하지만 여기서 문제는 html을 혼용해서 사용하려고 시도하면 html을 렌더링하지 않고 html 그 대로 출력이 된다. 그 이유는 보안상의 문제로 해당 라이브러리나 마크다운 플렛폼에서 html 렌더링을 허용하지 않는다. (react-markdown Appendix A: HTML in markdown 참고)따라서 ReactMarkdown은 html을 지원하지 않고 있기에 컴포넌트로 이미지들을 출력하고 해당 컴포넌트에 직접 적으로 css를 적용하는 방법 또한 허용되지 않는다.

깃허브의 렌더링은 무엇인지 의문의 들 것이다. 깃허브는 md파일을 자체를 렌더링한 결과이다. 우리가 깃허브의 방식대로라면 우리는 md파일에서 js없이 개발해야 하는 것이다. 즉, react-markdown과 같은 라이브러리들은 마크다운의 기능 일부를 js에서 사용할 수 있게 해줄 뿐 이다.

결과적으로 우리가 예상했던 결과들을 lib의 보안상의 이유로 도출 할 수 없었으며 다각도로 css를 활용하지 못하는 불가피함들이 있어서 markdown lib를 사용하는 것이 부적합하다는 것을 알게 되었다.