대규모 프로젝트에 TypeScript 도입하기
Next.js + JavaScript 로 구성된 프로젝트의 규모가 점점 커지고 있고 아래와 같은 이유들로 TypeScript 도입 필요성을 느껴 도입을 진행해보았습니다.
TypeScript 도입 이유
TS를 이용해 컴파일 단계에서 오류를 잡을 수 있는데, JS는 런타임에서만 오류를 확인할 수 있기 때문에
Cannot read properties of undefined (reading ‘’) 오류가 쌓이고 있습니다.
또 위와 같이 인자의 타입을 추론하지 못 해 어떤 인자를 넘겨줘야 하는지 헷갈릴 경우가 많습니다.
이런 경우 따로 주석을 달아줘서 타입을 인지시켜 줘야하는 불편함이 있습니다.
추가적으로 IDE의 여러 기능을 TypeScript를 사용함으로 더 많이 활용할 수 있습니다.
(Auto import, Type Checking 등 IDE의 여러 기능 활용 가능)
위와 같은 이유로 TypeScript를 도입하게 되었습니다.
도입 시 가장 우선적으로 생각했던 것이 있습니다.
기존 JavaScript 파일에 영향이 가지 않도록 한다.
점진적으로 TypeScript를 도입할 예정이고 TypeScript 도입에 너무 많은 리소스를 쓰지 않으려고 기존의 JavaScript에는 무조건 영향이 가지 않게 진행하였습니다.
구성 시작
- 패키지 설치
yarn add -D typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser @types/node @types/react @types/react-dom
추가적으로 필요한 @types 패키지도 설치합니다.
- tsconfig 구성
기존의 jsconfig를 기준으로 tsconfig를 작성합니다.
각자 프로젝트 설정에 맞게 추가 설정을 해주시면 됩니다.
(프로젝트 구조에 맞게 baseUrl을 설정해주세요.)
- eslint 설정
기존 eslintrc 파일에서 위의 내용만 추가 해주었습니다.
위에서 말씀 드렸듯이 가장 1순위가
JS파일에 영향을 주지 않는다. 이기 때문에 안전하게 overrides를 통해 ts 추가 설정을 해줍시다.
- next-env.d.ts
프로젝트 구조에 맞게 next-env.d.ts 파일도 추가합니다.
추가 설정
혹시 redux도 사용 중이라면 useSelector 를 사용했을 때 오류가 나지 않게 하기 위해 RootState 타입도 설정해줍시다. (@types/index.d.ts)
yarn build시 위와 같이 다른 위치에 tsconfig를 새로 만들어 주는 경우
next.config.js 에 typescript: { tsconfigPath: ‘./tsconfig.json’ },
같이 tsconfig 경로를 주어 해결해주세요.
JS -> TS 마이그레이션
위와 같이 기존에 사용하던 prop-types를 type으로 변경이 가능합니다.
하지만 이렇게 작업 파일마다 변경하게 되면 ts로 마이그레이션 하는 리소스가 상당히 커집니다.
그런 경우 기존의 prop-types를 사용한 부분을 유지하고,
InferProps 를 사용하여 간단하게 마이그레이션 가능합니다. (추후 변경은 필요)
후기
TypeScript 도입 후 약 2개월 정도가 지난 시점에 만족도 설문을 진행한 결과
전반적으로 만족한다는 의견이 나왔습니다.
또한 추가적인 의견으로는
- 타입 추론이 돼서 편하다.
- 반대로 타입 추론이 아직 안 되는 부분들이 있어서 아쉽다.
- TS 파일로 변경하면서 작업하는 공수가 생각보다 작지 않다.
등의 의견이 있었습니다.
프로젝트 규모가 커지면서 TS의 필요성을 느끼게 되어 이번에 도입을 하게 되었는데
장단점이 명확한 만큼 꼭 필요한 프로젝트에 도입을 하면 효율적으로 잘 활용할 수 있을 것 같습니다.
