Monkeykim's blog

Angular 애플리케이션을 개발하다 보면 종종 모달이나 팝업과 같은 사용자 인터페이스 요소를 필요로 할 때가 있습니다. 오늘은 클릭 이벤트로 열고 닫을 수 있으며, 화면 중앙에 나타나고 드래그로 위치를 이동할 수 있는 팝업을 만드는 PopupDirective를 구현해보겠습니다.PopupDirective의 기본 구조먼저, PopupDirective의 구조를 살펴보겠습니다. 이 디렉티브는 @Directive 데코레이터를 통해 정의되었으며, standalone 속성을 true로 설정하여 독립적인 컴포넌트로 사용할 수 있게 합니다.@Directive({ selector: '[appPopup]', standalone: true,})export class PopupDirective { @Input('appP..

Angular를 사용하다 보면 컴포넌트 뿐만 아니라 디렉티브(Directive)라는 개념도 자주 등장하는데, 디렉티브는 HTML 요소에 새로운 동작을 추가하거나 동적으로 스타일을 변경하는 데 유용하게 사용됩니다.디렉티브(Directive)란?디렉티브(Directive)는 Angular가 HTML 요소의 동작을 확장하거나 조작할 수 있도록 하는 명령입니다. Angular 디렉티브는 크게 구조적 디렉티브(Structural Directive)와 속성 디렉티브(Attribute Directive)로 나눌 수 있습니다.구조적 디렉티브: HTML의 구조에 영향을 주는 디렉티브로, * 표시가 붙습니다. 예를 들어, *ngIf는 조건에 따라 요소를 추가하거나 삭제하는 구조적 디렉티브입니다.속성 디렉티브: HTML 요..