오픈소스: react-markdown
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 를 사용하는 부분이 아닐까 생각했다.
솔직히 지금 글을 작성하는 병아리 단계에서 뭐가 core 한 코드인지 제대로 파악할지 잘 모르겠지만, 완전 헛다리 짚고있다면 둥글둥글 댓글 남겨주시면 수정하도록 하겠다. 😂
그래도 계속해서 코드를 읽다보면 뭐가 중요한지 파악할수있지않을까 🥲
끝으로
내가 이해한 내용을 토대로 정리를 하려고 하다보니 너무 내용이 없어서 이렇게 작성해도 되나 싶었다. 😂
아무래도 중요한 내용을 많이 이해하지 못했기 때문이겠지..
다음에는 좀 더 구체적이고 딥한 작성을 하길 바라면서 마무리하려고 한다.
Author And Source
이 문제에 관하여(오픈소스: react-markdown), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jina__lee/오픈소스-react-markdown저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)