Jaeseo's Information Security Story

첫 GitHub Contribution!! (feat. react-simplemde-editor) 본문

기타 잡담!

첫 GitHub Contribution!! (feat. react-simplemde-editor)

Jaeseokim 2020. 6. 8. 17:20

게시판 기능을 구현을 하면서 react-simplemde-editor 를 사용하여 이미지 업로드 기능까지 구현을 하였는데 문제를 발견한 부분이 Drag & Drop 으로 이미지를 삽입시 추가된 IMG 내용을 onChange 으로 전달을 하지 않아 Drag & Drop 이미지 삽입후 즉시 저장시 이미지 업로드 내용을 반영하지 않아서 한번 소스 코드를 분석 하게 되었습니다.

소스 부분을 분석하다 보니 Events를 등록하는 부분이 있어서 한번 분석을 하게 되었습니다.

 addEvents = () => {
    if (this.elementWrapperRef && this.simpleMde) {
      this.editorEl = this.elementWrapperRef;
      this.editorToolbarEl = this.elementWrapperRef.getElementsByClassName(
        "editor-toolbar"
      )[0];
      this.editorEl.addEventListener("keyup", this.eventWrapper);
      this.editorEl.addEventListener("paste", this.eventWrapper);
      this.editorToolbarEl &&
        this.editorToolbarEl.addEventListener("click", this.eventWrapper);

      this.simpleMde.codemirror.on("cursorActivity", this.getCursor);

      const { events } = this.props;

기존 이벤트는 위와 같이 keyup , paste, click (toolbar)이벤트가 발생시 this.eventWrapper 작동시켜 onChange prop에 simpleMde!.value() 를 전달 하였습니다.

 eventWrapper = () => {
    this.keyChange = true;
    this.setState({
      value: this.simpleMde!.value()
    });
    this.props.onChange(this.simpleMde!.value());
  };

여기서 문제가 된 부분이 Drag & Drop 은 위 3가지 이벤트에 대해 해당사항이 없어서 전달이 안되는 문제점이 있었는데 code mirror docs 를 보고 change Events를 추가하여 해결하였습니다.

그리고 문제점 내용과 해결한 방법을 작성하여 issue와 Pull Requests를 등록하였습니다.

그 결과 4.1.2 Released Version에 반영되었습니다!

비록 단 한줄의 기여였지만 처음으로 오픈소스에 대해 기여를 해본것이 신기하고 당당하게 Contributor에 올라온것이 오픈소스에 한발짝 더 다가간것 같아서 기분이 좋습니다!

'기타 잡담!' 카테고리의 다른 글

[일상] 400번 저어만든 달고나 커피  (0) 2020.04.06
XPS 13 7390 ubuntu 세팅 기록용  (0) 2020.02.24
새해다짐  (0) 2020.01.01
Comments