모노레포에서 다른 프로젝트로 파일을 옮길 때 조심해야 할 점

현재 인턴으로 근무하는 회사의 웹 프론트엔드 프로젝트는 다수의 프로젝트를 단일 레포지토리에서 관리하는 모노레포 방식을 채택하고 있다.

 

common 프로젝트에 컴포넌트 A가 있었다. 컴포넌트 A가 common 프로젝트에 있긴 했지만 현재 내가 작업하고 있는 프로젝트 B에서 밖에 사용이 안되었고, 프로젝트 B에서 만든 api hook을 활용해 컴포넌트 A에서 데이터를 주고받아야 했기 때문에,

 

고민 끝에 컴포넌트 A를 common 프로젝트에서 프로젝트 B로 옮기기로 하였다.

---

1. 그냥 drag and drop을 하면 될 것이라 생각했지만

컴포넌트 A를 옮길 때 고려해야 될 내용이 있었나 싶었지만, vscode가 알아서 업데이트해주겠지 싶어서 일단은 그냥 drag and drop으로 파일을 옮겼다.

 

옮기고 나서 vscode가 자동으로 import를 업데이트해주어서 에러가 발생하지 않는 것처럼 보였다.

 

계속 프로젝트 B의 작업을 하다가 common 프로젝트의 빌드의 watch를 끄고 (common project에서 ‘pnpm run build —watch’ 명령어를 입력해야 common 프로젝트에서의 변경 내용이 바로 반영이 된다),

 

잠시 후에 다시 watch를 키니,

프로젝트 B 에서 common 프로젝트의 컴포넌트를 인식하지 못하고 수많은 에러가 발생했다.

---

2. 에러가 왜 발생했을까(tsconfig.json을 살펴보자)

왜 common 프로젝트 경로를 인식하지 못했을까? 처음에는 그냥 에러가 발생했나 싶어서 다시 common을 빌드하고, 이래도 에러가 계속 발생했길래 모든 프로젝트를 다시 빌드하기도 하였다.

 

그럼에도 에러는 계속 발생했고, 파일을 옮기기 전으로 커밋을 되돌려보니 에러가 발생하지 않았기에,

파일을 drag and drop으로 옮기면서 바뀐 내용 중 일부가 오류를 발생시켰음을 깨닫게 되었다.

 

 

무슨 파일이 바뀌었나 살펴보니 common/tsconfig.json의 내용이 바뀌어있었다. common 프로젝트에 있는 파일을 다른 프로젝트로 옮기는 순간, include에 해당 파일이 옮긴 프로젝트의 경로로 삽입되어 있었다.

  // 이전
  "include": ["src"]
  
  // 이후
  "include": ["src", "../../../packages/projectB/src/ComponentForBlog.tsx"]

그리고 이 이후에 빌드가 되면, common/dist가 기존 common 프로젝트의 파일들 뿐만이 아니라 프로젝트 B의 파일들 또한 빌드가 되어 있었다!

 

터미널에서 common/dist에서 ls -la를 해본 결과

// 이전
drwxr-xr-x@ 13 myname  staff   416  4 19 14:35 .
drwxr-xr-x@  9 myname  staff   288  3 15 16:08 ..
drwxr-xr-x@ 11 myname  staff   352  4 19 14:35 api
drwxr-xr-x@ 30 myname  staff   960  4 19 14:35 components
drwxr-xr-x@  4 myname  staff   128  4 19 14:35 globalStyle
drwxr-xr-x@ 19 myname  staff   608  4 19 14:35 handler
drwxr-xr-x@ 34 myname  staff  1088  4 19 14:35 hooks
-rw-r--r--@  1 myname  staff  2335  4 19 14:35 index.d.ts
-rw-r--r--@  1 myname  staff  5915  4 19 14:35 index.js
drwxr-xr-x@ 55 myname  staff  1760  4 19 14:35 modules
drwxr-xr-x@  4 myname  staff   128  4 19 14:35 recoil
drwxr-xr-x@ 32 myname  staff  1024  4 19 14:35 resource
drwxr-xr-x@ 46 myname  staff  1472  4 19 14:35 utils

// 이후 (common/tsconfig.json에 project B의 경로가 포함되어 있을 때)
common projectB

따라서 파일을 다른 프로젝트로 이동시킬 때 자동으로 바뀌는 common/tsconfig.json의 include를 삭제하고 빌드를 해줘야 다른 프로젝트에서 common/dist에 있는 컴포넌트들의 경로를 잘 찾을 수 있다.

 

 

왜 파일을 drag and drop을 할 때 tsconfig.json의 include가 업데이트되었는지는 조금 더 탐구가 필요할 것 같다. 다른 컴퓨터에서 drag and drop을 할 때에는 이런 일이 발생하지 않았었다.

→ 아무튼 결론은, 어떤 프로젝트의 파일을 다른 프로젝트로 옮길 때 tsconfig.json을 잘 살펴보자!