[JavaScript 프레임워크] 3일차: Angular 기초 이해하기

3. Angular 기초

Angular란 무엇인가?

Angular는 Google에서 개발한 프레임워크로, 강력하고 복잡한 웹 애플리케이션을 구축하는 데 사용됩니다. TypeScript를 기반으로 하며, 컴포넌트 기반의 구조와 다양한 내장 기능을 제공합니다.

Angular 설치 및 프로젝트 설정

Angular 프로젝트를 설정하기 위해, Angular CLI를 사용합니다.

1. Angular CLI 설치

npm install -g @angular/cli

 

2. 새로운 Angular 프로젝트 생성

ng new my-angular-app
cd my-angular-app

 

3. 프로젝트 폴더 구조는 다음과 같습니다.

my-angular-app/
├── e2e/
├── node_modules/
├── src/
│   ├── app/
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── ...
│   ├── assets/
│   ├── environments/
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   └── ...
├── angular.json
├── package.json
├── README.md
└── ...

 

4. 프로젝트를 실행합니다.

ng serve

 

브라우저에서 http://localhost:4200을 열면 Angular 애플리케이션이 실행됩니다.

 

Angular의 주요 개념

1. 컴포넌트

Angular 컴포넌트는 애플리케이션의 기본 빌딩 블록입니다. 컴포넌트는 템플릿, 스타일, 로직을 포함합니다.

 

컴포넌트 예제

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-angular-app';
}

 

템플릿

<!-- src/app/app.component.html -->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

 

2. 모듈

모듈은 Angular 애플리케이션의 기능 단위입니다. 모든 Angular 애플리케이션은 최소한 하나의 모듈(AppModule)을 가집니다.

// src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

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

 

3. 데이터 바인딩

Angular에서는 데이터 바인딩을 통해 템플릿과 컴포넌트 클래스 간의 데이터를 연결할 수 있습니다.

 

양방향 바인딩

<!-- src/app/app.component.html -->
<input [(ngModel)]="title">
<p>{{ title }}</p>

// src/app/app.module.ts
import { FormsModule } from '@angular/forms';

// ...

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  // ...
})
export class AppModule { }

 

4. 디렉티브

디렉티브는 DOM 요소의 동작을 추가하거나 수정할 수 있는 기능입니다.

 

ngIf 디렉티브

<!-- src/app/app.component.html -->
<p *ngIf="isVisible">This paragraph is visible.</p>
<button (click)="toggleVisibility()">Toggle Visibility</button>

// src/app/app.component.ts
export class AppComponent {
  isVisible = true;

  toggleVisibility() {
    this.isVisible = !this.isVisible;
  }
}

 

5. 서비스

서비스는 애플리케이션 로직을 컴포넌트에서 분리하여 재사용 가능하게 만드는 데 사용됩니다.

 

서비스 생성

ng generate service data

 

서비스 코드

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return ['Data 1', 'Data 2', 'Data 3'];
  }
}

 

서비스 사용

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data: string[];

  constructor(private dataService: DataService) {
    this.data = this.dataService.getData();
  }
}

<!-- src/app/app.component.html -->
<ul>
  <li *ngFor="let item of data">{{ item }}</li>
</ul>

 

Angular 개발 도구

1. Angular DevTools

Angular DevTools는 브라우저 확장 프로그램으로, Angular 애플리케이션의 디버깅과 성능 분석을 도와줍니다.

• Chrome 확장 프로그램
• Firefox 확장 프로그램

 

결론

Angular는 복잡한 웹 애플리케이션을 구축하는 데 매우 강력한 프레임워크입니다. 이번 글을 통해 Angular의 기본 개념과 설치, 프로젝트 설정 방법을 배웠습니다.

 

다음 글에서는 프로젝트 설정 및 기본 구조에 대해 알아보겠습니다. 다음 글에서 만나요!