Angular는 Google이 개발·유지하는 엔터프라이즈급 TypeScript 기반 프레임워크다. 2016년 AngularJS(1.x)의 완전한 재작성으로 탄생했으며, 의존성 주입, 강력한 CLI, 모듈 시스템을 내장해 대규모 애플리케이션에 적합하다.
React/Vue와 비교
| 항목 | Angular | React | Vue |
|---|
| 타입 | TypeScript 기본 | 선택적 | 선택적 |
| 번들 방식 | 완전한 프레임워크 | 라이브러리 | 프레임워크 |
| DI 시스템 | 내장 | 없음 | 없음 |
| 학습 곡선 | 가파름 | 보통 | 완만 |
| 적합 규모 | 대규모 | 모든 규모 | 소~중규모 |
기본 컴포넌트
typescript
// app.component.ts
import { Component, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule],
template: `
<h1>{{ title }}</h1>
<p>카운트: {{ count() }}</p>
<p>2배: {{ doubled() }}</p>
<button (click)="increment()">증가</button>
`
})
export class AppComponent {
title = 'Angular 앱';
count = signal(0);
doubled = computed(() => this.count() * 2);
increment() {
this.count.update(n => n + 1);
}
}
의존성 주입
typescript
// user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class UserService {
constructor(private http: HttpClient) {}
getUsers(): Observable<User[]> {
return this.http.get<User[]>('/api/users');
}
}
// 컴포넌트에서 주입
@Component({ ... })
export class UserListComponent {
users$ = inject(UserService).getUsers();
}
Angular Signals (17+)
typescript
// 새 반응성 시스템 (Zone.js 없이 세밀한 업데이트)
const price = signal(100);
const tax = signal(0.1);
const total = computed(() => price() * (1 + tax()));
effect(() => {
console.log('총 가격:', total());
});
price.set(200); // effect 자동 실행
관련 개념
