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의 강력한 타이핑과 프로젝트 참조를 통해 이 설정은 대규모 애플리케이션이나 공유 라이브러리에 완벽합니다.