Angular @defer 완전 가이드 2026: 선언적 지연 로딩과 면접 질문
Angular @defer 블록을 활용한 선언적 지연 로딩의 작동 원리, 트리거 유형, 프리페치 전략, 점진적 하이드레이션, 면접 질문을 상세히 다룹니다.
Angular
FRONTEND
TypeScript를 주요 언어로 하여 Google이 개발한 포괄적인 프론트엔드 프레임워크입니다. 컴포넌트 기반의 모듈러 아키텍처, 네이티브 의존성 주입, 리액티브 프로그래밍을 위한 RxJS, 확장 가능하고 유지보수 가능한 웹 애플리케이션을 구축하기 위한 강력한 CLI를 제공합니다.
배울 내용
데코레이터와 고급 타입 (@Component, @Injectable)을 갖춘 엄격한 TypeScript
NgModules와 lazy loading을 갖춘 모듈러 아키텍처
providers와 scopes를 갖춘 계층적 의존성 주입
리액티브 프로그래밍을 위한 RxJS (Observables, Operators, Subjects)
강력한 템플릿 구문 (data binding, directives, pipes)
견고한 폼 (Template-driven과 유효성 검사를 갖춘 Reactive Forms)
guards, resolvers, lazy loading, preloading을 갖춘 고급 Router
interceptors, caching, 에러 처리를 갖춘 HttpClient
리액티브 상태 관리를 위한 Signals (Angular 16+)
포괄적인 테스트 (Jasmine, Karma, TestBed, mocking, Cypress E2E)
마스터해야 할 핵심 주제
이 기술을 이해하고 면접에서 성공하기 위한 가장 중요한 개념
1
TypeScript: decorators, 고급 타입, interfaces, generics
2
컴포넌트: templates, styles, lifecycle hooks, ViewChild, ContentChild
3
데이터 바인딩: interpolation, property binding, event binding, two-way binding
4
Directives: structural (*ngIf, *ngFor, *ngSwitch), attribute (ngClass, ngStyle), custom
5
Pipes: built-in (date, async, json), 사용자 정의 pipes, pure vs impure
6
서비스와 의존성 주입: providers, 계층적 DI, injection tokens
7
RxJS: Observables, Operators (map, filter, switchMap, mergeMap), Subjects, unsubscribe
8
폼: Template-driven vs Reactive, FormControl, FormGroup, validators, async validators
9
라우팅: routes, RouterLink, RouterOutlet, guards (CanActivate, CanDeactivate), resolvers
10
HttpClient: GET/POST/PUT/DELETE, interceptors, 에러 처리, retry logic
11
Change Detection: strategies (Default, OnPush), zones, 수동 트리거
12
NgModules: imports, exports, declarations, providers, lazy loading
13
Signals: signal(), computed(), effect(), 리액티브 상태 (Angular 16+)
14
상태 관리: BehaviorSubject를 활용한 Services, NgRx (Store, Effects, Selectors)
15
테스트: 단위 테스트 (Jasmine, TestBed), 컴포넌트 테스트, service mocking, E2E
16
성능: OnPush, trackBy, lazy loading, preloading 전략, 번들 최적화
17
Angular CLI, 빌드 설정, 배포, Angular Universal을 활용한 SSR
최신 Angular 기사
Angular에 관한 최신 기사와 가이드를 확인하세요
Angular 20 Resource API 핵심 정리: httpResource, rxResource 활용법과 실전 면접 대비
Angular 20에서 도입된 Resource API의 핵심 개념을 정리합니다. httpResource와 rxResource를 활용한 시그널 기반 데이터 페칭, Zod 스키마 검증, ResourceStatus 문자열 리터럴, HttpClient 구독 패턴 마이그레이션, 그리고 실전 기술 면접 질문까지 코드 예제와 함께 상세히 다룹니다.
Angular 19 Zoneless: Zone.js 없이 구현하는 성능과 변경 감지
Angular의 zoneless 변경 감지는 Zone.js를 완전히 제거하여 더 작은 번들 크기, 빠른 렌더링, 그리고 시그널을 통한 명시적 반응성을 제공합니다. 이 심층 가이드는 Angular 19의 provideExperimentalZonelessChangeDetection부터 Angular 20+ 안정화 API까지 Zone.js에서 zoneless Angular로의 마이그레이션 경로를 다룹니다.