앵귤러로 UI 개발을 하면서 개발자 도구를 켜보면 'ng-component'라는 게 자동으로 만들어져 있는 것을 발견할 수 있다. 앵귤러는 디렉티브를 통해 컴포넌트들을 렌더링 해주는데, 이때 안에다가 자동으로 라우팅 된 컴포넌트를 그려 넣는다. 다시 말해서, ng-component는 삽입되는 엘리먼트의 기본 태그 이름이다. https://www.bennadel.com/blog/3350-routable-view-components-dont-need-selectors-in-angular-4-4-4-but-they-may-be-helpful.htm Routable View Components Don't Need Selectors In Angular 4.4.4 - But They May Be Helpful Be..

NgRx(state management with actions & reducers) = RxJs(Observables) + Redux redux에서 영향을 받아 reactive한 어플리케이션을 만들 수 있도록 하는 프레임워크 즉, Redux의 상태관리 패턴을 앵귤러에도 적용시키고 동시에 RxJs를 사용하여 state의 Observable을 쉽게 가공할 수 있다. 컴포넌트에서 입력받은 값을 api통신을 거쳐 어떻게 뷰에 반영이 되는지 위의 다이아그램을 부분적으로 살펴보며 알아보자. 1. ACTION - 어플리케이션 내에 발생되는 이벤트들을 기재해놓은 곳 - 사용자 인터렉션, 네트워크 요청을 통한 외부 상호작용, API와의 통신 등 모두 action에 적혀 있음 - 따라서 어플리케이션 내에서 어떤 이벤트들이..

Angular 에서는 3종류의 directive가 있다 : 1. Componenets - template을 지니고 있는 directive (가장 흔함) 2. Structural directives - DOM 엘리먼트를 추가하거나 지우면서 DOM의 레이아웃을 바꿈 (ex. NgFor, NgIf) 3. Attribute directives - 엘리먼트, 컴포넌트, 다른 directive의 형태나 동작을 바꿈 (엘리먼트의 attribute로 사용됨) 우리는 attribute directive를 만들어 해당 directive selector로 Input/Output 이벤트를 바인딩 시킬 것이다. CLI Command : ng generate directive custom-enter import { Directi..

개발자가 component 안의 html에 등록한 template들을 화면에 보여주는 게 기본이지만, 원하는 특정 시점에서 동적으로 컴포넌트를 생성해서 화면에 변화를 줘야할 때가 있다. 특정 시점에 New Container (div) 를 만들어서 그 안에 그래프가 만들어져있는 New Component를 넣을 것이다. ApplicationRef를 사용하여 New Component를 어떻게 동적으로 생성하는지 알아보자. ApplicationRef ? A reference to an Angular application running on a page. interface ApplicationRef { componentTypes: Type[] components: ComponentRef[] isStable: Ob..

Angular의 기본 양방향 바인딩은 '[()]'으로 구현한다. 이를 ngModel이라는 디렉티브를 이용하여 아래와 같이 html과 ts를 양방향으로 묶을 수 있다. *ngModel를 사용하기 위해선 FormsModule를 import해야한다 : import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ FormsModule ] }) 그리고 html에서 input에 이런식으로 ngModel을 사용한다 : 이렇게 하면 html의 input값과 ts의 myText가 바인딩되어 input값이 바뀌면 myText값도 바뀐다. 하지만 이는 엄밀히 따지면 양방향 바인딩이 아니라 내부적으로 프로퍼티 바인딩 & 이벤트 바인딩을 사용한 것이다. 즉, [(n..

RxJS = Reactive Extensions for JavaScript RxJS is a library for composing asynchronous and event-based programs by using observable sequences. RxJS는 reactive programming에 쓰이는 라이브러리이며, observables을 사용하여 '비동기', 콜백 코드를 쉽게 만들 수 있도록 한다. Operator은 function이라고 보면 되는데, observables에 사용하여 좀 더 정교한 작업을 할 수 있게 도와준다. RxJS가 제공하는 operator은 API를 참고하면된다 (https://rxjs.dev/api) 수 많은 operator들 중에 자주 사용하는 것들은 이렇게 있다 ..