본문 바로가기
Frontend/Angular

Angular 핵심정리

by yerin.dev 2024. 8. 19.

Google이 개발한 강력한 프론트엔드 웹 애플리케이션 프레임워크.


개요

새로운 기술/라이브러리를 공부하기에 앞서 요즘의 추세를 알아보면 큰 도움이 된다.
stackoverflow 설문을 보니 전세계적으로 Angular가 꽤나 많이 사용되고 있음을 알 수 있었다. 무려 17%! 프론트엔드 프레임워크/라이브러리 중에서는 React의 40% 다음으로 높은 퍼센티지를 기록했다. React는 정말 사랑받는 라이브러리구나..!

 

재밌는 점은 Professional Developers에게 Angular는 거의 20%를 차지하는데
Learning to Code들에게는 7% 😂... 아무래도 이제 배우기 시작하는 사람들 입장에서 Angular는 React나 Vue.js에 비해 진입 장벽이 확실히 높기 때문에 그런 것 같다. 하지만 여전히 현업에서는 꽤나 많이 쓰이고 있다는 것! (그러니 잘 배워두면 도움이 될 것이다.)
물론 이런 추세가 계속되어 새로운 개발자들이 Angular를 배우고자 하지 않는다면 장기적으로는 Angular의 미래가 어떻게 될지 알 수는 없을 것 같다.

 

그리고 나는 2024년에 Angular를 새롭게 배우게 되었다. 아직 React에 더 익숙한 사람이기 때문에 아직 뇌가 리액트 모양으로 굳어 있는 것 같기는 하지만 차근차근 Angular에 대해서 공부하고 정리하는 포스트를 올려 보고자 한다. 그렇다면 React와 비교했을 때 Angular는 어떤 특징을 가지고 있는 프레임워크일까?

 

 

React와의 비교

  1. 라이브러리/프레임워크:
    • Angular: 완전한 프레임워크
    • React: View 레이어에 초점을 맞춘 UI 라이브러리
  2. 언어:
    • Angular: TypeScript 사용
    • React: JavaScript와 JSX 사용 (TypeScript도 지원)
  3. 학습 곡선:
    • Angular: 상대적으로 가파른 학습 곡선
    • React: 비교적 완만한 학습 곡선
  4. 데이터 바인딩:
    • Angular: 양방향 데이터 바인딩 지원
    • React: 단방향 데이터 흐름
  5. 규모:
    • Angular: 대규모 엔터프라이즈 애플리케이션에 적합
    • React: 소규모부터 대규모까지 다양한 프로젝트에 유연하게 적용 가능

 

우선 React는 UI 라이브러리이기 때문에, 개발자에게 많은 선택의 자유가 있다는 장점이 있지만 동시에 적절한 라이브러리를 매번 찾아야한다는 번거로움이 있다. 반면 Angular는 완전한 프레임워크이기 때문에 이미 정해진 방식을 제공한다.
예를 들어, 폼 관리를 생각해보자. React를 사용한다면, React Hook Form을 사용할지, Formik을 사용할지 개발자가 고민하고 결정해야 한다. 반면 Angular는 Angular Forms 모듈이 이미 프레임워크에 포함되어 있기 때문에 고민없이 사용하기만 하면 된다.
이러한 선택의 자유는 동시에 Angular가 제공하는 많은 개념들을 숙지해야 한다는 압박으로 이어진다. 또한 특정한 아키텍쳐 패턴과 구조를 따라야 하기 때문에 이제 막 Angular에 입문한 사람 입장에서는 복잡하게 느껴질 수 있다.

 

 

Angular의 특징

컴포넌트 기반 아키텍쳐

  • 컴포넌트: Angular앱의 기본 구성 요소
    • HTML 템플릿, TypeScript 클래스, CSS 스타일로 구성
    • UI를 재사용 가능한 컴포넌트로 구성.
@Component({
  selector: 'app-example',
  template: '<h1>{{ title }}</h1>',
  styles: ['h1 { color: blue; }']
})
export class ExampleComponent {
  title = '예시 컴포넌트';
}

 

 

양방향 데이터 바인딩

  • 모델과 뷰 간의 자동 동기화
  • 데이터 ↔️ UI
    • 데이터 변경 시 UI가 자동으로 업데이트되고, UI 변경 시 데이터도 자동 업데이트
<input [(ngModel)]="name">
<p>Hello, {{name}}!</p>

 

 

템플릿과 디렉티브

  • 템플릿: 컴포넌트의 뷰를 정의.
  • 다양한 바인딩 방식
    • interpolation: 데이터를 텍스트로 표시 {{ }}
    • 속성 바인딩: 요소의 속성에 데이터 바인딩 [property]="value"
    • 이벤트 바인딩: 이벤트에 함수 연결 (event)="handler()"
    • 양방향 바인딩: 폼 요소와 데이터 양방향 바인딩 [(ngModel)]="property"
  • 디렉티브: DOM 요소의 동작을 변경하거나 확장(*ngIf, *ngFor)
    • 기존의 *ngFor와 *ngIf 디렉티브도 여전히 지원 되지만, Angular 17부터는 @for, @if라는 템플릿 제어 흐름 구문을 사용할 수 있다.
<div *ngIf="isVisible">
  <h2>{{title}}</h2>
  <button (click)="onClick()">Click me</button>
  <ul>
    <li *ngFor="let item of items">{{item}}</li>
  </ul>
</div>

 

 

서비스와 의존성 주입(Dependency Injection, DI)

  • 서비스: 앱 전반에 걸쳐 사용되는 재사용 가능한 기능 제공
  • 의존성 주입: 컴포넌트와 서비스 간의 느슨한 결합 제공
@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() { return ['item1', 'item2', 'item3']; }
}

@Component({...})
export class ExampleComponent {
  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.items = this.dataService.getData();
  }
}

 

 

  • @Injectable() 데코레이터로 주입할 서비스 클래스 앞에 붙여서 다른 컴포넌트나 서비스의 생성자에 주입되어 사용할 수 있다.
    • constructor(private dataService: DataService) { }: Example 컴포넌트에 주입.
  • Angular의 의존성 주입 시스템(DI)가 이 클래스의 인스턴스를 생성하고 관리할 수 있게 한다.
  • providedIn: 'root'는 이 서비스가 앱 전체에서 싱글톤으로 제공됨을 의미.

 

 

RxJS

  • 비동기 프로그래밍과 이벤트 처리를 위한 도구
  • Observable을 사용하여 데이터 스트림 처리
    더 자세한 내용은 [[RxJS와 반응형 프로그래밍]]에서 확인할 수 있음.

 

 

CLI 도구

  • 프로젝트 생성, 개발, 테스트, 배포를 위한 커맨드라인 인터페이스
  • 명령어로 새 프로젝트, 컴포넌트, 서비스 등을 쉽게 생성할 수 있다.
ng new project-name // 새 앵귤러 프로젝트 생성
ng generate component my-comp // 컴포넌트 생성
ng g c my-comp2 // 컴포넌트 생성
ng serve // 로컬 개발 서버 시작

 

  • 이 외에도 다양한 명령어는 공식문서에서 확인해 볼 수 있다.모듈
  • 관련 컴포넌트, 디렉티브, 파이프, 서비스를 기능 단위로 묶는 역할.
  • 공통 imports, providers, components, declarations 등을 정의할 수 있다.
    • 재사용 가능한 기능을 별도의 모듈로 만들어 여러 앱에서 공유할 수 있다.
    • Lazy Loading을 통해 필요한 모듈만 로드할 수 있다.
  1. imports:
    • 다른 모듈에서 export한 기능을 현재 모듈에서 사용하고자 할 때 import한다.
    • 예: BrowserModule, FormsModule, HttpClientModule 등
  2. providers:
    • 서비스나 값 제공자를 등록한다.
    • 여기에 등록된 서비스는 해당 모듈 전체에서 사용 가능한다.
  3. declarations:
    • 해당 모듈에 속한 컴포넌트, 디렉티브, 파이프를 선언한다.
    • 여기서 선언된 항목들은 해당 모듈 내에서 사용 가능한다.
  4. exports:
    • 다른 모듈에서 사용할 수 있도록 공개할 선언들을 지정한다.
    • 컴포넌트, 디렉티브, 파이프, 심지어 다른 모듈도 export 할 수 있다.
  5. bootstrap:
    • 애플리케이션의 메인 뷰(루트 컴포넌트)를 정의한다.
    • 보통 루트 모듈(AppModule)에서만 사용된다.
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

 

폼 유효성 검사

  • 내장된 폼 유효성 검사 기능
  • 템플릿 기반 폼과 리액티브 폼 두 가지 접근 방식 지원.

 

HTTP 클라이언트

  • [[HTTPClient]] 모듈을 사용하여 서버와 통신
  • Observable 기반의 API 제공
  • React에서처럼 axios, @tanstack/react-query를 사용하지 않아도 된다. 내부적으로 HttpClient와 behaviorSubject를 활용해서 캐싱, 로딩, 에러 처리를 할 수 있다.
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get('https://api.example.com/data');
  }
}

 

 

Angular의 상태관리

  • NgRx:
    • Redux 패턴을 Angular에 적용한 라이브러리.
    • 대규모 애플리케이션에서 복잡한 상태 관리에 적합.
    • Actions, Reducers, Selectors, Effects 등의 개념을 사용.
  • Signals:
    • Angular 16버전부터 도입된 새로운 반응형 프로그래밍 기능(Angular에 내장)
    • 간단하고 직관적인 API를 제공하여 쉬운 상태관리.
    • 컴포넌트 레벨의 상태 관리에 적합하며, 전역 상태 관리도 가능.

 

마무리

Angular에 대해서 어느정도 알아봤으니, 이제 RxJS와 NgRx, Signals에 대해서 글을 올릴 예정이다.

 

 

 

티스토리툴바