Angular 기본 설정 및 컴포넌트 사용법

Angular 기본 설정과 컴포넌트 이해하기

현대 웹 개발에서 프레임워크는 필수적인 도구로 자리 잡고 있습니다. 그중에서도 Angular는 Google에서 개발한 인기 있는 프레임워크로, 강력한 기능과 효율적인 구조로 많은 개발자들에게 사랑받고 있습니다. Angular를 시작하기 위해서는 기본적인 설정과 컴포넌트에 대한 이해가 필요합니다.

Angular 설치하기

Angular 프로젝트를 시작하려면 먼저 Angular CLI(Command Line Interface)를 설치해야 합니다. CLI는 Angular를 이용한 애플리케이션을 효율적으로 관리하고 생성할 수 있는 도구입니다. 설치를 진행하려면 다음 명령어를 실행합니다:

npm install -g @angular/cli

이 명령어를 실행하면 Angular CLI가 전역적으로 설치됩니다. 이제 Angular 애플리케이션을 생성할 준비가 완료되었습니다.

새로운 Angular 프로젝트 생성하기

Angular CLI가 설치되었다면, 다음 단계로 새로운 프로젝트를 생성할 수 있습니다. 아래 명령어를 통해 원하는 프로젝트 이름으로 애플리케이션을 생성합니다:

ng new my-angular-app

명령어 실행 시 여러 가지 질문이 나타날 수 있으며, 선택에 따라 프로젝트의 설정이 달라질 수 있습니다. 모든 설정이 완료되면 생성된 디렉터리로 이동해 아래 명령어로 애플리케이션을 실행할 수 있습니다:

cd my-angular-app
ng serve

브라우저에서 http://localhost:4200를 입력하면 기본 Angular 앱을 확인할 수 있습니다.

Angular 컴포넌트의 개념과 필요성

Angular의 핵심 개념 중 하나는 컴포넌트입니다. 컴포넌트는 Angular 애플리케이션의 UI를 구성하는 독립적인 부분으로, 서로 다른 기능을 가진 컴포넌트를 조합하여 전체 애플리케이션을 구성합니다. 이러한 컴포넌트는 재사용 가능하며, 유지보수를 쉽게 해줍니다.

컴포넌트 생성하기

Angular에서 새로운 컴포넌트를 생성할 때는 다음과 같은 명령어를 사용합니다:

ng generate component component-name

위 명령에서 component-name을 원하는 컴포넌트의 이름으로 변경하여 실행하면, 해당 이름의 컴포넌트가 생성됩니다. Angular는 자동으로 컴포넌트에 필요한 파일들을 생성하며, .ts, .html, .css 파일이 포함됩니다.

컴포넌트 구조와 파일 기능

Angular에서 생성된 컴포넌트는 기본적으로 다음과 같은 파일들로 구성됩니다:

• component-name.component.ts: 컴포넌트의 TypeScript 코드가 포함되어 있습니다. 컴포넌트의 로직과 상태를 정의합니다.
• component-name.component.html: 컴포넌트의 HTML 템플릿을 정의합니다. 화면에 표시될 내용을 설정합니다.
• component-name.component.css: 해당 컴포넌트에 적용될 스타일을 정의합니다.
• component-name.component.spec.ts: 컴포넌트에 대한 테스트를 위한 파일입니다.

이러한 구조로 인해 컴포넌트는 명확한 책임을 가지며, 각 컴포넌트 간의 독립성을 보장합니다.

컴포넌트 간 데이터 전달하기

컴포넌트 간에 데이터를 공유하는 것은 Angular에서 중요한 부분입니다. Angular는 이 과정에서 @Input()과 @Output() 데코레이터를 사용하여 데이터를 효율적으로 전달합니다.

@Input()을 사용한 데이터 전달

부모 컴포넌트가 자식 컴포넌트로 데이터를 전달할 때 @Input()을 사용합니다. 이는 자식 컴포넌트가 부모의 데이터를 받아올 수 있게 해줍니다. 예를 들어, 다음과 같이 사용할 수 있습니다:

export class ChildComponent {
 @Input() childData: string;
}

부모 컴포넌트에서 자식 컴포넌트를 호출할 때, 해당 데이터 속성을 지정하면 자식 컴포넌트에서 자동으로 데이터를 받을 수 있습니다.

@Output()을 사용한 이벤트 전달

반대로 자식 컴포넌트가 부모 컴포넌트로 이벤트를 전달할 때는 @Output()을 사용합니다. 이 경우 EventEmitter를 활용하여 특정 이벤트 발생 시 부모에게 알릴 수 있습니다:

import { Component, EventEmitter, Output } from '@angular/core';
export class ChildComponent {
 @Output() notify: EventEmitter = new EventEmitter();
 sendNotification() {
  this.notify.emit('이벤트 발생!');
 }
}

부모 컴포넌트에서 자식 컴포넌트를 사용할 때, notify 이벤트를 수신하여 적절한 처리를 수행할 수 있습니다.

결론

Angular는 강력한 기능을 제공하는 프레임워크로, 설정 및 컴포넌트를 이해하는 것이 필수적입니다. 기본적인 프로젝트 생성 방법과 컴포넌트 구조, 데이터 전달 방식을 익히면 보다 효과적으로 Angular 애플리케이션을 개발할 수 있습니다. 이러한 내용을 바탕으로 여러분의 웹 애플리케이션을 더욱 발전시키고, 실력을 향상시킬 수 있기를 바랍니다.

질문 FAQ