Angular를 이용한 웹 애플리케이션 개발 기초

Angular란?

Angular는 구글에서 개발한 프론트엔드 자바스크립트 프레임워크입니다. MVC 디자인 패턴을 기반으로 하며, SPA(Single Page Application)를 구축하는 데에 매우 효과적입니다.

Angular 개발환경 구축하기

먼저, Node.js와 npm이 컴퓨터에 설치되어 있어야 합니다. 그 후, 아래와 같은 명령어를 터미널에서 입력해 Angular CLI를 설치합니다.

npm install -g @angular/cli

이제, 프로젝트를 생성할 폴더 내에 새로운 Angular 프로젝트를 생성합니다.

ng new my-app

Angular 컴포넌트 생성하기

Angular에서 UI를 디자인하기 위해서는 컴포넌트를 생성해야 합니다. 컴포넌트는 HTML, CSS/SASS, Typescript로 이루어지며, app.component.ts, app.component.html, app.component.scss 파일로 구성됩니다.

ng generate component my-component

Angular 디렉티브 사용하기

Angular 디렉티브는 HTML 요소에 추가적인 동작을 부여하기 위해 사용됩니다. 디렉티브는 @Directive 데코레이터와 함께 정의됩니다. 예시로, 아래는 하이라이트 디렉티브입니다.

import { Directive, ElementRef } from '@angular/core';
     
@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
 
  constructor(el: ElementRef) {
      el.nativeElement.style.backgroundColor = 'yellow';
  }
}

Angular 서비스 생성하기

Angular 서비스는 컴포넌트에서 중복되는 기능이나 데이터를 처리하기 위해 유용합니다. 서비스는 @Injectable 데코레이터와 함께 정의됩니다. 예시로, 아래는 유저 데이터를 가져오는 UserService입니다.

import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root',
})
export class UserService {
  private users: string[] = ['John', 'Jane', 'Bob'];
 
  constructor() {}
 
  public getUsers(): string[] {
    return this.users;
  }
}

이로써 Angular를 이용한 웹 앱 개발 기초에 대해 알아보았습니다.

최대 100단어 설명: 자바스크립트 프레임워크인 Angular는 SPA를 구현하는 데에 높은 생산성과 성능을 제공합니다. 컴포넌트를 이용하여 UI를 작성하고, 디렉티브를 이용하여 원하는 요소에 추가 기능을 부여할 수 있으며, 서비스는 컴포넌트에서 중복되는 데이터와 기능을 처리해 줍니다.