Angular

🌟 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 시스템