Monkeykim's blog

Angular에서 Renderer2와 ApplicationRef를 활용해 화면에 동적으로 생성되는 사이드바와 팝업 모드를 전환할 수 있는 기능을 구현해 보겠습니다. 이번 글에서는 사용자가 사이드바를 열고 닫을 수 있으며, 사이드바를 드래그하여 팝업 모드로 전환하거나 다시 사이드바로 돌아가는 방법을 다룹니다. 이를 통해 Angular의 커스텀 디렉티브와 DOM 조작을 효과적으로 사용하는 방법을 알아보겠습니다.구현 목표사이드바 열기와 닫기: 클릭 시 사이드바가 화면 오른쪽에서 열리고, 다시 클릭하면 닫히도록 합니다.팝업 전환: 드래그하여 화면 중간으로 이동하면 사이드바가 팝업 모드로 전환되도록 합니다.사이드바 복귀: 팝업을 오른쪽으로 드래그해 특정 위치에 오면 다시 사이드바 모드로 돌아갑니다.주요 기술 요소..

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 요..