gguldiary

constructor는 ES6 클래스 문법의 표준으로 클래스에서 객체를 생성하는 시점에 호출되는 메서드 ngOnInit은 Angular가 컴포넌트를 생성할 때 호출되는 lifecycle constructor가 호출될 때는 앵귤러가 초기화 작업을 수행하기 전이므로 컴포넌트의 속성 가운데 템플릿과 바인딩한 속성이나 부모 컴포넌트로부터 전달받은 속성 등의 초기화를 보장하지 않음 constructor에는 순수하게 객체의 생성 시점에 필요한 간단한 초기화 로직만 넣는 것을 추천 (실제 로직은 수행하지 말아야함) API호출이나 그 밖에 앵귤러가 제공하는 기능은 반드시 onOnInit 호출 이후부터 이용할 수 있다. 출처: 앵귤러 첫걸음 Constructor: DI, 클래스 필드 초기화 등을 설정 ngOnInit: ..

Entity는 무엇이고 왜 사용할까? Ngrx Entity는 데이터들을 이상적인 엔티티 상태 형식(id배열과 entity map)으로 유지하는 데 도움이 되는 라이브러리이다. NgRx에서는 store에 여러 타입의 상태들을 저장하고 있다. 데이터들은 일반적으로 비지니스 데이터나 UI상태값이다. 예를 들어 Course와 Lesson 데이터를 관리한다면 { courses: [ { id: 0, description: "Angular Ngrx Course", category: 'BEGINNER', seqNo: 1 }, { id: 1, description: "Angular for Beginners", category: 'BEGINNER', seqNo: 2 }, { id: 2, description: 'Angul..

https://medium.com/geekculture/10-tricks-to-optimizing-the-performance-of-angular-app-d998d48ca634 를 해석한 글입니다. 10 Tricks to Optimizing the Performance of Angular app — Keep learning, keep building and keep growing :) medium.com 1. ChangeDetectionStrategy.OnPush Change detection은 JS와 관련 프레임워크에서 가장 기본적인 기능 중 하나이며 데이터가 변경되었을 때 DOM을 업데이트하여 변경사항을 반영하는 기능이다. 앵귤러는 Zone.js를 사용하여 각 비동기 이벤트를 monkey-patch하..

ElementRef, TemplateRef, ViewRef, ComponentRef and ViewContainerRef을 통해 dom을 조작하는 방법에 대해 알아보자 @ViewChild component/directive class 안에서 추상화에 접근하기 위해선 Angular에서 제공하는 @ViewChild, @ViewChildren이라는 DOM쿼리라는 매커니즘을 사용한다. @ViewChild는 하나, @ViewChildren은 여러개의 쿼리를 반환한다. // 기본 사용 형태 @ViewChild([reference from template], {read: [reference type]}); // example @Component({ selector: 'sample', template: ` I am s..

새로운 observable 구독하기 switchMap vs concatMap vs mergeMap vs exhaustMap switchMap: Cancles the current subscription/request and can cause race condition, use for get requests of cancelable requests like searches 새로운 Observable이 방출되면 구독중이던 Observable을 취소하고 새로운 Observable을 구독함 concatMap: Runs subscriptions/requests in order and is less performant, use for get, post and put requests when order is impo..

해당 포스팅은 https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3 를 해석하고 개인적으로 찾아본 내용을 추가한 글입니다. Angular 9으로 업데이트 되면서 가장 큰 변화는 Ivy 컴파일러를 기본 렌더링엔진으로 변경되었다. Ivy는 사이즈감소, 속도 증가, 유연성 증가에 초점을 두어 개발되었다는데, 이를 위해 모든 컴포넌트가 돔트리를 구성하는 지시자를 컴파일하는 증가형 돔을 사용하였다. Virtual DOM과 Incremental DOM에 대한 내용은 아래 두 블로그에 자세히 나와있어 링크 참조 바랍니다. https://alexband.tistory.com/58 https://blog..

Chapter 03 앵귤러 아키텍쳐 3.1 뷰를 구성하는 요소 Angular: 사용자용 애플리케이션 개발을 위한 프레임워크. HTML과 typescript로 single-page client application을 만드는 플랫폼이자 프레임워크. 사용자용 애플리케이션: 애플리케이션에 사용자와 상호작용할 UI 또는 뷰가 있음 프레임워크: 고유의 실행 방식이 있으며 일련의 정해진 규칙에 맞추어 작성된 비즈니스 로직을 관리, 실행하는 컨테이너 Ng serve 명령이 실행 중이면 앵귤러 CLI가 코드의 변경사항을 자동으로 감지하여 소스를 다시 컴파일하여 열려 있는 브라우저의 페이지를 자동으로 새로고침함 컴포넌트: 뷰에서 일어나는 모든 일을 관리함. 기능이나 공통의 관심사를 기준으로 묶어 여러 컴포넌트로 하나의 화..