liminfoAngular Reference
Angular 프레임워크 레퍼런스
Angular Reference 소개
Angular 레퍼런스는 Angular에서 가장 중요한 API와 패턴을 6개 카테고리로 정리한 검색 가능한 치트 시트입니다: 컴포넌트(@Component 데코레이터, @Input/@Output, 라이프사이클 훅, 템플릿 참조, 콘텐츠 프로젝션), 서비스(@Injectable, HttpClient, Observable/RxJS 연산자, Subject/BehaviorSubject), 디렉티브(*ngIf, *ngFor, [ngClass]/[ngStyle], 커스텀 디렉티브, ngSwitch), 파이프(date/currency/uppercase 같은 내장 파이프, async 파이프, 커스텀 파이프 생성), 라우팅(RouterModule 구성, ActivatedRoute 파라미터, canActivate 가드, routerLink), 폼(템플릿 기반, 반응형, FormBuilder, 커스텀 유효성 검증, 동적 필드를 위한 FormArray).
이 레퍼런스는 처음 Angular를 배우는 개발자부터 잘 쓰지 않는 API를 빠르게 찾아야 하는 시니어 엔지니어까지 모든 경험 수준의 Angular 개발자가 사용합니다. TypeScript 예제는 현재 Angular 관례를 따릅니다: 서비스는 tree-shakable 주입을 위해 providedIn: "root"를 사용하고, 반응형 폼은 유효성 검증 배열과 함께 FormGroup, FormControl을 사용하며, RxJS 예제는 debounceTime, distinctUntilChanged, switchMap, catchError를 이용한 pipe() 연산자 체인 패턴을 보여줍니다.
레퍼런스는 Angular의 자연스러운 학습 경로를 반영하도록 구성되어 있습니다. 컴포넌트가 기본 구성 요소로 가장 먼저 오고, 그 다음 비즈니스 로직을 분리하는 서비스가 이어집니다. 디렉티브와 파이프는 템플릿 언어를 확장하고, 라우팅은 멀티 뷰 애플리케이션을 가능하게 하며, 폼은 사용자 입력을 처리합니다. 각 항목은 실제 TypeScript 또는 템플릿 구문과 함께 일반적인 실제 사용 사례를 보여주는 완전한 코드 예제를 제공합니다. 예를 들어 canActivate 가드 예제는 /login으로의 리다이렉트를 포함한 전체 인증 확인 패턴을 보여줍니다.
주요 기능
- 검색 가능한 6개 카테고리: 컴포넌트, 서비스, 디렉티브, 파이프, 라우팅, 폼
- @Component와 @Input/@Output, EventEmitter, 템플릿 참조(@ViewChild), 콘텐츠 프로젝션(ng-content)
- HttpClient를 사용한 GET/POST 요청과 Observable 구독 패턴을 포함한 @Injectable 서비스
- RxJS 연산자 체인: 검색 패턴에서 debounceTime, distinctUntilChanged, switchMap, catchError
- 컴포넌트 간 상태 공유를 위한 BehaviorSubject 상태 관리 패턴
- 구조적 디렉티브: else 템플릿 포함 *ngIf, trackBy 포함 *ngFor, 기본 케이스 포함 ngSwitch
- FormGroup, FormControl, Validators, 동적 필드를 위한 FormArray, 교차 필드 커스텀 유효성 검증을 사용한 반응형 폼
- 인증 서비스 확인과 Router.navigate 리다이렉트 패턴을 사용한 canActivate 라우트 가드
자주 묻는 질문
이 레퍼런스는 어떤 Angular 카테고리를 다루나요?
6개 카테고리를 다룹니다: 컴포넌트(데코레이터, 입출력, 라이프사이클 훅, 템플릿 참조, 콘텐츠 프로젝션), 서비스(HttpClient, Observable, RxJS, BehaviorSubject), 디렉티브(*ngIf, *ngFor, ngClass, 커스텀 디렉티브, ngSwitch), 파이프(date, currency, async, 커스텀 파이프), 라우팅(라우트 구성, ActivatedRoute, canActivate 가드, routerLink), 폼(템플릿 기반, 반응형, FormBuilder, 유효성 검증, FormArray).
템플릿 기반 폼과 반응형 폼의 차이점은 무엇인가요?
템플릿 기반 폼은 NgModel과 ngForm 디렉티브를 사용해 HTML 템플릿에 폼 구조를 정의합니다. 더 단순하지만 테스트하기 어렵습니다. 반응형 폼은 TypeScript에서 FormGroup과 FormControl을 사용해 폼 모델을 정의하여 완전한 프로그래밍 제어, 쉬운 단위 테스트, FormArray를 통한 동적 폼 필드 지원을 제공합니다.
@Input과 @Output은 컴포넌트 통신에 어떻게 작동하나요?
@Input()은 부모 컴포넌트가 프로퍼티 바인딩으로 자식 컴포넌트에 데이터를 전달할 수 있게 합니다: <app-child [label]="myLabel">. EventEmitter와 함께 사용하는 @Output()은 자식이 부모에게 이벤트를 보낼 수 있게 합니다: <app-child (clicked)="handleClick()">. 이것이 Angular 표준 부모-자식 통신 패턴입니다.
async 파이프란 무엇이며 언제 사용해야 하나요?
async 파이프는 Observable이나 Promise를 구독하고 가장 최근에 방출된 값을 반환하며, 컴포넌트가 소멸될 때 자동으로 구독을 해제합니다. 수동 구독 관리와 메모리 누수를 방지하기 위해 템플릿에서 *ngIf="data$ | async as data" 또는 *ngFor="let item of items$ | async" 형태로 사용하세요.
canActivate 라우트 가드는 어떻게 작동하나요?
canActivate는 서비스가 구현하는 인터페이스입니다. canActivate() 메서드는 boolean(또는 boolean의 Observable/Promise)을 반환합니다. false를 반환하면 내비게이션이 취소됩니다. 일반적인 패턴은 인증 서비스를 확인하고 사용자가 인증되지 않은 경우 /login으로 리다이렉트한 다음, 라우트 활성화를 막기 위해 false를 반환하는 것입니다.
Subject와 BehaviorSubject의 차이점은 무엇인가요?
Subject는 방출 이후 구독한 구독자에게만 값을 방출합니다. 늦게 구독한 구독자는 이전 값을 놓칩니다. BehaviorSubject는 초기값이 필요하며 구독 즉시 가장 최근 값을 새 구독자에게 항상 방출합니다. 컴포넌트가 항상 현재 상태를 읽을 수 있으므로 상태 관리에는 BehaviorSubject가 선호됩니다.
Angular에서 커스텀 파이프를 어떻게 구현하나요?
PipeTransform을 구현하는 @Pipe({ name: "pipeName" })으로 데코레이트된 클래스를 만드세요. transform(value, ...args) 메서드가 입력값과 선택적 인수를 받아 변환된 출력을 반환합니다. 파이프를 모듈에 등록하거나 standalone으로 표시한 다음, 템플릿에서 {{ text | pipeName:arg }} 형식으로 사용합니다.
RxJS switchMap 연산자는 검색 입력에 어떻게 도움이 되나요?
switchMap은 새 값이 도착하면 이전 내부 Observable을 취소합니다. 검색 패턴에서 입력 텍스트 스트림은 debounceTime(사용자가 타이핑을 멈출 때까지 대기), distinctUntilChanged(중복 값 건너뜀), switchMap(이전 HTTP 요청을 취소하고 새 요청 시작)을 통해 파이프됩니다. 이렇게 하면 이전 응답이 이후 응답보다 늦게 도착하는 경쟁 조건을 방지합니다.