2021/10/11 : React Component NPM으로 배포하기 (feat. typescript)

 

어느 웹사이트에서나 이용할 수 있는 댓글서비스 다라쓰!는

일반적인 html코드에 스크립트 태그를 삽입하여 서비스를 이용할 수 있음은 물론,

 

Gatby와 같은 react 컴포넌트에서도 이용이 가능합니다.

 

darass.co.kr

에서 스크립트 발급 방법에서도 확인하실 수 있습니다.

 

그리고 이러한 UI Component는 npm에 패키지를 배포하여 유저가 설치해서 사용할 수 있도록 하고있었는데요.

https://www.npmjs.com/package/darass-react

darass-react

 

repo가 아예 분리되어있다보니, 기존 스크립트 관련 로직이 업데이트되었음에도 불구하고,

혼자인 프론트엔드 개발자인 제가 까먹어서 업데이트를 안해버린 상황이 생겼고,

 

Gatsby를 이용해서 react로 ssr방식을 사용해서 블로그를 이용하시던 고객님에게서 버그리포트를 받게 되었습니다.

 

빠르게 수정을 하려고 코드를 봤는데, 지금은 토스로 떠난 그리운 팀원이 작성한 코드를 뜯어보는 순간

아차 싶었습니다.

 

일단 제가 기존에 있던 모든 코드를 typescript로 바꾸었는데,

해당 npm은 javascript로 배포를 하고 index.d.ts를 별도로 추가하여 typscript에 대응을 하고 있었으며,

class component였습니다.

 

로직을 업데이트 해주어야하는데 언어와 사용  Component형식이 달라서 순간 뇌정지가 왔습니다.

 

그래서 아예 갈아엎기로 했는데요.

그리고 업데이트된 코드를 최대한 재사용하기위해서, 파일구조와 로직을 모두 그대로 복사해온다음에,

SSR 대응 로직과 projectKey를 컴포넌트로부터 입력받는 로직, 중복으로 실행되었을 경우의 대응 로직만 추가했습니다.

 

여기까지는 코드상으로 리팩터링하는 것이기 때문에, 크게 어렵진 않았습니다.

 

근데 가장 큰 문제점은, npm으로 배포하는 것이었습니다.

일단, webpack으로 번들을 해서 js로 나온것을 npm으로 배포하는것은 typescript에 대응을 할 수 없습니다.

그래서 index.d.ts를 추가하는 것입니다.

 

하지만 타입스크립트를 사용하여 개발을 하면, d.ts를 컴파일때 생성할 수 있고, 그것을 package.json에 선언만해주면 라이브러리에서 바로 typescript 대응이 됩니다. javascript를 사용하면 d.ts를 내가 직접 작성해주어야합니다.

 

그래서 tsconfig.json 파일을 아래와 같이 바꾸었는데,

https://github.com/zereight/darass-react/blob/main/tsconfig.json

컴파일때 d.ts 파일을 만들기 위한 별도의 tsconfig.json 프로퍼티가 있으니, 꼭 참고해주세요.

(package.json에도 types를 써줘야합니다!)

 

아무리 webpack으로 빌드를해도 d.ts파일을 생성하지 못했습니다.

 

오랜시간의 리서치결과

또한, Babel은 TypeScript에 대한 .d.ts 파일을 만들 수 없기 때문에 여러분의 프로젝트가 라이브러리인 경우 작업하기가 더 어려워질 수 있습니다.

 

https://typescript-kr.github.io/pages/tutorials/babel-with-typescript.html

TypeScript 한글 문서

 

babel은 d.ts파일을 만들어낼 수 없다는 새로운 사실을 알게되었습니다.

저는 babel-loader가 typescript를 지원한다길래 별도의 ts-loader를 설치하지 않았습니다. 실제로 babel-loader만으로 잘 써왔습니다.

 

하지만 ts-loader를 설치하여 webpack의 loader부분에 넣어준후에야, d.ts파일을 생성하는 것을 볼 수 있었습니다...

 

즉, babel-loader가 ts-loader를 완전히 대체할 수 있는 것은 아니고

라이브러리 개발을 할 때에는 ts-loader를 사용해서 d.ts 파일을 만들어야합니다.

 

 

참고

https://webpack.kr/guides/typescript/

TypeScript | 웹팩

https://typescript-kr.github.io/pages/declaration-files/creating-dts-files-from-js.html

TypeScript 한글 문서