Angular의 주요 기능 중 하나는 지시어입니다. Angular 지시어는 DOM 요소에 동작을 추가할 수 있는 방법입니다. Angular는 다양한 기본 제공 지시문을 제공하며, 이 강력한 프레임워크에서 사용자 지정 지시문을 만들 수도 있습니다.
지시어란 무엇인가요?
Angular는 맞춤형 코드 구성 요소인 지시문 지침을 사용하여 HTML 구성 요소의 작동 및 시각적 표현을 조절합니다. 이러한 지시문을 사용하면 이벤트 핸들러를 통합하고, 문서 객체 모델(DOM)을 수정하고, 요소를 표시하거나 숨길 수 있습니다.
Angular는 구조 지시문과 속성 지시문이라는 두 가지 기본 범주의 고유 지시문을 사용합니다. 전자는 문서 객체 모델(DOM)의 아키텍처를 수정하는 반면, 후자는 개별 요소와 관련된 시각적 표현 또는 기능을 조정합니다. 이러한 지시어는 Angular 컴포넌트의 기능을 보강하는 데 매우 효과적인 수단을 제공합니다.
지시문의 장점
Angular 애플리케이션 내에서 지시문을 구현할 때의 장점 중 하나는 스타일을 수정하거나 컴포넌트와의 상호 작용 시 특정 작업을 트리거하는 등 사용자 인터페이스 요소의 다양한 측면을 제어하고 조작하기 위한 명시적인 지침을 제공할 수 있다는 점입니다. 이를 통해 개발자는 컴포넌트의 뷰 로직과 템플릿 코드를 명확하게 분리하면서 개별 UI 요소의 동작과 모양을 더 높은 수준으로 제어할 수 있습니다. 또한 지시문을 사용하여 사용자 지정 기능을 캡슐화하는 새로운 태그를 도입하여 기존 HTML 구문을 확장할 수 있으므로 복잡한 UI를 구축할 때 유연성과 표현력을 높일 수 있습니다. 또한 지시문을 사용하면 개발자가 코드를 복제하거나 복잡성을 증가시키지 않고도 애플리케이션의 여러 부분에 쉽게 통합할 수 있는 모듈식 구성 요소를 만들 수 있으므로 재사용성이 향상됩니다. 전반적으로 Angular에서 지시문을 사용하면
재사용성의 이점을 통해 여러 구성 요소에서 지시문을 활용할 수 있으므로 개별적으로 반복적으로 구현할 필요가 없으므로 비용과 시간 효율성이 모두 향상됩니다.
지시어는 높은 수준의 확장성을 제공하여 개발자가 사용자 정의 구현을 통해 추가 기능을 도입하여 컴포넌트 기능을 향상시킬 수 있도록 합니다. 이 기능을 사용하면 프로젝트 내에서 특정 요구 사항이나 고유한 사용 사례를 충족하는 재사용 가능한 코드 블록을 생성할 때 적응력 있고 유연한 접근 방식을 사용할 수 있습니다.
지시문을 활용하면 개발 과정에서 상당한 적응성을 확보할 수 있으므로 특정 애플리케이션 요구 사항에 맞게 요소의 속성과 동작을 효과적으로 조작하고 사용자 정의할 수 있습니다.
Angular 애플리케이션 설정
Angular 프로젝트를 설정하기 위해 터미널에서 명령을 실행하여 Angular CLI(명령줄 인터페이스)를 설치할 수 있습니다. 설치 프로세스에는 Angular 애플리케이션을 구축하는 데 필요한 소프트웨어의 다운로드 및 설치를 시작하는 특정 문자열을 입력하는 것이 포함됩니다. 이 작업은 일반적으로 다양한 운영 체제에서 소프트웨어 패키지의 관리 및 배포를 용이하게 하는 npm 또는 yarn과 같은 패키지 관리자를 사용하여 수행됩니다. 일단 설치되면 Angular CLI는 개발자에게 새 프로젝트를 생성하고, 종속성을 관리하고, 프론트엔드 개발과 관련된 다양한 명령을 실행할 수 있는 편리한 인터페이스를 제공합니다.
npm install -g @angular/cli
Angular CLI(명령줄 인터페이스)를 사용하여 새 Angular 프로젝트를 설정하려면 터미널 또는 명령 프롬프트에서 다음 지시어를 실행합니다:
ng new custom-directives-app
앞서 설명한 명령어를 실행하면 “custom-directives-app”라는 Angular 애플리케이션이 생성됩니다.
사용자 지정 지시문 생성
Angular 프로젝트에서 사용자 지정 지시문 개발을 시작하려면 TypeScript 파일을 생성하고 그 안에 `@Directive` 데코레이터로 장식된 클래스를 지정합니다.
타입스크립트에서 `@디렉티브` 데코레이터를 활용하면 맞춤형 지시문을 개발할 수 있습니다. 따라서 `highlight`라는 사용자 지정 지시문의 인스턴스를 생성하기 위해 `src/app` 디렉터리 내에 `highlight.directive.ts` 파일을 설정하는 것이 현명합니다.
예산을 만드는 과정에는 모든 수입원과 지출원을 파악하고, 지출 우선순위를 설정하고, 재무 목표를 달성하기 위해 자원을 할당하는 작업이 포함됩니다. 이는 시간 경과에 따른 수입과 지출을 추적하고, 미래 수입에 대한 현실적인 기대치를 설정하고, 변화하는 상황이나 예상치 못한 사건에 따라 필요에 따라 예산을 조정함으로써 달성할 수 있습니다. 장기적인 재정 안정을 달성하기 위해서는 저축 목표에 대한 진행 상황을 모니터링하고 필요한 조정을 할 수 있는 시스템을 구축하는 것이 중요합니다.
import { Directive } from "@angular/core";
@Directive({
selector: "[myHighlight]",
})
export class HighlightDirective {
constructor() {}
}
위 코드 스니펫의 import 문은 @angular/core 패키지에서 Directive 데코레이터를 가져오고, 이 데코레이터는 이후 @Directive 데코레이터를 통해 HighlightDirective 클래스에 적용됩니다. 이 데코레이터는 선택자가 있는 객체로 구성된 인수를 받습니다.
이 효과를 얻으려면 “selector” 속성에 “[myHighlight]” 값을 할당합니다. 이렇게 하면 앞서 언급한 지시문을 템플릿 내의 요소에 “myHighlight” 속성을 통합하여 적용할 수 있습니다.
템플릿 구조 내에 지시문을 통합하는 방법은 아래와 같이 특정 형식을 준수하여 수행할 수 있습니다:
<main>
<p myHighlight>Some text</p>
</main>
지시문에 동작 추가하기
Angular 지시문을 사용하여 DOM(문서 객체 모델)의 조작을 효과적으로 구현하려면 먼저 지시문을 생성하고 핵심 Angular 라이브러리에서 ElementRef를 가져와야 합니다. 이를 통해 지시문에 원하는 동작을 추가하여 효율적으로 DOM을 조작할 수 있습니다.
지시어의 인스턴스화 과정에서 시각적 관점에 포함된 네이티브 컴포넌트를 포함하는 캡슐화 역할을 하는 ElementRef의 주입을 통합해야 합니다.
다음은 지시어에 동작을 더 세련된 방식으로 추가하는 예제입니다: ”’자바스크립트 ‘에서 { Directive }를 가져옵니다; @Directive({ selector: ‘[appHighlight]’, }) export class HighlightDirective { constructor(private elementRef: ElementRef) {} highlight() {} this.elementRef.nativeElement.style.boxShadow = ‘0px 2px 4px rgba(0, 0, 0, 1), 0px 2px 6px rgba(0, 0, 0, 1)’; } } “`
import { Directive, ElementRef } from "@angular/core";
@Directive({
selector: "[myHighlight]"
})
export class HighlightDirective {
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor = 'lightblue';
}
}
HighlightDirective 클래스는 생성자를 통해 Angular가 제공하는 ElementRef 객체를 활용합니다. 이 객체는 기본 HTML 요소에 대한 통로 역할을 하며 직접 조작할 수 있습니다.
`this.element.nativeElement` 속성을 활용하면 제공된 `element`와 연관된 원본 DOM 요소에 액세스할 수 있습니다. 그 후 `style` 속성을 사용하여 컴포넌트의 배경색을 하늘색으로 설정할 수 있습니다. 결과적으로 `myHighlight` 지시문을 적용하는 모든 요소는 하늘색 배경색을 표시합니다.
이 지시어를 작동하려면 app.module.ts 파일 내에 이 지시어를 통합하고 그 존재를 선언하는 것이 필수적입니다.
‘플로우’라는 개념은 헝가리계 미국인 심리학자 미하일 칙센트미하이(Mihaly Csikszentmihalyi)가 처음 도입한 개념으로, 개인이 즐거움, 집중력, 생산성을 특징으로 하는 활동에 완전히 몰입하고 흡수되는 상태라고 설명했습니다. 이러한 최적의 경험은 자신의 기술이 당면한 작업의 요구와 일치할 때 달성할 수 있으며, 만족감과 성취감으로 이어집니다.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive';
@NgModule({
declarations: [
AppComponent,
HighlightDirective,
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
이제 Angular 애플리케이션 내의 구성 요소에 myHighlight 지시문을 활용할 수 있습니다.
<main>
<p myHighlight>Some text</p>
</main>
특정 지시어가 의도한 대로 작동하는지 확인하려면 개발 환경 내에서 애플리케이션을 실행해야 할 수 있습니다. 이를 위해 명령줄 인터페이스를 활용하고 터미널 창에 적절한 명령어를 입력하는 것도 한 가지 방법입니다. 이를 통해 지정된 지시어의 기능을 테스트할 수 있습니다.
ng serve
주어진 명령을 실행하면 인터넷 브라우저에서 ”
Angular 프레임워크는 사용자가 입력 매개변수를 제공하여 HTML 요소의 시각적 속성을 수정할 수 있는 네이티브 지시문을 제공합니다. 그러나 이 기능은 사용자 지정 지시문 “myHighlight”에서는 사용할 수 없습니다. “myHighlight”를 사용하여 템플릿의 배경색을 동적으로 수정하려면 지시문이 이 목적에 맞는 값을 수신하고 활용할 수 있도록 하는 구성 옵션을 지정해야 합니다.
제공된 코드는 구어체 및 비공식적인 스타일로 작성되어 원하는 수준의 정교함에 부합하지 않습니다. 이를 개선하려면 다음 단계를 따르세요: 1. ‘highlight.directive.ts` 파일 내의 기존 코드를 다음과 같이 업데이트된 버전으로 바꿉니다: “`타입스크립트 ‘@angular/core’에서 { 지시어, 입력 }을 가져옵니다; ‘./highlight.component’에서 { HighlightDirective }를 가져옵니다; @Directive({ selector: ‘[ngClass]’ }) export class ClassHighlightDirective extends HighlightDirective { constructor(private ngClass: Input) {} } “` 이렇게 하면 Angular의 ‘[ng
import { Directive, ElementRef, Input } from "@angular/core";
@Directive({
selector: "[myHighlight]"
})
export class HighlightDirective {
@Input() set myHighlight(color: string) {
this.element.nativeElement.style.backgroundColor = color;
}
constructor(private element: ElementRef) {
}
}
HighlightDirective 클래스에는 ‘myHighlight’라는 부속 연산이 있는데, 이는 ‘문자열’ 범주의 명목화에 대한 수용성을 특징으로 합니다. 이 메서드의 구현은 `@Input` 꾸미기를 적용하여 ‘색상’이라는 용어로 표시되는 지정을 보조 구성 요소에서 지시어로 쉽게 전송할 수 있도록 합니다.
myHighlight 지시어에 매개 변수를 제공하여 요소의 배경색을 지정할 수 있습니다.
고양이는 쥐를 끈질기게 쫓았고, 쥐는 추격자를 피하기 위해 미친 듯이 뛰어다녔습니다.
<main>
<p myHighlight='pink'>Some text</p>
</main>
사용자 정의 구조 지시문 만들기
앞부분에서 설명한 기법을 사용하면 템플릿에 맞춤형 속성 지시문을 효과적으로 생성하고, 액션에 내장하고, 지정할 수 있습니다. 이러한 지시문 수정은 DOM 컴포넌트의 시각적 표현에 영향을 미치는 반면, 구조 지시문은 DOM 계층 구조 내에서 컴포넌트를 수정, 삭제 또는 재배치합니다.
Angular를 활용하면 ngFor와 ngIf라는 두 가지 필수 지시문이 제공됩니다. 이 지시문은 각기 다른 용도로 사용되며, ngFor는 배열 또는 일련의 항목 내의 모든 요소에 대한 레이아웃을 생성하는 반면, ngIf는 특정 기준에 따라 조건부로 구동되는 프레젠테이션을 관리합니다.
`ngIf` 지시문과 유사하게 작동하는 사용자 정의 구조 지시문을 Angular에서 생성하려면 먼저 “condition.directive.ts”라는 별도의 파일 내에 조건문을 설정해야 합니다. 이 지시문은 HTML 템플릿 내에서 활용되고 지정된 조건에 따라 평가될 때 의도한 대로 작동합니다.
‘root’ }) export class ConditionDirectives { private chartDefaults: Highcharts.ChartOptions = { title: { text: ‘내 차트’, style: { color: ‘#3f51b5’ } }, x축: { categories: [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’] }, yAxis: { title: { text: ‘Value’ } }, 시리즈
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'
@Directive({
selector: "[condition]"
})
export class ConditionDirective {
@Input() set condition(arg: boolean) {
if(arg) {
this.viewContainer.createEmbeddedView(this.template)
} else {
this.viewContainer.clear();
}
}
constructor(
private template: TemplateRef<unknown>,
private viewContainer: ViewContainerRef
) {}
}
요소의 조건부 렌더링은 하위 컴포넌트 내의 요소에 적용되고 평가를 위해 부모 엔티티로부터 부울 값을 수신하는 조건 지시문을 활용하여 달성할 수 있습니다.
ConditionDirective 클래스의 인스턴스화 프로세스 중에 TemplateRef 또는 ViewContainerRef에 대한 참조가 입력으로 제공됩니다. 이 TemplateRef는 해당 지시문과 관련된 특정 템플릿을 식별하는 역할을 하며, ViewContainerRef는 애플리케이션의 뷰가 렌더링되는 위치를 지정합니다.
`ConditionDirective` 클래스 내의 `setCondition` 메서드는 조건문을 사용하여 해당 인수의 값을 평가합니다. 인수가 참으로 판명되면 지정된 템플릿을 사용하여 둘러싸인 뷰를 생성하도록 지시합니다. 동시에 `ViewContainerRef` 클래스의 `createEmbeddedView` 함수는 생성된 뷰를 문서 객체 모델(DOM) 내에서 렌더링하는 작업을 수행합니다.
지정된 조건이 충족되지 않는 경우 이 명령은 ViewContainerRef 인터페이스에서 제공하는 “clear” 메서드를 사용하여 뷰 컨테이너의 내용을 제거합니다. 따라서 문서에서 이전에 표시된 모든 요소가 제거됩니다.
app.module.ts 파일 내에서 가져오기 및 선언을 통해 애플리케이션 모듈 내에 지시문을 통합하여 지시문을 통합합니다. 완료되면 원하는 템플릿 컴포넌트에서 지시문을 활용하세요.
HTML 템플릿 내에 이 기능을 통합하려면 다음 단계를 따르세요:
<main>
<p *condition="true">Hello There!!!</p>
</main>
이제 사용자 지정 지시문을 만들 수 있습니다
Angular의 사용자 지정 지시문은 문서 객체 모델(DOM)을 조작하고 템플릿 디자인에 동적 기능을 부여할 수 있는 고급 수단을 제공합니다. 이 지식을 통해 Angular 프로젝트 내에서 맞춤형 속성 및 구조 지시문을 생성하고 적용하는 데 대한 통찰력을 얻을 수 있습니다. 이러한 기술을 파악하면 Angular의 잠재력을 포괄적으로 활용할 수 있습니다.