Monorepo 설정에서 TypeScript를 사용하는 방법
모노레포 설정을 사용하면 단일 리포지토리에서 여러 패키지나 프로젝트를 관리할 수 있습니다. TypeScript를 사용하면 이 설정은 특히 다양한 패키지에서 유형, 인터페이스, 심지어 유틸리티를 공유하는 데 강력합니다. 이 가이드에서는 모노레포 환경에서 TypeScript를 설정하는 방법을 안내합니다.
1. 모노레포 설정
모노레포를 설정하려면 npm
작업공간이나 yarn
작업공간과 같은 도구를 사용할 수 있습니다. 이러한 도구를 사용하면 동일한 리포지토리에서 여러 패키지를 관리하고 프로젝트 간에 코드를 쉽게 공유할 수 있습니다.
1.1 모노레포 초기화
먼저, 모노레포용 새 폴더를 만들고 npm
또는 yarn
으로 초기화합니다.
mkdir my-monorepo
cd my-monorepo
npm init -y
그런 다음 package.json
에서 작업 공간을 구성합니다.
{
"name": "my-monorepo",
"version": "1.0.0",
"private": true,
"workspaces": [
"packages/*"
]
}
이렇게 설정하면 npm이나 yarn에 모든 패키지가 packages
폴더 내부에 위치하게 됩니다.
2. Monorepo에 패키지 추가
모노레포에 두 개의 패키지를 만듭니다. 이 예에서는 재사용 가능한 코드에 대한 shared
패키지와 프런트엔드 애플리케이션에 대한 web-app
패키지를 만듭니다.
mkdir -p packages/shared
mkdir -p packages/web-app
각 패키지 내부에서 package.json
을 초기화합니다.
cd packages/shared
npm init -y
cd ../web-app
npm init -y
3. Monorepo에 TypeScript 추가
다음으로, TypeScript를 설정하겠습니다. Monorepo 루트에 TypeScript와 필요한 종속성을 설치합니다.
npm install typescript --save-dev
전체 모노레포에 대한 TypeScript 구성을 정의하려면 루트 수준 tsconfig.json
을 만듭니다.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": ["packages/*/src"]
},
"composite": true,
"declaration": true,
"outDir": "dist",
"rootDir": ".",
"skipLibCheck": true,
"module": "ESNext",
"target": "ES6",
"moduleResolution": "node"
},
"include": ["packages/*"]
}
여기서 핵심은 paths
옵션인데, 이 옵션을 사용하면 TypeScript가 모노레포의 다양한 패키지로부터의 가져오기를 이해할 수 있습니다.
4. 각 패키지에서 TypeScript 구성
각 패키지는 모노레포에서 제대로 작동하려면 자체 tsconfig.json
이 필요합니다. 다음은 shared
패키지의 구성 예입니다.
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"rootDir": "src",
"outDir": "dist"
},
"include": ["src"]
}
web-app
패키지의 경우:
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"rootDir": "src",
"outDir": "dist"
},
"include": ["src"]
}
이제 각 패키지에서 TypeScript를 사용할 수 있으며 구성은 루트 tsconfig.json
에서 공유됩니다.
5. 패키지에 TypeScript 코드 추가
두 패키지에 샘플 TypeScript 코드를 추가해 보겠습니다. shared
패키지에서 src
폴더를 만들고 TypeScript 파일을 추가합니다.
mkdir -p packages/shared/src
touch packages/shared/src/index.ts
index.ts
에서 간단한 함수를 내보냅니다.
export const greet = (name: string): string => {
return `Hello, ${name}!`;
}
web-app
패키지에서 src
폴더와 index.ts
파일을 만듭니다.
mkdir -p packages/web-app/src
touch packages/web-app/src/index.ts
이제 공유 함수를 가져옵니다.
import { greet } from 'shared';
console.log(greet('TypeScript Monorepo'));
6. 모노레포 건설
모노레포의 모든 TypeScript 코드를 컴파일하려면 TypeScript 컴파일러를 사용해야 합니다. 모노레포의 루트에서 다음을 실행합니다.
npx tsc --build
이 명령은 각각의 tsconfig.json
파일을 따라 모든 패키지를 컴파일합니다.
결론
이 가이드에서는 모노레포에서 TypeScript를 설정하고 사용하는 방법을 다루었습니다. 코드를 모노레포 구조로 구성하면 여러 패키지에서 코드를 쉽게 공유하여 개발 프로세스를 보다 효율적으로 만들 수 있습니다. TypeScript의 강력한 타이핑과 프로젝트 참조를 통해 이 설정은 대규모 애플리케이션이나 공유 라이브러리에 완벽합니다.