서로 다른 프로젝트에서 코드를 공유하기

서로 다른 프로젝트에서 코드를 공유하기

서버, 클라이언트 프로젝트가 독립적으로 존재할 때, 요청과 응답을 다루는 코드에 중복되는 부분이 있어 공유하고 싶다. 어떻게 코드를 공유할 수 있을까?

방법

서버, 클라이언트, 공통 코드를 다루는 프로젝트가 따로 있다고 가정해 보자. 디렉토리 구조는 다음과 같다.

디렉토리 구조

위와 같은 구조에서, client.ts는 common.ts에서 export하는 타입과 함수를 import하여 사용하려고 했다. 빌드는 실패했고, 에러는 다음과 같다.

TS6059: File 'C:/workspace/test/structure/common/common.ts' is not under 'rootDir' 'C:/workspace/test/structure/client'. 'rootDir' is expected to contain all source files.

 

tsconfig에서는 rootDir이라는 옵션이 있다. 빌드의 대상이 되는 모든 소스들이 rootDir의 서브 디렉토리에 있어야 하는 것을 가리킨다. 클라이언트의 tsconfig 옵션은 "rootDir": "./"이었다. common 디렉토리의 소스들은 rootDir의 범위 바깥에 있으므로 에러를 발생시킨 것이다.

 

이를 해결하려면, rootDir 옵션을 명시적으로 주지 않는 방법이 있다. rootDir 옵션을 주석으로 만들어 제거하면, 타입스크립트 컴파일러는 빌드에 사용되는 모든 소스코드들을 포함할 수 있는 범위를 찾아 rootDir로 여긴다. rootDir 옵션을 제거하면, 제대로 빌드되고 실행된다.

의문1. 어떤 tsconfig 파일이 적용될까?

위 구조에서 client에도 tsconfig가 있고, common에도 tsconfig가 있다. client에서 빌드를 하게 되면, client에서 import하는 common쪽 파일들은 client의 tsconfig에 영향을 받을까? 아니면 common의 tsconfig에 영향을 받을까? 확인해 보니 client의 tsconfig의 영향을 받는다. 확인해 본 방법은 다음과 같다.

• common에 class-transformer를 설치한다. class-transformer는 plain object를 클래스로, 클래스를 plain object로 변환하는데 도움을 주는 라이브러리이다. 서버와 클라이언트가 서로 데이터를 주고 받는 과정에서 많이 쓰여서 선택했다.
• 데코레이터 옵션을 활성화한다. 데코레이터 옵션이 없으면 빌드를 실패한다.
• client에도 class-transformer를 설치한다. 대신 데코레이터 옵션은 끈다.
• client에서 빌드를 해보면 실패한다. 즉, 빌드하는 쪽의 tsconfig가 적용되는 것을 알 수 있다. common에서 빌드를 하면 반대로 성공한다.

의문2. 어떤 모듈을 가져올까?

client에서 import하는 common파일에서 다시 라이브러리를 import하고 있을 때, 이 모듈은 client의 node_modules에서 가져올까 common의 node_modules에서 가져올까? 확인해 보니, common의 node_modules에서 가져온다. 확인해 본 방법은 다음과 같다.

• comoon에 class-transformer을 설치하고 타입스크립트 옵션을 맞춘다.
• client에서 라이브러리를 설치는 하지 않지만, 타입스크립트 옵션을 수정한다.
• common에서는 class-transformer의 함수를 다시 export하고 client에서 import하여 사용한다.
• 빌드도 잘되고 실행도 잘된다.

참고

https://stackoverflow.com/questions/57422458/error-ts6059-file-is-not-under-rootdir-rootdir-is-expected-to-contain-al