Angular 시니어 시스템 설계 면접

Module Federation은 런타임에 독립적으로 배포된 애플리케이션을 동적으로 로드하므로, 팀 간 완전한 독립 배포가 가능하고 버전 업데이트가 즉각 반영됩니다. 반면 Monorepo는 빌드타임 통합으로 타입 안정성과 코드 공유가 용이하지만, 전체 빌드가 필요할 수 있습니다. Module Federation은 여러 팀이 독립적으로 운영되고 배포 주기가 다른 경우 적합하며, Monorepo는 코드 일관성과 타입 안정성이 중요하고 팀 간 협업이 긴밀한 경우 유리합니다. 공통 컴포넌트는 Module Federation에서는 shared 설정으로 싱글톤 관리하고, Monorepo에서는 라이브러리로 분리하여 관리합니다. 상태 관리는 각 마이크로 앱이 독립적인 스토어를 가지되, 공유 상태는 Custom Event나 Observable 기반 이벤트 버스로 통신하는 방식을 권장합니다.

계층적 캐싱 전략으로 HTTP 캐시 헤더(Cache-Control, ETag)를 활용해 브라우저 레벨 캐싱을 먼저 적용하고, 변경이 적은 정적 데이터는 max-age를 길게 설정합니다. Angular 서비스 레벨에서는 HttpInterceptor를 통해 인메모리 캐시를 구현하되, ReplaySubject나 BehaviorSubject로 동일 요청을 공유하여 중복 호출을 방지합니다. NgRx나 Akita 같은 상태 관리 라이브러리를 사용하면 엔티티 기반 정규화로 데이터 일관성을 보장하고, selector를 통해 효율적인 데이터 접근이 가능합니다. TTL은 데이터 특성에 따라 차등 적용하며, 실시간 업데이트가 필요한 데이터는 WebSocket이나 Server-Sent Events로 푸시 받아 캐시를 무효화합니다. 무효화 전략은 태그 기반 무효화나 의존성 그래프를 활용하여, 관련된 모든 캐시를 일괄 갱신하도록 설계합니다.

우선 webpack-bundle-analyzer로 번들을 분석하여 불필요한 의존성을 제거하고, 라우트 기반 지연 로딩을 모든 feature 모듈에 적용하여 초기 번들 크기를 줄입니다. PreloadAllModules 대신 커스텀 프리로딩 전략을 구현하여, 사용자가 방문할 가능성이 높은 라우트를 우선적으로 백그라운드에서 로드합니다. 초기 렌더링 최적화를 위해 Angular Universal로 SSR을 적용하여 FCP와 LCP를 개선하고, Critical CSS를 인라인으로 포함시킵니다. OnPush 변경 감지 전략을 전역적으로 적용하고, trackBy 함수를 사용하여 불필요한 DOM 조작을 최소화합니다. 측정 지표는 Lighthouse의 FCP, LCP, TTI를 기준으로 하며, 초기 번들은 200KB 이하, TTI는 3초 이하를 목표로 설정합니다. SSR 도입 시 서버 비용과 복잡도가 증가하는 트레이드오프가 있으나, SEO와 초기 로딩 성능 개선 효과가 큽니다.