react-markdown

오픈소스 분석기 🔎

react-markdown 은 리액트 내에서 마크다운을 랜더링 시켜주는 라이브러리이다. 사용법이 쉽고 간단하다고 생각하는 라이브러리 중 하나이다.

실제로 사용해본 오픈소스를 분석해보는게 좋지 않을까 싶어서 시작하였는데 쉽지 않았다는 점 🥲

react-markdown github 에서 먼저 현재도 활성화된 오픈소스인지를 확인했는데, issue 와 pr 도 꾸준히 closed, merged 되고 있는 오픈소스였다. 🙌

인기가 얼마나 많게요 ~?

• 현재 글을 작성하고 있는 시점(22/01/17)에는 스크린샷보다 star, 배포버전, forks 수도 더 많아졌다. 😂
  • 7.1.2 버전
  • 714 forks
  • 8.2k stars

간단한 사용법

• react-markdown 을 설치후 import 해온 뒤 render 하려는 jsx 구문을 으로 감싼다.
  • $ npm install react-markdown
• 해당 객체에 필요에 따라 props 값을 전달한다.

import React from 'react'
import ReactMarkdown from 'react-markdown'
import ReactDom from 'react-dom'
import remarkGfm from 'remark-gfm'

const markdown = `A paragraph with *emphasis* and **strong importance**.

> A block quote with ~strikethrough~ and a URL: https://reactjs.org.

* Lists
* [ ] todo
* [x] done

A table:

| a | b |
| - | - |
`

ReactDom.render(
  <ReactMarkdown children={markdown} remarkPlugins={[remarkGfm]} />,
  document.body
)

테스트 도구

• 주로 사용하는 테스트 api 로는 uvu 를 사용
• github action 이용
  • gihub action: github 내에서 개발 워크플로우를 자동화 시켜준다 (e.g) test, build, release ... )
  • github action docs 에서 자세한 내용은 참고하길 바란다.

주요 객체 및 core 한 코드는?

• API 에 나와있는것과 같이 ReactMarkdown 이 주요 객체라 생각.
• markdown editor 에서 core 한 부분은 아무래도 파서를 이용해서 react element 를 사용하는 부분이 아닐까 생각했다.
  • react-markdown/lib/react-markdown.js

솔직히 지금 글을 작성하는 병아리 단계에서 뭐가 core 한 코드인지 제대로 파악할지 잘 모르겠지만, 완전 헛다리 짚고있다면 둥글둥글 댓글 남겨주시면 수정하도록 하겠다. 😂
그래도 계속해서 코드를 읽다보면 뭐가 중요한지 파악할수있지않을까 🥲

끝으로

내가 이해한 내용을 토대로 정리를 하려고 하다보니 너무 내용이 없어서 이렇게 작성해도 되나 싶었다. 😂
아무래도 중요한 내용을 많이 이해하지 못했기 때문이겠지..
다음에는 좀 더 구체적이고 딥한 작성을 하길 바라면서 마무리하려고 한다.

출처: react-markdown github