Angular는 Google이 유지보수하는, 웹 애플리케이션을 구축하기 위한 완전하고 의견이 강한(opinionated) 프레임워크입니다. React(UI 라이브러리)나 Vue(점진적 프레임워크)와 달리, Angular는 기본적으로 완전한 도구 모음을 제공하며 TypeScript를 중심으로 설계되었습니다.
React: UI 렌더링 — 라우터, 상태 라이브러리, HTTP 클라이언트, 폼을 직접 추가
Angular: 이 모든 것을 포함 — router, HttpClient, forms, DI, RxJS, CLI, testing
Angular는 라우팅, HTTP, 폼, dependency injection 등을 위한 공식적이고 통합된 솔루션을 제공합니다. 따라서 선택해야 할 서드파티 옵션이 적은 대신, 학습 곡선은 더 가파릅니다.
import { Component } from "@angular/core";
@Component({
selector: "app-counter",
template: `<button (click)="count = count + 1">Count: {{ count }}</button>`,
})
export class CounterComponent {
count = 0;
}
컴포넌트는 @Component decorator로 장식된 클래스이며, TypeScript decorator를 적극적으로 사용합니다. 이는 React의 함수나 Vue의 SFC와는 매우 다른 스타일입니다.
• TypeScript 우선 — Angular는 TypeScript로 작성되며 이를 전제로 함
• Decorator와 클래스 — @Component, @Injectable, @Input (OOP 스타일)
• Dependency Injection — 강력한 내장 DI 시스템 (백엔드 프레임워크처럼)
• RxJS — Observable이 핵심 (HTTP, 폼, 라우터 모두 사용)
• 의견이 강한 구조 — CLI가 일관된 아키텍처를 생성
• 양방향 바인딩 — [(ngModel)] 내장
대규모 엔터프라이즈 애플리케이션과 큰 팀은 Angular의 구조, 일관성, 그리고 모든 것이 포함된(batteries-included) 특성으로부터 이점을 얻습니다. 모두가 동일한 패턴을 따르기 때문입니다. React/Vue는 더 많은 유연성과 부드러운 시작을 제공하므로, 더 작은 앱이나 자신만의 스택을 선택하려는 팀에 적합합니다.
Angular가 완전하고, 의견이 강하며, TypeScript와 OOP 중심의 프레임워크(내장 DI, RxJS, 라우팅, CLI 포함)라는 점과, React/Vue의 더 유연한 라이브러리 스타일 접근법과의 차이를 이해하는 것은 다른 모든 Angular 개념의 틀을 잡아줍니다.
그 구조는 대규모이며 오래 유지되는 엔터프라이즈 코드베이스를 위한 Angular의 주된 장점입니다.