** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! 정말 코딩의 세계는 무궁무진한 것 같습니다. provider는 당연히 module에서만 import 하는 것이라고 생각했는데 component 별로 import가 가능하더군요! (lazy loading의 진수를 보여주는! 👍🏻) 구글링 하다가 좋은 영문글을 발견하여 번역해보려 합니다! STEP 01 _ 준비하기 먼저, 각 provider를 비교하기 위한 예제 코드(5개 파일)를 이해 해봅시다. SimpleService ChildComponent ParentComponent AppComponent AppModule 1. SimpleService class SimpleService { value: ..

** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! @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..