프론트엔드 개발 · 심화
대규모 모노레포 환경에서 TypeScript 프로젝트를 관리할 때, 빌드 성능을 최적화하고 타입 의존성을 효율적으로 관리하기 위한 `tsconfig.json` 설정 전략에 대해 설명해주세요. 특히 `project references`의 도입 배경, 동작 방식, 그리고 이를 활용하여 얻을 수 있는 이점을 구체적인 예시와 함께 설명해주세요.
힌트 · `composite`, `declarationMap`, `incremental` 등의 `tsconfig` 옵션과 `references` 배열을 사용하여 다중 프로젝트 간의 의존성을 명시하고 증분 빌드를 활성화할 수 있습니다. 이를 통해 빌드 시간 단축과 타입 검사의 효율성을 높일 수 있습니다.
모노레포tsconfig.jsonProject ReferencesIncremental Build타입 의존성
모범답안
모노레포 환경에서 TypeScript 프로젝트 빌드 성능 최적화는 중요한 과제입니다. tsconfig.json 설정을 통해 이를 효과적으로 관리할 수 있습니다.
핵심은 project references를 활용하는 것입니다. 이는 프로젝트 간 의존성을 명시적으로 선언하는 기능입니다. composite 옵션을 활성화하고, references 배열에 의존하는 프로젝트의 경로를 지정합니다.
예를 들어, ui-library가 core 라이브러리에 의존한다면, ui-library의 tsconfig.json에 core를 참조하도록 설정합니다.
{
"compilerOptions": {
"composite": true
},
"references": [{ "path": "../core" }]
}
이렇게 하면 TypeScript 컴파일러는 의존성 그래프를 이해하고, 변경된 부분만 증분 빌드하여 전체 빌드 시간을 단축할 수 있습니다. 또한, 타입 정보(.d.ts)를 공유하여 타입 검사 속도도 향상됩니다. declarationMap 옵션을 함께 사용하면 디버깅 경험도 개선할 수 있습니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 TypeScript 면접 질문
- TypeScript의 데코레이터(Decorators)는 무엇이며, 클래스, 메서드, 속성 데코레이터의 기본적인 사용 목적과 실제 애플리케이션에서 어떤 방식으로 활용될 수 있는지 예시를 들어 설명해 주세요.
- 복잡한 비동기 데이터 처리 로직에서, 특정 조건에 따라 반환 타입이 동적으로 결정되는 함수를 TypeScript로 어떻게 안전하게 모델링하고 구현할 수 있을까요? 특히, 제네릭과 조건부 타입을 활용하여 Union Type을 분해하고 재구성하는 고급 기법을 설명해주세요.
- 서드파티 라이브러리(예: `express` 또는 `lodash`)의 타입 정의가 불완전하거나, 애플리케이션 특정 요구사항에 맞춰 기존 타입을 확장해야 할 때, TypeScript에서 안전하고 모듈화된 방식으로 이를 처리하는 방법을 설명해주세요. 특히, 전역 선언 확장과 모듈 확장 간의 차이점 및 사용 시나리오를 비교하여 설명해주세요.
- 런타임에 동적으로 생성되는 데이터 스키마(예: JSON Schema)에 대해, 이를 기반으로 TypeScript 타입 추론을 수행하고 컴파일 타임에 유효성 검사를 강화하는 '타입 레벨 프로그래밍' 기법을 어떻게 적용할 수 있을까요? 특히, 타입 가드와 커스텀 유틸리티 타입을 활용하여 복잡한 데이터 구조의 안정성을 확보하는 방안을 제시해주세요.
- TypeScript의 Decorator를 활용하여 메타데이터 기반의 AOP(Aspect-Oriented Programming) 패턴을 구현할 때, 타입 안전성을 어떻게 확보할 수 있을까요? 특히 `reflect-metadata` 라이브러리와 함께 사용될 때, 컴파일 타임에 타입 정보를 활용하여 런타임에 메타데이터를 안전하게 주입하고 사용하는 방법에 대해 설명해주세요.
- 중첩된 객체 구조에서 깊은(deep) 불변성(immutability)을 강제하는 TypeScript 타입을 어떻게 설계할 수 있을까요? 특히, 재귀적 타입 정의와 Mapped Types를 조합하여 모든 속성이 `readonly`인 중첩 객체 타입을 생성하는 고급 기법을 설명해주세요.