앵귤러 인터뷰 질문 30개 요약

카테고리

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

서브카테고리

웹 개발

대상자

프론트엔드 개발자 및 Angular 프레임워크에 대한 이해가 필요한 인터뷰 준비자들

난이도: 중급~고급

핵심 요약

• 앵귤러는 TypeScript 기반의 컴포넌트 기반 프레임워크로, 단일 페이지 애플리케이션(SPA) 개발에 적합
• @Component, NgModule, RxJS, Lifecycle Hook, 서비스 등 핵심 개념 이해 필수
• 템플릿 기반 폼(ngModel) vs 반응형 폼(FormControl)의 차이점, Angular CLI 활용, 라우팅 및 라우트 가드 구현 방법

섹션별 세부 요약

1. 앵귤러의 기본 개념

• 앵귤러 정의: TypeScript 기반, SPA 개발을 위한 컴포넌트 기반 프레임워크
• 컴포넌트 역할: 템플릿, 스타일, 비즈니스 로직 통합
• NgModule 목적: 컴포넌트/디렉티브/파이프/서비스 그룹화 및 앱 부트스트랩
• Angular CLI 기능: 프로젝트 생성, 컴포넌트 생성(ng generate component) 및 관리
• 데이터 바인딩: 단방향({{ }}) 및 양방향([(ngModel)]) 지원

2. 디렉티브, 파이프, 의존성 주입

• 디렉티브 종류: 구조적(ngIf, ngFor) 및 속성 디렉티브(ngClass, ngStyle)
• 커스텀 디렉티브 생성: @Directive 사용 및 HostListener/HostBinding 구현
• 파이프 역할: 데이터 변환(예: DatePipe, UpperCasePipe)
• 의존성 주입: 서비스 제공(providers 배열)을 통해 컴포넌트에 주입
• 의존성 주입 패턴: 서비스를 root 인젝터에 제공하여 싱글톤 구현

3. 라이프사이클 훅 및 서비스

• 라이프사이클 훅: ngOnInit (초기화), ngAfterViewInit (뷰 초기화 후), ngOnDestroy (소멸)
• 서비스 정의: 공유 로직/데이터를 컴포넌트 간 공유
• 서비스 싱글톤: { providedIn: 'root' } 사용
• RxJS 활용: 비동기 처리, HTTP 요청, 이벤트 처리
• async 파이프: 템플릿 내에서 Observable 자동 구독/언구독

4. 폼, 라우팅 및 보안

• 폼 유형: 템플릿 기반(ngModel) vs 반응형(FormControl/FormGroup)
• FormGroup: 다중 컨트롤 그룹화
• Angular Router: URL 기반 뷰 렌더링, 라우트 가드(CanActivate, CanDeactivate)
• 로지컬 라우팅: 필요 시 모듈 로딩(lazy loading)으로 성능 최적화
• 에러 처리: catchError 연산자 사용, throwError vs of 구분

5. 추가 개념 및 최적화

• Angular CommonModule: ngIf, ngFor, DatePipe 등 공통 디렉티브/파이프 제공
• 브라우저 모듈 vs CommonModule: 루트 모듈(BrowserModule) vs 피처 모듈(CommonModule)
• 성능 최적화: 라우팅의 lazy loading, 서비스의 싱글톤, RxJS의 async 파이프 활용

결론

앵귤러 인터뷰 준비 시 컴포넌트/모듈/라이프사이클/ RxJS 등 핵심 개념을 정리하고, 템플릿 기반 vs 반응형 폼, 라우팅/가드, 의존성 주입 예제를 구현해보는 것이 중요합니다. 또한 Angular CLI를 활용한 프로젝트 생성 및 lazy loading 적용은 실무 적용에 필수적입니다.