🌟 Angular란?
Angular는 Google에서 개발하고 유지보수 중인 TypeScript 기반의 프론트엔드 프레임워크입니다.
단순한 UI 라이브러리가 아니라, 전체 애플리케이션을 구축할 수 있는 완전한 솔루션을 제공합니다.
🔹 Angular는 AngularJS (v1.x) 와 구분되어야 하며,
현재 우리가 말하는 Angular는 v2 이상 버전 (2016년 이후) 을 의미합니다.
🧠 핵심 개념 요약
| 개념 | 설명 |
|---|
| 🧱 Component 기반 구조 | UI는 컴포넌트 단위로 구성되며 재사용 가능 |
| 🛠 TypeScript 사용 | 정적 타입 기반으로 코드 안정성 증가 |
| 🔄 양방향 데이터 바인딩 | 뷰와 모델 간 실시간 동기화 가능 |
| 🧩 모듈 시스템 | 앱을 논리적 단위(모듈)로 나누어 관리 |
| 🔀 강력한 라우팅 시스템 | SPA 구조에서 URL 기반 라우팅 제공 |
| 🌐 HTTPClient 내장 | 백엔드 API 호출 내장 모듈로 가능 |
| 📦 RxJS 기반의 리액티브 프로그래밍 | 비동기 데이터 흐름 제어 가능 |
| ✅ 의존성 주입(Dependency Injection) | 테스트 용이성, 확장성 향상 |
🏗 Angular 아키텍처
app/
├── app.module.ts → 루트 모듈
├── app.component.ts → 컴포넌트 클래스 (비즈니스 로직)
├── app.component.html → 템플릿 (UI 구조)
├── app.component.css → 스타일
└── service/ → 서비스 (비즈니스 로직 분리)
🔧 설치 및 프로젝트 생성
Angular는 CLI 도구를 사용하여 앱 생성 및 관리가 매우 편리합니다.
npm install -g @angular/cli # CLI 설치
ng new my-app # 새 프로젝트 생성
cd my-app
ng serve # 개발 서버 실행 (localhost:4200)
💡 간단한 예제
📁 컴포넌트 코드 (app.component.ts)
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
title = '나의 첫 번째 Angular 앱';
}
📁 템플릿 (app.component.html)
<h1>{{ title }}</h1>
<input [(ngModel)]="title">
<p>입력한 제목: {{ title }}</p>
📁 모듈 설정 (app.module.ts)
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [ AppComponent ],
imports: [ BrowserModule, FormsModule ],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
🧪 핵심 기능 요약
| 기능 | 설명 |
|---|
@Component | UI 단위 선언 |
@NgModule | 앱의 루트 및 서브 모듈 설정 |
@Injectable | 서비스 클래스 선언 |
RouterModule | 라우팅 설정 |
HttpClientModule | REST API 호출 가능 |
ngModel | 양방향 데이터 바인딩 |
*ngFor, *ngIf | 템플릿 반복 및 조건 처리 |
⚖️ Angular의 장단점
✅ 장점
- 대형 애플리케이션에 최적화된 아키텍처
- 완전한 프레임워크 (라우팅, HTTP, DI, 폼 등 다 내장)
- 타입 안정성 (TypeScript 기반)
- 강력한 커뮤니티와 Google의 지원
- 공식 CLI 툴의 높은 생산성
❌ 단점
- 진입 장벽이 높음 (러닝 커브 있음)
- 초기 로딩 속도가 느릴 수 있음
- 작은 프로젝트에는 다소 과도할 수 있음
- 코드 양이 많아질 수 있음 (보일러플레이트)
💼 Angular를 사용하는 대표 기업
- Google (Gmail, Google Cloud Console)
- Microsoft Office 웹버전
- Deutsche Bank
- Upwork
- Samsung
🧠 Angular vs React vs Vue 간단 비교
| 항목 | Angular | React | Vue |
|---|
| 구조 | 완전한 프레임워크 | UI 라이브러리 | 진입장벽 낮은 프레임워크 |
| 언어 | TypeScript | JavaScript / TS 가능 | JavaScript / TS 가능 |
| 데이터 바인딩 | 양방향 | 단방향 | 양방향 |
| 러닝 커브 | 높음 | 중간 | 낮음 |
| 기업 사용처 | Google, 삼성, Microsoft 등 | Meta, Airbnb, Netflix 등 | Alibaba, Xiaomi 등 |
📌 정리 요약
| 항목 | 설명 |
|---|
| 프레임워크명 | Angular |
| 언어 기반 | TypeScript |
| 구조 특징 | Component + Module 중심 |
| 바인딩 방식 | 양방향 데이터 바인딩 |
| 공식 도구 | Angular CLI |
| 적합 대상 | 대형 SPA, 복잡한 B2B/B2C 시스템 |
