TypeScript 개발의 필수템! tsc --watch 모드 완벽 가이드

TypeScript로 코딩을 할 때, 수정한 내용을 확인하기 위해 매번 터미널에 tsc를 입력하고 계시진 않나요?

그렇다면 여러분은 오늘 이 글을 읽고 나서 완전히 새로운 세상을 만나게 될 거예요! 😉

---

1. --watch 플래그란 무엇인가요? 🤔

기본적으로 tsc 명령어를 실행하면 TypeScript 컴파일러는 프로젝트 내의 소스 파일들을 한 번 스캔하여 JavaScript 파일로 변환한 뒤 종료됩니다.

하지만 --watch (또는 짧게 -w) 플래그를 붙이면 상황이 달라집니다.

• 지속적 감시: 컴파일러가 종료되지 않고 프로세스를 유지합니다.
• 파일 변경 감지: 프로젝트 내의 파일이 저장(Save)되는 순간을 실시간으로 감지합니다.
• 증분 컴파일: 변경된 부분만 빠르게 다시 컴파일하여 결과물을 업데이트합니다.

---

2. 왜 --watch를 사용해야 할까요? ✨

이 기능을 사용하면 얻을 수 있는 이점은 명확합니다.

1. 개발 속도 향상(DX): "코드 수정 -> 저장 -> 터미널 이동 -> tsc 입력 -> 결과 확인"의 반복적인 과정에서 중간 단계가 사라집니다.
2. 실시간 오류 피드백: 코드를 작성하자마자 문법 오류나 타입 에러가 터미널에 바로 표시됩니다. 마치 실시간 맞춤법 검사기 같죠! ✍️
3. 효율적인 리소스 사용: 모든 파일을 처음부터 다시 읽는 것이 아니라, 변경된 부분과 연관된 파일들만 처리하기 때문에 대규모 프로젝트에서 훨씬 빠릅니다.

---

3. 어떻게 사용하나요? 🛠️

사용법은 매우 간단합니다. 터미널에 다음과 같이 입력해 보세요.

# 특정 파일 하나만 감시할 때
tsc index.ts --watch

# 프로젝트 전체(tsconfig.json 기준)를 감시할 때
tsc --watch

명령어를 실행하면 터미널에 Starting compilation in watch mode...라는 문구가 뜨면서 감시 모드가 시작됩니다. 이제 에디터(VS Code 등)에서 코드를 수정하고 Ctrl + S를 누를 때마다 자동으로 컴파일이 진행됩니다. ✅

---

4. tsconfig.json과 함께 사용하기 ⚙️

보통 실제 프로젝트에서는 설정 파일인 tsconfig.json을 사용하죠. 이때 watchOptions라는 설정을 통해 더 세밀하게 제어할 수 있습니다.

{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "watchOptions": {
    "watchFile": "useFsEvents",       // 파일 감시 방식 설정
    "watchDirectory": "useFsEvents", // 디렉토리 감시 방식 설정
    "fallbackPolling": "dynamicPriority" // 시스템 리소스 부족 시 폴링 방식
  }
}

Tip: 대부분의 경우 기본 설정만으로도 충분히 훌륭하게 작동합니다!

---

5. 실무 꿀팁: Nodemon과의 조합 🍯

tsc --watch는 JavaScript 파일을 만들어 줄 뿐, 파일을 자동으로 실행해주지는 않습니다. 이때 nodemon이나 ts-node-dev 같은 도구를 함께 사용하면 "코드 수정 -> 컴파일 -> 서버 재시작"이 한 번에 일어나는 마법을 경험할 수 있습니다.

추천 워크플로우:

1. 하나의 터미널 창에서는 tsc --watch를 띄워둡니다.
2. 다른 터미널 창에서는 생성된 dist/index.js를 실행하는 nodemon을 띄웁니다.

---

6. 마무리하며 🏁

--watch 플래그는 단순한 옵션이 아니라, TypeScript 개발자의 생산성을 결정짓는 핵심 도구입니다. 아직 사용해보지 않으셨다면 오늘 바로 터미널에 -w 한 글자를 추가해 보세요. 여러분의 개발 경험이 훨씬 쾌적해질 거예요! 😊