17-19일 차: 마크다운 프리뷰어

이 게시물은 FreeCodeCamp의 Markdown Previewer 프로젝트에 관한 것입니다. 이것이 제가 프로젝트를 시작한 방법입니다.

필수품

전체 앱 내에서 하나의 상태만 유지하면 되므로 아직 Redux를 사용하지 않기로 결정했습니다. Redux는 그런 과잉일 것입니다.

이 프로젝트를 위해 Prism.js와 Marked.js 라이브러리를 사용하게 되었습니다. Prism.js가 작동하지 않기 때문에 삭제해야 했지만 사이트에서 구문 강조를 구현해야 하는 경우가 아니면 어쨌든 필요하지 않습니다.

정적 요소가 거의 없는 React 사이트입니다. CSS의 전처리기로 SASS를 사용하여 스타일이 지정됩니다.

mark.js

marked.js는 사용하기 매우 간단한 라이브러리입니다. 시작하려면 CDN 링크를 포함할 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js" integrity="sha512-hzyXu3u+VDu/7vpPjRKFp9w33Idx7pWWNazPm+aCMRu26yZXFCby1gn1JxevVv3LDwnSbyKrvLo3JNdi4Qx1ww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

순수한 Markdown을 구문 분석하려면 parse 메서드를 사용합니다.

let textBox = document.getElementById("text");
textBox.innerHTML = marked.parse("*This is italic*");

marked.js도 수많은 옵션을 제공하며 여기에서 그 중 하나에 대해 이야기하겠습니다.

텍스트의 줄 바꿈을 실제 줄 바꿈으로 처리하려면 필요한 옵션을 true와 함께 marked.setOptions()로 설정합니다.

marked.setOptions({
  breaks: true,
  gfm: true
});

Markdown 텍스트를 구문 분석할 때 두 번째 인수로 전달할 수도 있습니다.

let markdownText = "# This is a heading";
let mainDiv = document.getElementById("main-part");
mainDiv.innerHTML = marked.parse(markdownText, 
  {
    breaks: true,
    gfm: true
});

이 라이브러리를 사용할 때 큰 경고: DOM으로 렌더링하기 전에 HTML 필터를 구현해야 합니다. marked.js 지원되는 내장이 없으므로 DOMPurify 또는 기타 HTML 필터를 사용하는 것이 좋습니다.

귀하의 사이트에 XSS을(를) 원하지 않습니까?

후기

이 프로젝트는 시각 디자인을 제외하면 그렇게 어려운 프로젝트는 아닙니다(저는 디자인에 소질이 없습니다). 하지만 다음 과제는 복잡성이 급증하는 것이므로 더 열심히 일해야 합니다.

아무튼 다들 즐겜하세요!

Fullo me on Github !
또한 !