Angular | Google TypeScript 프론트엔드 프레임워크

📖 상세 설명

Angular는 Google이 개발하고 유지보수하는 TypeScript 기반 프론트엔드 프레임워크입니다. 2016년에 완전히 재작성되어 출시된 Angular(버전 2+)는 AngularJS(1.x)와는 다른 아키텍처를 가지며, "배터리 포함" 철학으로 라우팅, HTTP 클라이언트, 폼 처리, 테스트 도구까지 모두 내장하고 있습니다.

Angular는 컴포넌트 기반 아키텍처를 채택하며, 의존성 주입(DI)과 RxJS를 핵심으로 활용합니다. 양방향 데이터 바인딩, 강력한 템플릿 문법, 그리고 Angular CLI를 통한 프로젝트 스캐폴딩이 특징입니다. 6개월 주기로 메이저 버전이 업데이트되어 최신 웹 표준을 빠르게 수용합니다.

컴포넌트는 @Component 데코레이터로 정의하고, 서비스는 @Injectable로 싱글톤으로 관리됩니다. NgModule 시스템(점진적으로 Standalone Components로 대체 중)으로 애플리케이션을 모듈화하고, Lazy Loading으로 초기 로딩 속도를 최적화할 수 있습니다.

실무에서 Angular는 대규모 엔터프라이즈 애플리케이션, 특히 금융, 의료, 정부 시스템에서 널리 사용됩니다. 강력한 타입 시스템과 일관된 구조 덕분에 대규모 팀에서 코드 품질을 유지하기 쉽고, Google의 장기 지원으로 기업들이 안심하고 선택합니다.

💻 코드 예제

// Angular 컴포넌트 예제
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

interface User {
  id: number;
  name: string;
  email: string;
}

@Component({
  selector: 'app-user-list',
  template: `
    <div class="user-list">
      <h2>사용자 목록</h2>
      <input [(ngModel)]="searchTerm" placeholder="검색..." />

      <ul *ngIf="users$ | async as users">
        <li *ngFor="let user of users | filter:searchTerm">
          {{ user.name }} - {{ user.email }}
        </li>
      </ul>

      <button (click)="loadMore()">더 보기</button>
    </div>
  `,
  styleUrls: ['./user-list.component.scss']
})
export class UserListComponent implements OnInit {
  users$: Observable<User[]>;
  searchTerm = '';

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.users$ = this.http.get<User[]>('/api/users');
  }

  loadMore() {
    // 추가 데이터 로드 로직
  }
}

🗣️ 실무에서 이렇게 말하세요

💬 회의에서

"이번 프로젝트는 대규모 팀이 참여하고, 복잡한 폼 처리와 권한 관리가 필요합니다. Angular가 적합해 보여요. TypeScript가 강제되고, 구조가 일관되어서 100명 넘는 개발자가 협업해도 코드 품질 유지가 쉽습니다."

💬 면접에서

"Angular의 핵심은 의존성 주입과 RxJS입니다. DI로 서비스를 싱글톤으로 관리하고, RxJS Observable로 비동기 데이터 스트림을 다룹니다. NgZone을 통한 변경 감지, AOT 컴파일로 런타임 성능도 최적화됩니다."

💬 코드 리뷰에서

"이 컴포넌트에서 직접 HTTP 호출하지 말고 서비스로 분리해주세요. Angular는 비즈니스 로직을 서비스에, UI 로직을 컴포넌트에 두는 게 컨벤션이에요. 테스트하기도 훨씬 쉬워집니다."

⚠️ 흔한 실수 & 주의사항

❌

Observable 구독 후 해제 안 함

ngOnDestroy에서 구독을 해제하지 않으면 메모리 누수가 발생합니다. async 파이프를 사용하거나 takeUntilDestroyed()를 활용하세요.

❌

Change Detection 무시

Default 전략 대신 OnPush를 사용하면 성능이 크게 향상됩니다. 불변 데이터 패턴과 함께 사용하세요.

✅

올바른 패턴

Standalone Components를 활용하고, 시그널(Signal)로 반응형 상태를 관리하세요. Angular 16+에서 더 간결한 코드가 가능합니다.

🔗 관련 용어

📚 더 배우기

📄 Angular 공식 문서 🎓 Angular 공식 튜토리얼 🐙 Angular GitHub 저장소