code를 헤엄치는 인어공쭈

https://angular-maps.com/ Angular Google Maps Components angular-maps.com위에서 많은 참고 바람 네이버 지도를 사용하다가 해외 지도가 필요해서 구글맵도 사용하게되었다.네이버 지도 사용방법은 다음시간에 한번 다뤄보겠다. 네이버 지도는 해외 지도를 제공안한다고 한다. 처음엔 뭔가 되는것 같아 보였는데 버그가 하도 많아서 됐다 안됐다 하는거 보고 찾아보고 문의도 해보니깐 지원을 안한다는 날벼락 같은 소리..! 왜 그걸 못봤지...  구글맵은 이전에도 사용해본 경험이 있어서 적용하는데 크게 어렵진 않았다. 사실 apiKey 만 발급받으면 거의 끝!https://developers.google.com/maps/documentation/javascript/g..

* 원시값이란? 불변한값 원시값의 종류 1. 문자열(string) 2. 숫자(number) 3. 불리언(Boolean) 4. null과 undefined *객체(Object) 객체는 프로퍼티(속성)를 포함하며, 프로퍼티는 값을 가지거나 다른 객체를 참조 let person = { name: "John", age: 30, city: "New York" }; *깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy) 1. 깊은 복사(Deep Copy) 원본 객체와 복사본이 완전히 독립적으로 되도록 하는 방법 // 깊은 복사 예제 let originalObject = { name: "John", address: { city: "New York" } }; let deepCopyObject = JSON..

Introduction Angular 애플리케이션을 개발할 때, 코드의 품질과 안정성을 유지하기 위해 유닛 테스트는 중요한 부분이다. Angular에서는 Jasmine과 Jest와 같은 테스트 프레임워크를 사용하여 유닛 테스트를 작성할 수 있다. 1. Jasmine - Jasmine은 Angular에서 따로 설치할 필요 없이 기본으로 포함되어 있는 테스트 프레임워크다. - Jasmine은 BDD (Behavior-Driven Development) 스타일의 문법을 제공하여 가독성이 높은 테스트 코드 작성을 도와준다. - TestBed, async 함수, RouterTestingModule 등을 사용하여 Angular 테스트 환경을 설정할 수 있다. - Jasmine의 describe, it 함수를 사용하..

- 구글에서 개발한 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크 - 단일 페이지 애플리케이션 (SPA)을 구축하는 데 매우 적합 - TypeScript와 함께 사용 - 정적 타입 검사 및 코드 예측 등의 이점을 제공 - 현재 앵귤러는 최신 버전인 앵귤러 15까지 출시 - 양방향 / 단방향 데이터 바인딩 둘다 가능 1. 컴포넌트(Component) 컴포넌트는 애플리케이션을 구성하는 기본 단위이다. 컴포넌트는 @Component() 데코레이터가 붙는 TypeScript 클래스, HTML 템플릿, 스타일로 구성된다. 컴포넌트가 템플릿에 사용될 CSS 셀렉터를 지정. 템플릿에서 이 셀렉터에 해당되는 HTML 엘리먼트마다 컴포넌트 인스턴스가 생성. Angular가 컴포넌트 내용으로 렌더링할 HTML 템플릿을 ..

* 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 - 직렬화 가능성을 제공하고 이..