Angular 개요.

소개

Angular는 구글에서 개발 및 유지보수하는 인기있는 오픈 소스 JavaScript 프레임워크입니다. TypeScript를 기반으로하며 동적 웹 애플리케이션을 구축하는 데 사용됩니다. Angular는 관심사를 분리하고 재사용 가능한 컴포넌트를 촉진함으로써 단일 페이지 애플리케이션(SPA)을 개발하는 구조적이고 효율적인 방법을 제공합니다.

역사

Angular는 처음에 Misko Hevery와 Adam Abrons에 의해 2010년에 AngularJS로 출시되었습니다. 선언적인 접근 방식, 양방향 데이터 바인딩 및 의존성 주입과 같은 특징으로 인해 상당한 인기를 얻었습니다. 그러나 AngularJS에는 성능 문제와 복잡한 학습 곡선과 같은 제한 사항이 있었습니다. 이러한 도전을 극복하기 위해 Angular 팀은 프레임워크를 처음부터 다시 작성하기로 결정하였으며, 이로 인해 2016년에 Angular 2가 출시되었습니다. 이후 Angular는 정기적인 업데이트로 발전하여 가장 널리 사용되는 웹 프레임워크 중 하나가 되었습니다.

기능

1. 컴포넌트와 템플릿

Angular는 재사용 가능한 컴포넌트를 사용하여 애플리케이션을 구축하는 구성 기반 아키텍처를 따릅니다. 컴포넌트는 컴포넌트의 동작을 정의하는 TypeScript 클래스와 그 구조를 정의하는 관련 HTML 템플릿으로 구성됩니다. 컴포넌트는 기능을 캡슐화하고 입력 및 출력을 통해 서로 통신할 수 있습니다.

// 간단한 컴포넌트의 예
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `
    <h1>Hello, {{ name }}!</h1>
  `
})
export class HelloComponent {
  name = 'Angular';
}

2. 디렉티브

Angular는 추가 기능을 위해 HTML을 확장하기 위한 다양한 내장 디렉티브를 제공합니다. 디렉티브를 사용하면 DOM을 조작하고 렌더링을 제어하며 요소에 동작을 추가할 수 있습니다. 구조적 디렉티브(예: ngIf 및 ngFor)와 속성 디렉티브(예: ngStyle 및 ngClass)의 두 가지 일반적인 유형의 디렉티브가 있습니다.

<!-- ngIf 디렉티브 사용 예시 -->
<div *ngIf="isVisible">표시되는 내용</div>

3. 데이터 바인딩

Angular는 강력한 데이터 바인딩 기능을 제공하여 컴포넌트와 템플릿 간의 데이터를 쉽게 동기화할 수 있습니다. Angular에서는 다음과 같이 4가지 유형의 데이터 바인딩이 있습니다.

• 보간법({{ }})은 컴포넌트에서 템플릿으로의 단방향 바인딩을 위해 사용됩니다.
• 프로퍼티 바인딩([ ])은 컴포넌트에서 템플릿으로의 단방향 바인딩을 위해 사용됩니다.
• 이벤트 바인딩(( ))은 템플릿에서 컴포넌트로의 단방향 바인딩을 위해 사용됩니다.
• 양방향 바인딩([( )])은 컴포넌트와 템플릿 간의 양방향 바인딩을 위해 사용됩니다.

<!-- 보간법과 이벤트 바인딩 사용 예시 -->
<p>{{ message }}</p>
<button (click)="showAlert()">클릭</button>

4. 의존성 주입

Angular에는 컴포넌트 간의 의존성 관리를 간소화하는 내장된 의존성 주입(DI) 시스템이 있습니다. DI를 사용하면 컴포넌트의 생성자에서 의존성을 선언할 수 있으며, Angular는 필요한 인스턴스를 자동으로 생성하고 주입합니다.

// 의존성 주입 사용 예시
import { Component, Injectable } from '@angular/core';

@Injectable()
export class DataService {
  getData(): string {
    return 'Some data';
  }
}

@Component({
  selector: 'app-example',
  template: `
    <p>{{ data }}</p>
  `,
})
export class ExampleComponent {
  constructor(private dataService: DataService) {}
  
  data: string;

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

5. 라우팅

Angular는 강력한 라우팅 모듈을 제공하여 탐색을 처리하고 단일 페이지 애플리케이션을 생성할 수 있습니다. Angular의 라우터를 사용하면 라우트를 정의하고 컴포넌트와 연결하며 다른 뷰 간에 탐색할 수 있습니다.

// 경로 구성 예시
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

예제

예제 1: Hello World

다음은 "Hello, World!" 메시지를 표시하는 간단한 Angular 컴포넌트의 예입니다.

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `
    <h1>Hello, World!</h1>
  `
})
export class HelloComponent { }

예제 2: 할 일 목록

이 예제에서는 항목을 추가하고 제거할 수 있는 간단한 할 일 목록 컴포넌트를 만듭니다.

import { Component } from '@angular/core';

@Component({
  selector: 'app-todo-list',
  template: `
    <h2>할 일 목록</h2>
    <input [(ngModel)]="newItem" placeholder="새 항목">
    <button (click)="addItem()">추가</button>
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
  `
})
export class TodoListComponent {
  newItem: string;
  items: string[] = [];

  addItem() {
    if (this.newItem) {
      this.items.push(this.newItem);
      this.newItem = '';
    }
  }
}

Angular에 대해 더 자세히 알아보고 다양한 기능을 탐색하려면 공식 Angular 웹사이트를 방문해보세요.