React 모듈 npm 배포 타임라인

작년부터 해보고 싶었던 npm 모듈 배포에 도전!
주제를 고민하다 최근에 작업했던 모달 컴포넌트를 다른 프로젝트에 다시 사용할 수 있도록 만들어 보기로 했다.

2021.05.25

• simple-modal 저장소 생성 지금은 저장소 이름을 react-simple-modal-provider로 바꿨다. 너무 긴가?

2021.05.26

• 개발 환경을 세팅했다. cra로 하려다가 npm 배포 경험이 없다보니 webpack config를 만져야 하면 귀찮아질 것 같아서 직접 세팅했다. 지금 생각하면 cra로 해도 될듯하다.

  ts는 따로 날 잡고 마이그레이션 하기로 하고 구현을 빠르게 해보기러 함

• ModalProvider 개발

  • context api + React.createElement 조합으로 간단한 Provider를 구현했다.
    현수님의 소스에서 아이디어를 얻었다.

• Modal 개발

  • 개발이라 하기 민망하다. 처음엔 다른 모달 라이브러리를 가져다 썼다.
  • 위 라이브러리에서 제공하는 몇몇 기능들을 활용해 커스텀 옵션을 구현했다.

• npm 배포

  • 개발 환경에서는 되던 게 빌드를 하니 안된다. 정확히 말하면 npm에 올린 파일을 인스톨하니 안된다. 아직 별 내용도 없는데 index.js는 300kb를 찍고 화려한 경고 문구가..

    새벽 두 시를 넘기고 휴가를 쓸까 고민하던 때 웹팩 빌드 설정에 문제가 있음을 발견했다. 수정 후 다시 배포하니 됐다.

2021.05.27

• 데모
  • codesandbox에 데모 페이지 작업을 했다. 사용법을 참고할 수 있도록 최대한 심플하게 작성했다.
• 현타
  • 모달이 메인인데 다른 라이브러리를 쓰고 있는 부분이 만족스럽지 않았다. npm 배포 경험을 한다 하고 가볍게 시작한 게 욕심이 났다. 엎고 다시 만들었다.
• Modal 재개발
  • React Portal을 활용해서 개발했다. 기존의 옵셔널 한 기능들은 그대로 제공되어야 했기 때문에 신경을 많이 썼다. 이날도 두시가 다 돼서 잔 듯

2021.05.28

• 추가 기능 개발
  • 아직 라이브러리라고 하기 아쉬운 수준인 것 같다. esc키 이벤트로 닫힌다거나 모달 밖 영역 클릭을 막는 등등.. 옵셔널하게 사용할 수 있는 기능들을 추가했다.
• README 작성
  • 대략적인 사용법과 API를 리드미에 작성했다.

2021.05.29

• 타입스크립트 마이그레이션
  • 타입스크립트는 가끔 귀찮고 나를 힘들게 한다. 하지만 항상 옳다..🤐

2021.05.30

• 추가 기능 개발

  • 스타일 관련 추가 옵션을 구현했다.

• 리팩토링

  • 불필요한 패키지와 소스코드를 정리했다. 자잘한 버그를 발견하고 수정함

• 패키지 다이어트

  • 기능이 다 되니 패키지 용량이 눈에 들어왔다 129kb! 기능에 비해 적지 않은 용량이다. 원인을 찾아보니 @emotion/react 패키지에 의존성이 있어 빌드 파일 용량이 커졌다. 스타일 관련 옵션 기능을 제공하기 위해서는 css-in-js 방식이 필요했기 때문에 그 원리에 대해 학습하고 구현 후 개발을 마무리했다.

    요약하면 modal id hash + style tag 동적 생성 + css minify 세 가지 방식으로 조악하게나마 라이브러리에 필요한 기능을 css-in-js 형태로 구현했다.

    결과적으로 dependency 0 이 되면서 패키지 용량이 129kb에서 26kb로 다이어트에 성공했다. 흡족

• 정리

  • 뭔가 많이는 하지만 휘발되는 부분이 아쉬워서 이번엔 기록을 남겼다.

    약 일주일 간 세 자릿수 커밋을 남기며 재밌게 개발한 것 같다. 유지 보수가 어떻게 될진 미지수지만 당분간은 개발했던 토이 프로젝트에 적용하며 테스트를 해볼 예정이다. 😃

react-simple-modal-provider