모던화와 마이그레이션

"TS 도입하고 싶은데 어디서부터 시작하지?" 이 질문에 대한 답이 10장에 있어. 핵심은 점진적 전환 — 한 번에 다 바꾸는 게 아니라 단계별로 안전하게 옮기는 거야.

TS로 전환하기 전에, 먼저 JS 코드를 모던하게 만들어야 해. var 대신 let/const, for...of, 화살표 함수, 구조분해 할당, async/await, ES 모듈(import/export)로 바꾸는 거지. TS는 모던 JS의 상위집합이니까, JS가 구식이면 TS 전환도 어려워지거든. 이 단계는 TS 전환과 독립적으로 할 수 있어.

정식 도입 전에 맛보기할 수도 있어. JS 파일 맨 위에 // @ts-check를 추가하면 파일 확장자는 .js인 채로 TS의 타입 체크를 받을 수 있거든. JSDoc 주석으로 타입 힌트도 줄 수 있고. 기존 코드를 바꾸지 않으니 위험이 거의 없고, 파일 단위로 적용 가능하고, "TS 도입"이 아니라 "타입 검사 주석 추가"로 프레이밍할 수 있어서 팀의 저항도 적지.

본격적인 전환의 첫 단계는 tsconfig.json에 **allowJs: true**를 설정하는 거야. .js 파일과 .ts 파일이 같은 프로젝트 안에 공존할 수 있게 되거든. 전체를 한 번에 전환하지 않아도 되니까 빅뱅 마이그레이션의 리스크를 피할 수 있어.

그다음은 파일을 하나씩 .ts로 바꾸는 단계야. 전환 순서가 중요한데, 의존성 그래프의 잎(leaf)부터 전환해야 해. 유틸리티 함수, 상수, 타입 정의 파일부터 시작해서 데이터 모델, API 클라이언트, 비즈니스 로직, UI 컴포넌트 순으로 올라가는 거지. 완벽한 타입을 목표로 하지 마. any로 도배된 .ts 파일도 .js 파일보다는 상태가 나아. 최소한 점진적으로 개선할 발판은 되니까.

모든 파일이 .ts로 전환됐으면 마지막 단계는 noImplicitAny를 켜는 것이야. 이게 꺼져 있으면 TS가 타입을 추론 못 할 때 any로 넘어가서 사실상 반쪽짜리 타입 체크거든. 켜면 에러가 많이 나올 수 있는데, 함수 매개변수에 타입을 추가하고, 변수 초기화를 확인하고, 서드파티 타입 문제를 해결하면 돼. 파일 단위로 // @ts-strict를 적용하는 방법도 있어. 최종 목표는 strict: true야.

마이그레이션은 마라톤이지 스프린트가 아니야. 큰 프로젝트라면 몇 달에서 몇 분기가 걸릴 수 있어. 중요한 건 한 걸음씩 꾸준히 진행하는 것. 각 단계마다 코드의 품질이 조금씩 올라가고, 버그가 하나씩 줄어들거든.

---

정리

10장 읽고 기억할 거 세 가지:

1. 점진적 마이그레이션 로드맵: 모던 JS -> @ts-check -> allowJs -> .ts 전환 -> noImplicitAny -> strict. 각 단계가 독립적으로 가치가 있다.
2. 의존성 그래프의 잎(leaf)부터 전환하라. 가장 단순한 모듈부터 시작해서 점점 올라가는 전략.
3. 완벽을 목표로 하지 마라. any로 도배된 .ts 파일도 .js보다는 낫다. 일단 전환하고, 나중에 정교화하라.