회사에서 진행중인 프로젝트의 소스가 많아지면서, UI 소스들을 따로 패키지로 분리해야 할 필요성을 느끼게 됐다.
NPM package로 라이브러리를 만들 때 버그나 여러 수정 사항들을 충분히 테스트하고 Publish 하려면 로컬에서 테스트 할 필요가 있다. NPM package 를 로컬에서 테스트 할 수 있는 환경을 구성하면서 겪었던 많은 시행착오가 있었고, 마침내 내가 사용하게 된 방법을 쓴다.
📖 목차
- 리액트 의존성이 두개야!!
- 첫번째 마주친 에러
- Module not found
- local-package-publisher
- npm pack
🖌 시작!
리액트 의존성이 두개야!!
yarn add ../my-awesome-ui빠른 설치와 테스트를 위해 위와 같은 명령어로 설치를 하고 테스트를 돌려봤는데 리액트 앱에서 아래와 같은 에러 메시지를 보여줬다.
You might have more than one copy of React in the same app
하나 이상의 리액트가 존재한다는 말인데, 테스트중인 앱과, 라이브러리 앱. 이 두 앱에서 충돌이 난다는 말 이었다.
이런거 Webpack이 알아서 해주는 줄 알았는데...
정말 많은 Stack overflow 글들을 찾아봤지만, 지금 나의 상황에서 해결할 수 있는 방법을 찾기는 쉽지가 앖았다.
웹팩은 뭐 하고있나?
여러 글들을 찾아보고 읽어보니, 일단 Webpack이 해결해주는 방법이 존재했긴 했다. 하지만 나는 CRA로 테스트하고 있었고, eject 명령어를 쓰고 싶지 않았기 때문에 다른 방법이 있는지 더 찾아보기로 했다.
이유가 뭐야?
로컬에서 위 처럼 yarn add ../my-awesome-ui 명령어로 라이브러리를 설치 할 경우, npm 저장소가 아닌 git 저장소로 인식해서 모든 의존성을 가져와버린다는 글을 보았다. 라이브러리를 git 저장소와 연결시키지 않고 시도해보고 싶었지만 아직 해보지는 않았다.
local-package-publisher
local-package-publisher 라는 NPM package 가 존재했다. 이 패키지를 사용하게되면, 다음과 같은 방법으로 내 프로젝트에서 사용할 수 있게 된다.
- 먼저 빌드된 라이브러리를 global 환경에
publish한 다음 - global에
publish된 라이브러리를 나의 앱에서npm link my-awesome-ui와 같은 명령어로 링크를 걸어준다. 그러면 나의 앱에서 import 할 수 있다.
하지만 위 방법도 내 시간을 구해주진 못했다. 어쩌면 나와 다른 환경에서는 편리하고 완벽하게 돌아갈지도 모르겠다.
npm pack
여러가지 시도해본 방법을 다 기억하고 적지는 못했지만, 결론적으로 내 맘에 가장 드는 방법이다. 자동화 하지 않아서 조금 불편하긴 하지만, 아주 많은 글들을 찾아보고 시도해본 결과, 내 환경(CRA)에서 가장 깔끔하게 잘 돌아가는 방법이었다.
1. 필요하다면 현재 라이브러리를 빌드 후, npm pack 명령어를 입력한다.
.gitignore와 .npmignore 파일을 기준으로 내 라이브러리를 .tar 파일로 압축시켜준다.
2. 한단계 아래 디렉토리에서 .tar 파일의 압축을 푼다. 그러면 package 라는 폴더가 생성된다.
root
- /my-awesome-ui-test // 라이브러리 테스트용 : CRA
- /my-awesome-ui
- my-awesome-ui-v0.1.1.tar
+ /package3. 라이브러리를 테스트 할 앱에서 package 폴더를 설치한다.
yarn add ../package여기까지다. 이제 아주 완벽하게 동작한다. 에러메시지가 뜨지도 않는다. 위에서 언급한 리액트가 겹치는 오류 말고도 Module not found 오류도 볼 수 있었는데 어떤 상황에서 그러한 에러가 발생했는지는 아쉽게도 기억이 잘 나지 않는다.
이제 준비는 됐으니, 이걸로 완벽한 협업을 위한 노가다 UI 디자인 가이드를 작성해야겠다.
📌 참고자료
