앵귤러 19 인터뷰 질문 및 답변 요약 (31-60)

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *대상자**: Angular 개발자 및 인터뷰 준비자
• *난이도**: 중급~고급 (RxJS, 성능 최적화, 설계 패턴 등 기술적 개념 포함)

핵심 요약

• ng-content는 외부 HTML을 컴포넌트 템플릿에 삽입하는 내용 프로젝션 기능.
• BehaviorSubject는 최신 값을 구독자에게 전달하는 RxJS Subject 유형.
• ngFor는 trackBy를 사용해 성능 최적화 가능.
• OnPush 변경 감지 전략은 입력값 변경 시만 변경 감지를 수행해 성능 향상.
• 커스텀 폼 컨트롤은 ControlValueAccessor 인터페이스를 구현해 Angular 폼 API와 연결.

섹션별 세부 요약

1. **내용 프로젝션과 라우팅**

• ng-content는 외부 HTML 삽입에 사용되며, select 속성으로 여러 슬롯 생성 가능.
• RouterLink는 URL과 라우트를 바인딩하며, routerLinkActive로 활성 링크 스타일 적용.
• 지연 로딩(Lazy Loading)은 loadChildren을 통해 모듈 필요 시 로딩, 초기 로딩 시간 단축.

2. **변경 감지 및 성능 최적화**

• ngOnChanges()는 입력 속성 변경 시 호출되며, SimpleChanges 객체로 이전/현재 값 비교.
• ChangeDetectionStrategy.OnPush는 입력값 변경 또는 이벤트 발생 시만 변경 감지 수행, 불필요한 렌더링 방지.
• 트리셰이킹(Tree-shaking)은 사용되지 않은 코드 제거로 번들 크기 감소.

3. **RxJS와 폼 관리**

• HttpClient.get()은 데이터 조회, post()는 서버로 데이터 전송. HttpParams로 쿼리 파라미터 전달.
• map은 값 변환, mergeMap은 내부 Observable 병합.
• 템플릿 기반 폼은 간단한 폼에 적합, 반응형 폼(Reactive Forms)은 복잡한 폼 관리에 유리.

4. **서비스 및 의존성 주입**

• 싱글톤 서비스는 providedIn: 'root'로 생성, 전역에서 공유.
• @Injectable()은 서비스를 의존성 주입 시 사용, 의존성 주입 시 @Inject() 또는 생성자 주입 활용.
• 컴포넌트 간 통신은 @Input()/@Output() 또는 서비스를 통해 수행.

5. **템플릿 및 디렉티브**

• 파이프(Pipes)는 데이터 변환, 예: {{ date | date }}. 커스텀 파이프는 @Pipe와 PipeTransform 구현.
• ViewChild는 컴포넌트 내 요소 조회, ContentChild는 ng-content로 프로젝트된 내용 조회.
• ngModel은 양방향 데이터 바인딩을 위해 [(ngModel)]="property" 사용.

결론

• *실무 적용 팁**:

- 지연 로딩과 OnPush 전략을 활용해 앱 성능 향상.

- 커스텀 폼 컨트롤 구현 시 ControlValueAccessor 사용.

- RxJS 연산자(map, mergeMap 등)를 통해 비동기 로직 효율적으로 처리.

• *핵심**: Angular의 핵심 개념(의존성 주입, 변경 감지, RxJS)을 이해하고, 실제 코드에서 적용 방법을 숙지해야 함.