오픈소스 분석기 🔎

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

const list = ['a', 'b', 'c', 'd', ...]

🤷‍ 탐색?

• 이러한 배열이 있을때, 원하는 값을 찾는 문제를 탐색문제
• 'a' 부터 하나씩 찾는 방법을 단순 탐색(simple search)
• 배열의 중간부터 찾기 시작하는 방법 이진 탐색(binary search)
  • 이진 탐색 알고리즘은 리스트에 원하는 원소가 있다면 그 원소의 위치를 반환
  • 그렇지 않을때에는 -1 이나 null 과 같은 값을 반환

예제 🔎

function binarySearch(list, item){
  // low 와 high 는 탐색해야하는 범위
  let low = 0
  let high = list.length - 1

  while (low <= high) { // 탐색해야 하는 범위 제한
    let mid = parseInt((low + high)/2) // 중간
    let guess = list[mid]
    if(guess === item){
      return mid
    } 
    if(guess > item){
      high = mid - 1
    } else {
      low = mid + 1 
    }
  }

const myList = [1, 3, 5, 7, 9]

console.log(binarySearch(myList, 7)) // 3
console.log(binarySearch(myList, -1)) // -1

🙆‍ 뭐가 좋은건데?

• 시간 절약 -> 즉 비용이 절약 된다.
  • 단순 탐색 방법을 이용하면 처음부터 찾는 item 까지 계속해서 확인해야한다. 즉 추측해야 할 최대 횟수는 리스트의 길이와 같다.(이런것을 선형시간(linear time) 이라고 한다.)
  • 하지만 이진 탐색은 리스트에 8개가 있다면 최대 3번만 확인해도 된다. (로그시간(logarithmic time))

hello coding 그림으로 개념을 이해하는 알고리즘 을 참고하여 작성하였습니다.

💡 리덕스란 ?

JS로 만든 APP 들을 위한 예측가능한 상태의 저장소

• 단일 스토어 ( App 의 상태가 궁금할때는 reducer 이용 )
• 중앙 집중적인 데이터 스토어를 통해 앱을 쉽게 개발
• Redux dev Tool 을 통해 파일 다운 -> Import -> 내역 복원 가능 (시간 여행 가능 ! : 내가 선택하고 바꾼 값을 비디오처럼 확인 가능)
• 부품끼리의 의존적이지 않은 코드

👉 리덕스 동작

• state
• render : state를 기반으로 화면에 그린다.
• dispatch : 값 변경하기
• subscribe : 값이 변경되었을때 구동될 함수를 등록
• getState : 값 가져오기 _state 에 직접 접근하는것이 금지되어있기 때문에 해당 동작들을 이용한다._
• reducer: state 값을 변경한다. _state 라는 문서에 값을 수정하는 사람이라고 생각!_

👉 reducer 초기화

 function reducer (state, action){
     if(state === undefined){
           // 최초의 초기화 단계 
           // state 값이 정의되어 있지 않는 상태에서 reducer 가 호출되었다.
            return { color: "yellow"}
        }
    }

    var store = Redux.createStore(reducer);

    function red() {
        var state = store.getState()
        document.querySelector('#red').innerHTML = `
        <div class="container" id="component_red" style="background-color:${state.color}">
            <h1>red</h1>
        </div>
    `
    }
    red()

👉 Reducer의 역할

// reducer function 안에서..
 var newState;
if(action.type === "CHANGE_COLOR"){
  newState = Object.assign({}, state, {color: action.color})
  // 두번째 인자가 첫번째 빈 객체에 복제되서 그 객체가 리턴된다. 
  // 세번째 인자가 덮어쓰게된다.  -> 그 결과를 리턴
  // 불변성 때문에 복제 방법 사용
}
return newState

• store 의 state 값을 변경해준다.
• action의 state 값과 이전의 state 값을 이용해서 새로운 state 값을 return 해주면, 그 return 된 값이 새로운 state값이 된다 _원본을 바꾸는 것이 아닌 복제한 결과를 return 해야 함 (Redux를 최대한으로 활용 하기 위해서)_

👉 Subscribe 의 역할

• state의 값이 변동되는지 구독 -> subscribe

  store.subscribe(구독할 함수이름)

🐥샘플코드 : main.html

출처 : 생활코딩 Redux https://www.inflearn.com/course/redux-%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9