Part12_TypeScript_ProjectManagement
이효석
책 읽기

12장. 타입스크립트 프로젝트 관리

** [p.338] 타입스크립트 프로젝트관리 관리....... 이 책 쓰는 프로젝트는 관리 안하냐!?

12.1 앰비언트 타입 활용하기

12.1.1 앰비언트 타입 선언

앰비언트 타입 선언

  • .d.ts 확장자를 가진 파일에서 타입 선언만 하는 것으로 JS 의 전역 변수 처럼 TS 전역에서 해당 타입을 사용 가능

대표적인 앰비언트 타입 선언 활용 사례

  • .ts / .js 파일 이외의 형식은 타입스크립트가 읽어 들일 수 없으므로 declare 를 통해 미리 정보를 제공하여 에러 수정 가능
declare module '*.png' {
  const src: string;
  export default src;
}

자바스크립트로 작성된 라이브러리

  • tsconfig.json 파일에서 any 를 사용하지 못하도록 하면 js 로 작성된 라이브러리는 any 타입으로 추론 되므로 에러가 발생
  • 이때, TS 는 d.ts 파일을 먼저 검색하여 타입 검사를 진행하는 점을 이용 타입을 전달하여 문제를 해결
  • 기존 npm 으로 설치하던 @types/react 등이 해당 작업을 하던 모듈

타입스크립티로 작성된 라이브러리

  • TS 로 작성된 라이브러리도 JS 와 d.ts 파일로 배포

자바스크립 어딘가에 전역 변수가 정의되어 있음을 타입스크립트에 알릴 때

  • 앰비언트 타입 선언을 사용하여 해결
declare global {
  interface Window {
    deviceId: string | undefined;
    appVersion: string;
  }
}

12.1.2 앰비언트 타입 선언 시 주의점

타입 스크립트로 만든 라이브러리에는 불필요

  • tsconfig.json 의 declaration 옵션으로 자동 d.ts 가 생성되므로 따로 작성은 불필요

전역으로 타입을 정의하여 사용할 때 주의해야 할 점

  • 전역 타입 설정 시, 서로 다른 라이브러리의 앰비언트 타입 선언 충돌이 가능하므로 조심해야 한다

12.1.3 앰비언트 타입 선언을 잘못 사용했을 때의 문제점

  • 무분별한 앰비언트 변수 선언은 어느 곳에나 영향을 주게 되므로, 타입의 관계 추적에 어려움을 야기
  • 따라서 위의 문제를 피하기 위해 d.ts 파일 내에서 앰비언트 타입을 선언하는 관례를 지키자

12.1.4 앰비언트 타입 활용하기

타입을 정의하여 임포트 없이 전역으로 공유

declare type 활용하기

  • 전역에서 사용이 가능하므로 내장 유틸리티 타입을 사용하는 것처럼 사용 가능

declare module 활용하기

declare namespace 활용하기

  • declare namespace 를 활룡하여 process.env 의 환경 변수 설정값을 손쉽게 불러와서 사용 가능

declare global 활용하기

  • JS 의 전역 변수에 사용되는 모듈이나 변수 추가 가능

declare 와 번들러의 시너지

  • 컬러 값을 전역으로 타입으로 선언하여 사용하는 경우 타입은 적용 되지만 실제 데이터가 없어서 런타임 에러가 발생
  • rollup 번들러의 inject 모듈로 실행 시점에 데이터를 삽입하여 편리하게 사용 가능

12.2 스크립트와 설정 파일 활용하기

12.2.1 스크립트 활용하기

실시간으로 타입을 검사하다

  • 프로젝트가 거대화 되는 경우 에디터의 타입 감지가 느려져서 타입 검사가 제대로 이루어지지 않는 경우 발생
  • yarn tsc --noEmit --incremental -w 명령어로 실시간 에러 확인이 가능

타입 커버리지 확인하기

  • npx type-coverage --detail 명령어오 타입 커버리지와 any 타입을 쓰는 변수의 위치 파악 가능

12.2.2 설정 파일 활용하기

타입스크립트 컴파일 속도 높이기

  • incremental 속성을 켜면 변경 부분만 컴파일하기 때문에 속도를 올리 수 있다

12.2.3 에디터 활용하기

  • 에디터에서 타입 임포트나 자동 완성이 안될 경우에는 타입스크립트 서버를 재실행하여 문제 해결 가능
  • ctr + shift + p 를 누르고 타입스크립트 서버를 재실행 하면 된다

** [p.354] 여기까지 읽은 독자들을 위해 감사의 의미로 꿀팁 푸는 느낌인데요 요거?? ㅋㅋㅋㅋㅋ

12.3 타입스클비트 마이그레이션

12.3.1 타입스크립트 마이그레이션의 필요성

  • 내외부 조건을 모두 고려하여 적절히 마이그레이션을 결정 할 것

12.3.2 점진적인 마이그레이션

  • 작은 부분부터 마이그레이션 하여 안정적 + 점진적으로 마이그레이션 할 것

12.3.3 마이그레이션 진행하기

12.4 모노레포

12.4.1 분산된 구조의 문제점

  • 분산된 구조는 개발 생산성을 저해하므로 하나의 프로젝트로 통합하여 관리하는 것이 좋다

12.4.2 통합할 수 있는 요소 찾기

  • 통합할 수 있는 요소를 찾아서 잘 통합하기

** [p.358] 또... 산은 산이요 물은 물이다를 시전하시는?? ㅋㅋㅋㅋ

12.4.3 공통 모듈화로 관리하기

  • 공통 기능은 모듈화를 통해 관리하면 분산 구조의 문제점을 해결 가능하다
  • 대신, 관리해야할 레포가 늘어나며 개발환경 및 CI/CD, Lint, 테스트의 복잡성은 증대

12.4.4 모노레포의 탄생

  • 여러개의 프로젝트의 하나의 레포로 통합하여 관리하는 전략

모노레포로 관리했을 때의 장점

  • 하나의 레포에서 Lint, CI/CD, 개발 환경도 통합 관리하여 중복 코드가 줄어든다
  • 기능 변화 및 의존성 추적이 쉬워진다

모노레포로 관리했을 때의 단점

  • 모노레포 자체에 대한 관리 및 권한에 대한 이슈가 발생이 가능

** [p.360] 그런데 우형 이야기가 나오는 케이스마다 + 팀마다 이렇게나 전부 다 다르게 하고 있을줄은 몰랐네요

이야기해보기이야기해보기