[JavaScript 문법] 45일차: Angular 기초

Angular란?

Angular는 Google에서 개발한 프레임워크로, 대규모 웹 애플리케이션을 구축하기 위해 설계되었습니다. Angular는 TypeScript를 사용하며, 컴포넌트 기반 아키텍처와 강력한 도구를 제공하여 복잡한 애플리케이션을 효율적으로 개발할 수 있게 합니다.

Angular의 주요 개념

• 모듈: 애플리케이션의 다양한 기능을 캡슐화하는 단위입니다.
• 컴포넌트: 애플리케이션의 UI를 구성하는 기본 단위입니다.
• 서비스: 비즈니스 로직을 처리하고, 데이터를 공유하는 데 사용됩니다.
• 의존성 주입(DI): 컴포넌트와 서비스 간의 의존성을 관리하는 기법입니다.

Angular 프로젝트 설정

Angular CLI(Command Line Interface)를 사용하여 Angular 프로젝트를 쉽게 설정할 수 있습니다.

예제: Angular CLI를 사용한 프로젝트 생성

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve

위 명령을 실행하면 Angular 애플리케이션이 http://localhost:4200에서 실행됩니다.

모듈과 컴포넌트

모듈과 컴포넌트는 Angular 애플리케이션의 기본 구성 요소입니다. 모듈은 애플리케이션의 기능을 캡슐화하고, 컴포넌트는 UI를 정의합니다.

예제: 모듈과 컴포넌트 정의

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>Welcome to Angular!</h1><app-hello></app-hello>',
  styles: []
})
export class AppComponent { }

// hello.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: '<p>Hello, {{name}}!</p>',
  styles: []
})
export class HelloComponent {
  name: string = 'Angular';
}

데이터 바인딩

Angular는 다양한 데이터 바인딩 방식을 제공하여 뷰와 모델 간의 동기화를 쉽게 할 수 있습니다.

인터폴레이션

인터폴레이션은 중괄호({{ }})를 사용하여 템플릿에 데이터를 바인딩합니다.

예제: 인터폴레이션

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>{{ title }}</h1>',
  styles: []
})
export class AppComponent {
  title: string = 'Angular Data Binding';
}

속성 바인딩

속성 바인딩은 대괄호([])를 사용하여 HTML 속성에 데이터를 바인딩합니다.

예제: 속성 바인딩

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<img [src]="imageUrl">',
  styles: []
})
export class AppComponent {
  imageUrl: string = 'https://angular.io/assets/images/logos/angular/angular.png';
}

이벤트 바인딩

이벤트 바인딩은 소괄호(())를 사용하여 이벤트와 이벤트 핸들러를 바인딩합니다.

예제: 이벤트 바인딩

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<button (click)="showAlert()">Click me</button>',
  styles: []
})
export class AppComponent {
  showAlert() {
    alert('Button clicked!');
  }
}

양방향 바인딩

양방향 바인딩은 [(ngModel)]을 사용하여 입력 요소와 모델 간의 데이터를 동기화합니다. 이를 위해 FormsModule을 임포트해야 합니다.

예제: 양방향 바인딩

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input [(ngModel)]="name">
    <p>Hello, {{ name }}!</p>
  `,
  styles: []
})
export class AppComponent {
  name: string = 'Angular';
}

의존성 주입(DI)

의존성 주입(DI)은 Angular에서 서비스와 컴포넌트 간의 의존성을 관리하는 핵심 기법입니다. 이를 통해 코드를 모듈화하고, 테스트 용이성을 높일 수 있습니다.

 

예제: 의존성 주입

1. 서비스 생성

// data.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return ['Data1', 'Data2', 'Data3'];
  }
}

2. 서비스 사용

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of data">{{ item }}</li>
    </ul>
  `,
  styles: []
})
export class AppComponent implements OnInit {
  data: string[];

  constructor(private dataService: DataService) {}

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

결론

Angular는 대규모 웹 애플리케이션을 구축하기 위한 강력한 프레임워크입니다. 이번 글에서는 Angular의 기본 개념, 모듈과 컴포넌트, 데이터 바인딩, 의존성 주입에 대해 배웠습니다. 다음 글에서는 React 상태 관리에 대해 알아보겠습니다.

다음 글에서 만나요!