Angular 기본

개요

Angular는 구조적이고 안정적인 프레임워크로, 컴포넌트, 모듈, 디렉티브 등 다양한 개념을 사용하여 애플리케이션을 체계적으로 구성합니다. TypeScript를 기본 언어로 채택하여 정적 타입의 이점을 활용하며, 강력한 의존성 주입(Dependency Injection) 시스템을 통해 코드의 재사용성과 테스트 용이성을 높입니다.

컴포넌트

컴포넌트는 Angular 애플리케이션의 가장 기본적인 빌딩 블록입니다. 각 컴포넌트는 템플릿(HTML), 스타일(CSS), 로직(TypeScript) 세 부분으로 구성되며, UI의 일부를 담당합니다.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = '안녕하세요, Angular!';
}

모듈

모듈(Module)은 Angular 애플리케이션의 코드 구조를 조직화하는 단위입니다. NgModule 데코레이터를 사용하여 정의하며, 관련 컴포넌트, 서비스, 파이프 등을 그룹화합니다. 모든 Angular 앱은 적어도 하나의 루트 모듈(AppModule)을 가집니다.

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

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

주요 디렉티브

Angular 디렉티브는 DOM 요소에 특정 동작을 부여하는 역할을 합니다.

사용 예제

컴포넌트 템플릿 파일(.html)에서 데이터를 바인딩하는 예제입니다.

<h1>{{ title }}</h1>

<p>사용자의 이름: {{ user.name }}</p>

<button (click)="changeTitle()">제목 변경</button>

주의사항 및 팁

• Angular CLI를 사용하면 프로젝트 생성, 컴포넌트, 서비스 등 다양한 파일을 쉽게 생성할 수 있습니다.
• Angular는 단방향 데이터 흐름을 기본으로 하지만, [(ngModel)]과 같은 양방향 바인딩 문법도 제공합니다.
• 의존성 주입을 통해 서비스(Service)를 컴포넌트에 주입하여 비즈니스 로직을 분리하는 것이 Angular의 핵심 패턴입니다.