code를 헤엄치는 인어공쭈

앵귤러 개발자로써 까먹은 기본적인 개념들을 한번 정리하는 시간을 가져 보겠다. 앵귤러의 동작원리란?앵귤러 부트스트랩: 브라우저가 HTML(index.html) 파일을 로드하고 앵귤러 애플리케이션이 부트스트랩됩니다.루트 모듈 초기화: main.ts 파일에서 platformBrowserDynamic().bootstrapModule(AppModule)이 호출되어 루트 모듈(AppModule)이 부트스트랩됩니다. AppModule이 부트스트랩되면 Angular는 루트 컴포넌트(AppComponent)를 로드하고, 이를 기반으로 애플리케이션의 나머지 컴포넌트들을 초기화합니다.의존성 주입: 필요한 서비스들이 컴포넌트에 주입됩니다.라우팅 처리: URL에 맞는 컴포넌트가 선택되고 로드됩니다.템플릿 렌더링: 컴포넌트의 ..

* NgRx - Angular에서 반응형 애플리케이션을 구축하기 위한 프레임워크 로컬 상태관리에 용이함. Angular 라우터와 통합. 다양한 형태의 데이터, Entity 수집관리. State Store - Redux에서 영감을 받은 Angular 앱을 위한 RxJS 기반 글로벌 상태 관리. Effects - @ngrx/store에 대한 Model. Router Store - Angular 라우터를 @ngrx/store에 연결하기 위한 Bindings. Entity - record collections을 관리하기 위한 어댑터. ComponentStore - 로컬/컴포넌트 상태를 관리하기 위한 독립 실행형 라이브러리. Store 에 대해서 자세히 궁금하다면? Angular - ngrx in State (1..

router-store - Router를 Store 와 연결 import { StoreRouterConnectingModule, routerReducer } from '@ngrx/router-store'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, StoreModule.forRoot({ router: routerReducer, }), RouterModule.forRoot([ // routes ]), // Connects RouterModule with StoreModule, uses MinimalRouterStateSerializer by default StoreRouterConnectingMo..

주요 개념 효과는 구성 요소에서 부작용을 분리하여 상태를 선택하고 작업을 발송 RxJS를 기반으로 구현되어 있으며, Observable을 반환한다 Effects는 Store 에서 발송된 모든 작업 의 ​​observable을 수신 서비스 동기식 또는 비동기식 작업을 수행하고 새 작업을 반환 import { Injectable } from '@angular/core'; import { Actions, createEffect, ofType } from '@ngrx/effects'; import { EMPTY } from 'rxjs'; import { map, exhaustMap, catchError } from 'rxjs/operators'; import { MoviesService } from './mov..

* why use Store? 사용하는 이유? - 상태관리를 제공 언제 사용해야될까? 사용자 상호작용이 많고 여러 데이터 소스를 공유할때 외부 저장소에서 유지될때 다른소스의 작업에 영향을 받을때 단점? - 코드가 짧거나 빠른 방법은 아니다. 또한 많은 파일을 사용하게 된다. Type Safety - 아키텍처 전제에 타입스크립트를 사용해서 엄격한 형식으로 안전성이 높고 패턴 사용으로 더 높은 품질의 코드가 생성된다. Immutability and Performance - 변경할수 없는 단일 데이터 구조를 기반으로 구축되어 비교적 간단한 작업 가능 Encapsulation - 외부 리소스 사용으로 인한 부작용에서 격리시킬수 있다. Serializability - 직렬화 가능성을 제공하고 이..