제작 UI 라이브러리 로컬 테스트 방법

프로젝트 작업을 하다보면 종종 디자인 시스템을 구축해 UI 패키지를 분리해 라이브러리를 제작하고는 합니다.

모노레포 형식으로 사용할 수 있지만 패키지와 레포지토리를 완전 분리해 설치를 통해 의존성으로 사용하는 경우 제작한 UI 라이브러리를 프로젝트에 설치해 테스트를 해야하는데, 이때 불완전한 패키지를 퍼블리싱 해 버전을 올리지 않고 로컬에서 테스트를 할 수 있는 방법이 없을까 고민합니다.

 

여러 방법 중 가장 쉬운 방법으로 로컬에서 테스트를 해봅시다

 

방법

1. package.json에서 퍼블리싱 할 버전으로 버전 설정
   버전이 동일하다면 캐싱으로 인해 변경점이 제대로 반영이 안될 수 있습니다. 퍼블리싱 할 버전으로 수정해주세요.
2. @innogrid-ui/core 라이브러리 빌드
   라이브러리를 빌드해 프로젝트 루트에 dist 폴더가 생성되었는지 체크해주세요.
   

   pnpm run build

3. pack 실행
   pack을 통해서 Tarball 파일을 생성해 주세요. 아래 명령어를 입력 한다면 아래와 같은 Tarball 파일이 생성됩니다.
   

   pnpm pack

   
   
   
   
4. 패키지를 설치할 프로젝트에서 위 패키지를 추가해주세요.
   

   // 아래 설치 경로는 저의 로컬 환경에 따른 경로입니다.
   pnpm install ../core-ui/innogrid-ui-core-0.0.1.tgz

   
   

   

   
   설치가 완료됐다면 위와 같이 package.json에 패킹된 라이브러리가 설치된 것을 확인할 수 있습니다.
5. 작업 진행한 컴포넌트를 프로젝트에 이식한 후 테스트를 완료해주세요. 아래는 모달 컴포넌트에서 사용한 예시 캡쳐 입니다.
   

   

6. 테스트가 완료 된 후 UI 라이브러리를 퍼블리싱 해주세요. 퍼블리싱이 완료됐다면 실제로 해당 버전을 프로젝트에 설치한 후 이상이 없는지 테스트를 해주시면 됩니다.