** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! @HostBinding 과 @HostListener 전혀 다른 directive이지만, Host라는 같은 단어가 있어 "비슷한 기능을 하는건가...?" 싶더라구요~ 정확히 정리해보려 합니다. 🤗 1. @HostListener listener 라는 단어에서 알 수 있듯이 무언가 event가 발생하는 것을 듣고 있다는 느낌이 들지 않나요?! (저만 그런가요... ㅋㅋ) 이처럼 @HostListener는 이벤트 핸들링과 관련된 디렉티브입니다. @HostListener('click', ['$event.target']) onClick(target) { console.log('click!', target)..

** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! angular 에서 DOM element 내에 CSS class 를 dynamic 하게 변경하기 위해서 ngClass 를 사용하면 됩니다. ... ngClass에는 다음과 같이 3가지 type이 사용 가능합니다. String Array Object ... ... ... 하나의 class 뿐만 아니라, 여러개의 class 명을 control 하고 싶을 때는 다음과 같이 사용할 수 있습니다. ... 추가적으로 3항 연산자 또한 사용 가능합니다. ... [References] Angular angular.io

** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! angular, react, vue 등의 SPA(Single Page Application)은 컴포넌트 간 변수 공유가 쉽지 않습니다. (물론, 방법이 있긴 있죠 ~ 예를 들어, angular의 경우에는 @Input, @Output 을 사용하는 것 등) 그래서 react 에서는 redux 등의 방법을 사용하고 있습니다. angular에도 redux와 비슷한 NGRX 가 있습니다! 그렇다면 🤗 ngrx 등이 어떻게 동작하는지 알아봅시다. 일반적으로 변수에 값을 할당한다면 한줄의 코드로 가능합니다. const temp = 'hello, world'; 하지만, ngrx의 경우에는 다음과 같은 flow..

** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! url 관련 객체는 사용할때 마다 검색해서 조각조각 알아왔었는데 전체적으로 정리해보고자 포스팅하였습니다 :) 예제 도메인) https://dongurami0502.tistory.com:8080/post?topic=window-location#references 1. Properties properties description url example hash url 상에 존재하는 anchor 값(# 이후의 값) 반환 #references host url 의 도메인과 포트 반환 dongurami0502.tistory.com:8080 hostname url의 도메인 반환 dongurami0502.tis..

** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! 개발하다 보면 event를 추가하는 것뿐 아니라 제거해야하는 경우도 필요하더라구요~ javascript에서 이벤트 전파를 중단하는 방법은 크게 4가지가 있습니다. event.proventDefault() 현재 이벤트의 기본 동작을 중단합니다. event.stopPropagation() 현재 이벤트가 상위로 전파되지 않도록 중단합니다. event.stopImmediatePropagetion() 현재 이벤트가 상위뿐 아니라 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중단합니다. (일반적으로 event.stopPropagation(), event.stopImmediatePropagation() ..