파일이 수백 개라도 끄떡없다! TypeScript 프로젝트 전체를 가장 효율적으로 컴파일하는 비법 🛠️

안녕하세요, 개발자 여러분! TypeScript 프로젝트를 진행하다 보면 어느새 파일 개수가 수십, 수백 개로 늘어난 것을 발견하게 됩니다. 이때 터미널에 일일이 파일 이름을 입력하며 빌드하고 계시지는 않나요? 😅

오늘은 TypeScript 컴파일러(tsc)의 잠재력을 100% 끌어올려, 프로젝트 전체를 가장 빠르고 정확하게 JavaScript로 변환하는 표준화된 방법을 소개합니다.

---

1. 정답은 바로 tsconfig.json 파일입니다! 📄

단순히 파일 하나를 변환할 때는 tsc index.ts라고 입력하면 되지만, 프로젝트 단위의 컴파일에서는 tsconfig.json 설정 파일이 필수입니다.

• 정의: 프로젝트의 루트 디렉토리에 위치하며, 컴파일러 설정과 포함/제외할 파일 목록을 정의하는 설정 파일입니다.
• 작동 방식: 터미널에서 아무런 파일 인자 없이 단순히 tsc만 입력하면, 컴파일러는 현재 디렉토리부터 상위 디렉토리로 올라가며 tsconfig.json 파일을 찾습니다. 파일을 찾으면 그 설정에 따라 프로젝트 전체를 컴파일합니다.

---

2. 왜 tsc (인자 없음) 방식이 가장 효율적인가요? 💡

단순히 편리해서가 아닙니다. 이 방식이 효율적인 이유는 다음과 같습니다.

1. 일관성 유지: 모든 개발자가 동일한 컴파일 옵션(Target ES version, Module system 등)을 사용하게 됩니다.
2. 의존성 관리: 파일 간의 복잡한 import/export 관계를 컴파일러가 자동으로 파악하여 최적의 순서로 빌드합니다.
3. 성능 최적화: include와 exclude 옵션을 통해 컴파일 대상에서 제외할 폴더(예: node_modules)를 지정함으로써 빌드 속도를 획기적으로 높일 수 있습니다.

---

3. 가장 효율적인 설정을 위한 핵심 옵션 ⚙️

효율적인 컴파일을 위해 tsconfig.json에 반드시 포함해야 할 주요 설정들을 살펴보겠습니다.

{
  "compilerOptions": {
    "target": "ES6",             // 어떤 자바스크립트 버전으로 변환할 것인가
    "module": "commonjs",        // 모듈 시스템 선택
    "outDir": "./dist",          // 컴파일된 파일이 저장될 위치
    "rootDir": "./src",          // 소스 파일이 위치한 시작점
    "strict": true,              // 엄격한 타입 체크 (강력 권장!)
    "skipLibCheck": true         // 라이브러리 파일(*.d.ts) 체크 건너뛰기 (빌드 속도 향상)
  },
  "include": ["src/**/*"],       // src 폴더 내의 모든 파일을 컴파일 대상으로 지정
  "exclude": ["node_modules"]    // 제외할 경로
}

---

4. 생산성을 더 높여주는 꿀팁 (Advanced) 🚀

프로젝트 전체 빌드를 더 스마트하게 만드는 두 가지 추가 방법을 소개합니다.

① 증분 빌드 (Incremental Compilation)

tsconfig.json에 "incremental": true 옵션을 추가하세요. 마지막 빌드 정보를 파일로 저장하여, 변경된 부분만 골라서 컴파일하기 때문에 다시 빌드할 때 시간이 대폭 단축됩니다.

② Watch 모드 병행

이전 글에서도 다뤘듯이, tsc --watch (또는 tsc -w) 명령어를 실행하면 파일을 저장할 때마다 자동으로 전체 프로젝트의 변경 사항을 반영하여 컴파일합니다.

---

5. 요약: 효율적인 빌드 프로세스 정리 📋

1. 프로젝트 루트에 tsconfig.json을 생성합니다. (명령어: tsc --init)
2. include와 outDir 등을 설정하여 프로젝트 구조를 정의합니다.
3. 터미널에서 단순히 tsc 명령어를 실행합니다.
4. 반복 수정 시에는 tsc -w를 사용하여 실시간 컴파일을 활용합니다.

---

🏁 마무리하며

TypeScript 프로젝트의 효율적인 컴파일은 '정확한 설정 파일 하나'에서 시작됩니다. 파일 이름을 하나하나 입력하던 과거에서 벗어나, tsc 명령어 하나로 프로젝트 전체를 제어해 보세요. 빌드 속도가 빨라질수록 여러분의 집중력도 더 오래 유지될 것입니다! 💪