모노레포 설정하면서 만난 다양한 이슈..

History

• 이상하리만치 큰 패키지의 크기 (MB 정도..)

• 기본적인 HTML Attribute를 확장하고 있지 않는 Props들

• 내부에서 global CSS를 적용하고 있는 형태

• 기존 서비스인 SlotBooking 도메인과 너무 밀접한 형태의 패키지들을 내부에서 사용하고 있는 형태

• Storybook을 사용하고 있지만 UI 테스팅까지는 적용되어 있지 않음

• 워크스페이스의 패키지를 빌드했을 때 동기화가 되지 않음.. 무조건 npm install을 통해 다시 받아와야 함..
• 내부에서 똑같이 심볼릭 링크를 이용해서 참조하는 것으로 알고 있는데 왜 안되는지 모르겠다.. (다시 확인해봐야할듯 ?)

• 제일 중요한 디버깅!! npm link로 로컬에서 디버깅을 하고 있었다. (이 방법이 제일 편한지는 모르겠다.) node_modules가 호이스팅 되는 바람에 link로 글로벌 패키지로 등록한 뒤 install하면 node_modules가 호이스팅된 상태로 install 되어버려서 정상 동작하지 않는다…..

Issue

마이그레이션 과정 : nx로 보일러 플레이트 세팅 → package.json의 모듈 install

이슈 1. eslint-plugin-prettier에서 정상 동작하지 않는다는 오류 발생

• 원인
• nx 보일러 플레이트의 eslint-plugin-prettier는 5버전을 사용하고 있었다.
⇒ peerDependencies가 prettier 3버전이어야 한다.
• 기존 프로젝트는 prettier 2버전대, eslint-plugin-prettier는 4버전대를 이용중

• 해결 방안
• eslint-plugin-prettier를 4버전으로 설정하여 해결하였다.

• 이유
• 마이그레이션 과정에서는 최대한 기존 환경을 유지해야 한다고 생각하였다.
⇒ 서비스 내부에서 전반적으로 사용되는 패키지였으며 QA 일정을 따로 잡아야 한다.

이슈 2. Property 'toHaveStyle' does not exist on type 'Assertion'.ts(2339) 에러 발생

• 원인
• 타입스크립트가 @testing-library/jest-dom의 타입 정의를 인식하지 못해 발생

• 해결 방안
• tsconfig.spec.json의 types에 @testing-library/jest-dom을 추가하여 해결하였다.

• 이유
• 타입스크립트 strict 검사로 인해 모든 라이브러리의 타입 정의가 필요했다.

이슈 3. tsc --noEmit으로 타입 체킹을 하였을 때, 체킹이 안되는 이슈 발생

• 원인
• 타입스크립트 컴파일러가 다른 tsconfig.json을 참조하여 컴파일을 시도하였기 때문에 발생

• 해결 방안
•  tsc --noEmit -p tsconfig.lib.json
• tsconfig.lib.json으로 현재 소스 코드를 포함하는 tsconfig로 빌드하여 해결

• 이유
• eslint에서는 타입 컴파일관련 오류가 발생하지 않는다. 서비스의 안정성을 위해 타입 컴파일 체킹 과정 또한 필요하다고 생각하였다.

이슈 4.  react-router-dom이 @types/react 18버전을 따르는 오류

Type '{ children: Element; to: string; }' is not assignable to type 'IntrinsicAttributes & Pick<{}, never> & { theme?: Theme | undefined; } & { ref?: Ref<Component<{}, any, any>> | undefined; } & { ...; }'.

이슈 5.playground에서 라이브러리 import 시, React.ForwardRefExoticComponent를 이해하지 못하는 오류

• 원인
• 각 패키지 내부의 react, react-dom 버전과 루트의 react, react-dom 버전이 통일되지 않아서 발생

• 해결 방안
• 루트 package.json의 react, react-dom을 17 버전으로 낮추어 해결

• 이유
• 사실 외부에 디자인 시스템을 제공하는 패키지이기 때문에 리액트 버전을 최신으로 통일하는 것이 가장 좋다고 생각한다.
• 하지만 마이그레이션 과정에서는 최대한 기존 환경을 유지해야 한다고 생각하였기 때문에 버전을 통일시켰다.
⇒ 서비스 내부에서 전반적으로 사용되는 패키지였으며 QA 일정을 따로 잡아야 한다.