[Convi] Typescript + CRA 프로젝트 npm에 배포하기

배포

Tab과 Modal을 개발한 상태에서 npm 배포를 해보려 합니다. 처음 해보는 부분이다 보니 서칭과 사수 분의 도움을 받아 진행하긴 했지만 계속 발생하는 알 수 없는 오류 때문에 힘든 과정이었던 것 같습니다.
혹시나 저와 같은 실수를 하지 않으시길 바라면서 시작하겠습니다.
시작 전에 관련 블로그 게시글 하나 알려드립니다. 여러 블로그를 봤지만 이 분만큼 깔끔하고 논리정연하게 정리 해주신 분이 없었습니다!

1. 폴더 구조 정립하기

배포 전 폴더 구조를 확실히 정리할 필요가 있겠습니다. 위에 소개한 게시글에 가보시면 다음과 같은 폴더 구조를 추천해주십니다.

dist가 배포용 디렉토리, examples가 demo 프로젝트, lib에 실제 소스가 들어 있는 구조입니다. 저는 dist와 lib 구조는 그대로 가되 examples는 convi-demo라는 프로젝트를 따로 생성할 계획입니다.

제가 정리한 convi 프로젝트 폴더 구조는 다음과 같습니다.

• dist : 배포 디렉토리
• docs : 각 컴포넌트 별 readme.md 파일 존재
• index.tsx : 개발한 컴포넌트들을 export하는 파일, 후에 build 시 tsc를 통해 index.d.ts와 index.js 파일로 변환되어 dist 폴더로 들어가게 될 것.
• lib : 컴포넌트 소스코드

  • modal, tab ... etc : 개발할 컴포넌트들, 앞으로도 추가 예정
  • style : emotion style 정보, 혹은 emotion styled component와 같은 style에 관한 파일들
  • utils : 재사용할 수 있는 로직에 관한 파일들

2. package.json에 프로젝트 정보 세팅하기

3. .npmignore 파일 작성하기

.gitignore는 git과 연동할 때 tracking 하지 않을 파일이나 디렉토리를 설정합니다. .npmignore는 이와 마찬가지입니다. npm에 올리지 않을 파일이나 디렉토리를 설정합니다. 저는 다음과 같이 설정하겠습니다.

4. tsconfig.json 파일 작성하기

중요한 부분들에 대해 comment 하겠습니다.

• include : tsc로 컴파일할 파일들을 설정.
• exclude : include 프로퍼티에 의해 프로그램에 포함되는 파일들 중 제외시킬 파일들의 목록을 지정
• outDir : 빌드 결과물을 저장할 디렉토리를 설정.
• declaration : d.ts 파일 생성 여부.
• noEmit : 컴파일러가 JavaScript 파일 등의 출력 파일들을 만들어 내지 않도록 하는 설정, 만들어야 하니까 당연히 false
• target : 어떠한 버전의 JavaScript 코드로 컴파일 할지 결정, ESNext는 현재 사용중인 typescript 버전이 지원하는 가장 높은 js 버전을 자동 적용시켜준다. 하지만 ts 버전에 따라 달라질 수 있으므로 일단은 es5를 적용.

4. 배포

1. npm 회원가입 (홈페이지)

2. yarn login (터미널)

3. yarn publish (터미널)

   모듈을 npm으로 관리하시는 분들은 npm login, npm publish 실행하셔도 상관 없습니다.

   다음으로 package.json의 "scripts" 속성에 다음을 추가합니다.
   "prepare": "rm -rf dist && mkdir dist && tsc"
   이제 배포할 때 혹은 yarn run prepare 명령어 실행 시 dist 폴더를 삭제 후 새로운 dist 폴더를 생성하고 해당 dist 폴더에 빌드 결과물, 즉 배포할 파일들을 세팅하게 됩니다.
   

   배포가 완료되었습니다!

   ---

테스트

yarn add convi를 실행하여 convi를 설치해 사용했을 때 계속 아래 오류가 발생했습니다.

Invalid hook call. Hooks can only be called inside of the body of a function component.

TypeError: Cannot read properties of null (reading 'useState')

대체 뭐가 문제인지 몰랐습니다. 이것 때문에 집에와서 하루 꼬박 붙들고 있었지만 해결하지 못했습니다.

이제서야 해결했지만 convi에 존재하는 react, react-dom과 test project의 react, react-dom이 2중으로 존재해서 발생하는 문제였습니다.

react와 react-dom은 package.json에서 peerDependency로 설정해 주어야 합니다.

peerDependency는 실제로 패키지에서 직접 import 하지는 않더라도 호환성이 필요한 경우 명시합니다. 결국 convi를 사용할 프로젝트에서 해당 react 버전 사용할 것을 권고한다는 의미입니다.

peerDependency에 관해 더 자세히 아래 글에서 자세히 확인할 수 있습니다. peerDependencies

테스트 프로젝트는 매번 새로운 버전의 yarn을 업데이트 해야 하나?

아직 테스팅 라이브러리는 사용하지 않고 직접 프로젝트를 하나 파서 테스트 중입니다. 그런데 테스트 중 코드가 바뀌면 npm에 배포하고 테스트 프로젝트에서는 해당 신 버전 convi를 다시 내려 받아 테스트 해야 할까요?
아닙니다. link 명령어를 이용하면 해결할 수 있습니다.
convi 개발 프로젝트에서 yarn link를 하면 convi에 대한 link가 생기고 테스트 프로젝트에 와서 yarn link convi를 실행하면 node_modules에 convi가 추가됩니다. 물론 빌드는 다시 해줘야 겠지만 번거로움이 훨씬 줄어들었음을 확인할 수 있습니다.