나는 현재 디프만 5팀(똑스)에서 개발자를 위한 스터디 툴을 만드는 프로젝트에 프론트엔드 개발자로 참여하고 있다.
우리팀은 컴포넌트 디자인에 대한 부담을 최대한 덜고 기능 개발에 초점을 맞추기 위해 React UI 컴포넌트 라이브러리인 prime react를 사용하는 것으로 방향을 정했다.
prime react 세팅할 때 package로 한 번 매핑하는 일을 맡게 되었다.
라이브러리를 package로 매핑….???
라이브러리 그냥 세팅해서 쓰면 되는 것 아닌가요 ????????????
똑스에서는 package 폴더 내부에 서비스에서 공용으로 사용한 것들을 집어넣어서 라이브러리처럼 사용하고자 했다. 따라서 공통 컴포넌트를 개발하고 이를 package에 넣을 것이고 이 컴포넌트들은 prime react를 이용해서 만들것이기 때문에 prime react를 package에 매핑해서 사용한다는 것이었다.
여기까진 이해했는데 막상 packages 폴더 내부에 세팅하려니 혼돈의 카오스가 다시 찾아왔다. 와프에서 사용한 컴포넌트들을 packages/toks-components 에 Button.tsx, Dropdown.tsx 같이 정의하여 props를 넘겨서 사용할 수 있게 하나하나 만들어야하는 것인가 라는 고민을 하기 시작했다.
질문을 드렸더니 현구님이 명쾌하게 어떻게 하면 될지 방법을 제안해주셨다.
- Packages/toks-components 에서
- 내부적으로 prime react 설치 후에
- 실제로 하는 일은 우선 export * from "prime-react"
정도만 하여 추후에 디자인 시스템 제작시 toks-components만 수정하는 방향으로 가자고 ..!!!
import 'primereact/resources/themes/lara-light-indigo/theme.css'; //theme
import 'primereact/resources/primereact.min.css'; //core css
import 'primeicons/primeicons.css'; //icons
export * from 'primereact';그래서 packages/toks-components/src/index.ts에 위와 같이 prime react css 를 import 하고 전체를 export해주었다. (고민한 것 보다는 간단했던 작업..)
이 과정에서 primereact를 export할 때 에러가 났었다. primereact가 typescript를 사용할 수 있도록 처리되지 않았기 때문에 발생하는 에러였다.
따라서 모듈을 타입스크립트로 인식할 수 있도록 타입을 정의해주어야 했다.
- tsconfig.json에서 typeRoots를 설정.
"noUncheckedIndexedAccess": true,
"typeRoots": ["./@types"],
"paths": {
"*": ["./@types/*"]
}- d.ts 파일 생성.
// @types/primereact가 없어 직접 모듈 정의
// primereact.d.ts
declare module 'primereact';
위와 같이 직접 types 모듈을 정의해서 export했더니 금방 에러를 해결할 수 있었다.!.!.!!!!!
