Monkeykim's blog

Shadow DOM이란?Shadow DOM은 웹 컴포넌트의 핵심 기술 중 하나로, 컴포넌트 내부의 DOM 구조와 스타일을 외부로부터 캡슐화하는 기술입니다.주요 특징스타일 격리컴포넌트 내부의 스타일이 외부 스타일에 영향을 받지 않으며, 반대로 외부 스타일도 컴포넌트 내부에 영향을 미치지 않습니다.구조 보호컴포넌트 내부 구조가 외부로부터 숨겨져 변경이나 접근이 어렵습니다.Shadow DOM의 실제 활용일반 HTML 요소와 Shadow DOM 기반 컴포넌트의 차이를 이해하기 위해, 아래 예제를 보겠습니다.버튼버튼위 코드에서 .button 클래스를 스타일링하면 첫 번째 요소에는 적용되지만, ion-button은 Shadow DOM 내부에 캡슐화되어 있어 스타일이 적용되지 않습니다.Ionic에서 Shadow D..

1. 문제 상황Ionic과 Angular를 활용한 프로젝트에서, Sidebar와 Popover를 함께 구현했을 때 Popover가 Sidebar 뒤에 렌더링되는 문제가 발생했습니다. 문제는 Popover가 제대로 동작하지 않으며, 클릭 또한 불가능하다는 것이었습니다.이 문제는 특히 ion-popover와 ion-app의 구조 및 동작 방식에 대한 이해가 부족하면 쉽게 놓칠 수 있는 부분입니다.2. 문제 원인Sidebar 디렉티브가 Angular의 동적 DOM 조작을 통해 body에 직접 추가되었고, 이로 인해 Ionic의 ion-app 컨텍스트 외부에 위치하게 되었습니다. 하지만, Ionic의 ion-popover는 기본적으로 ion-app 내부에서 동작하도록 설계되어 있습니다.이로 인해 다음과 같은 문..

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

GraphQL의 개념부터 gql 태그를 사용해 클라이언트에서 서버로 데이터를 요청하는 방식까지 단계별로 한번 알아보겠습니다.1. GraphQL이란?GraphQL은 페이스북에서 개발한 데이터 질의 언어로, 클라이언트가 필요한 데이터의 형태를 지정하여 서버로 요청하고 원하는 응답을 받을 수 있게 합니다. GraphQL은 주로 REST API의 단점을 해결하기 위해 만들어졌습니다. 기존 REST API와 달리, 클라이언트는 한 번의 요청으로 필요한 데이터만 선택해서 가져올 수 있어 데이터 효율성을 크게 높일 수 있습니다.GraphQL의 주요 개념Query: 클라이언트가 서버에 데이터를 요청하는 방식입니다. 필요한 데이터의 필드만 선택해서 요청할 수 있습니다.Mutation: 서버의 데이터를 변경하기 위한 요청..

RxJS는 Angular 개발자에게 비동기 데이터 처리의 강력한 도구를제공합니다. 특히, Angular에서 자주 사용하는 Observable과 Subject는 데이터 흐름과 상태 관리를 쉽게 해줍니다. 이번 글에서는 RxJS의 기본 개념부터 Subject의 다양한 유형과 활용 방법까지 알아보겠습니다.1. RxJS의 기본 개념RxJS는 비동기 데이터 흐름을 관리하는 라이브러리입니다. Angular에서 비동기 데이터를 다루거나 이벤트 스트림을 처리할 때 유용하게 사용됩니다.1.1 Observable (옵저버블)정의: 옵저버블은 시간 경과에 따라 발생하는 데이터 흐름을 표현하는 객체입니다.특징: 옵저버블을 구독(subscribe)하면 데이터가 방출될 때마다 값을 받을 수 있습니다.import { Observa..

Angular에서 컴포넌트 간의 데이터와 메소드를 공유하는 방법은 여러가지가 있지만, 부모 컴포넌트가 자식 컴포넌트를 제어해야 하는 상황에서는 @ViewChild 데코레이터가 가장 효율적입니다. @ViewChild를 사용하면 부모 컴포넌트가 자식 컴포넌트의 특정 속성, 메소드, 또는 DOM 요소에 접근할 수 있어 다양한 상황에서 유용하게 활용됩니다.@ViewChild란?@ViewChild는 자식 컴포넌트나 특정 DOM요소에 대한 참조를 가져와 부모 컴포넌트에서 해당 요소를 직접 제어할 수 있도록 해주는 Angular의 데코레이터입니다. 템플릿에서 자식 컴포넌트나 HTML 요소를 찾고, JS에서 이를 참조하여 다양한 작업을 수행할 수 있습니다.공식문서 ViewChild: https://angular.dev..

웹 애플리케이션을 개발하다 보면, 사용자의 선택에 따라 다른 컴포넌트를 보여줘야 하는 상황이 있습니다. 예를 들어, 사용자가 선택한 메뉴에 따라 페이지 내용이 바뀌거나, 특정 조건에 따라 다른 컴포넌트를 로딩하는 것이 필요할 때가 많습니다. Angular에서는 ngComponentOutlet과 ngSwitchCase를 사용하여 이러한 기능을 쉽게 구현할 수 있습니다.ngComponentOutlet과 ngSwitchCase란?ngComponentOutlet: 컴포넌트 클래스를 직접 참조하여 동적 컴포넌트를 로드할 수 있게 하는 Angular 디렉티브입니다. 이 디렉티브를 사용하면, 코드에서 컴포넌트를 선택하고 해당 위치에 동적으로 삽입할 수 있습니다.ngSwitchCase: 여러 옵션 중에서 조건에 맞는 ..

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

Angular는 컴포넌트 간의 상호작용을 효과적으로 관리하기 위해 다양한 생명주기 훅(Lifecycle Hook)을 제공한다. 그 중 하나가 바로 ngOnChanges()인데, 이 훅은 @Input() 속성 값이 변경될 때마다 호출되며, 컴포넌트가 부모로부터 전달받은 데이터가 변했을 때 적절한 처리를 할 수 있도록 도와준다.ngOnChanges()란?ngOnChanges()는 Angular 컴포넌트의 생명주기 훅 중 가장 먼저 실행되는 메서드이다. 이 훅은 @Input() 데코레이터로 부모 컴포넌트로부터 전달받은 값이 변경될 때마다 호출된다. 변경된 값뿐만 아니라 이전 값도 확인할 수 있어, 값이 변할 때마다 원하는 로직을 수행할 수 있다.ngOnChanges()가 호출될 때ngOnChanges()는 다..