Portfolio


// hooks/test/usePaginiation.test.ts
import { usePagination } from '@/index'

Q. packages/ui의 디렉토리 내부에 있는 tsconfig.json의 우선 순위가 높으니까 ui package 내부에서는 tsconfig.json에 정의된 path인 "@ui/"로 쓸 수 있는거 아니야?? 왜 hooks 테스트 코드 실행 했을 때 관련없는 ui의 상대 경로에서 오류가 나는지 모르겠어!
A. GPT4 답변

모노레포 구조에서는 모든 패키지를 함께 빌드해야 일관성을 유지하며, 일반적으로 루트 tsconfig.json에서 정의한 경로가 우선 순위를 가집니다. hooks 패키지의 테스트 코드를 실행할 때 TypeScript 컴파일러는 import를 해석하기 위해 루트 tsconfig.json을 사용합니다.
hooks 패키지가 ui 패키지를 import하고, ui 패키지 내부에서 @ui를 경로에 사용하면 충돌이 발생할 수 있습니다. 루트 tsconfig.json에 @ui 별칭이 정의되어 있지 않기 때문에 TypeScript 컴파일러가 혼란스러워질 수 있습니다. 따라서 hooks 테스트 코드를 실행할 때 경로를 해석하지 못하게 됩니다.
이런 문제를 피하려면 프로젝트 전체에서 경로 별칭을 일관되게 유지하는 것이 중요합니다. ui 패키지의 경로에 @ui를 사용하려면 루트 tsconfig.json에서도 동일하게 정의해야 합니다.
모노레포 설정에서는 패키지가 함께 작동하도록 설계되어야 하므로, 모든 패키지에서 일관된 설정을 유지해야 합니다. hooks와 ui 패키지가 상관없어 보일지라도, 둘 다 동일한 모노레포에 속해 있으며, 한 패키지에서의 변경이 다른 패키지에 영향을 줄 수 있습니다.

이 때, ui 패키지도 함께 분석됨
분석되는 와중에 알 수 없는 alias인 @ui가 존재
ui 패키지를 사용하는 hook의 테스트 코드에서 에러 발생 ⇒ tsconfig의 path뿐만 아니라 vite의 resolve에도 등록해주기


// vite.config.ts
...
resolve: {
  alias: [{ find: '@ui', replacement: resolve(__dirname, '../ui/src') }]
},

모노레포 구조의 hooks 패키지 테스트시, ui 패키지 오류가 발생하는 현상