전체 글302 [Angular] Life-cycle 1. ngOnChanges "Respond when Angular sets or resets data-bound input properties." 템플릿과 컴포넌트가 데이터 바인딩이 되어 있는 상태일때, 그 데이터가 변경될때 작동한다. (@Input) "This happens frequently, so any operation you perform here impacts performance significantly." ngOnChanges에서 실행되는 코드는 성능에 크게 영향을 주기때문에 주의해야 한다. "If your component has no inputs or you use it without providing any inputs, the framework will not call" 만약 데이터.. 2023. 1. 27. [Angular] ChangeDetectionStrategy & ChangeDetectorRef (추가_공식문서) https://blog.angular-university.io/how-does-angular-2-change-detection-really-work/ 1. ChangeDetectionStrategy - 데이터의 변경/업데이트/수정 내용을 감지하고 컴포넌트의 상태를 업데이트한다. @Component 데코레이터에서 사용하는 메타데이터는 다양하다. 그 중 changeDetection에 대해 알아보자. 우선 해당 프로퍼티에 대한 값으로면 @angular/core에서 제공하는 ChangeDetectionStrategy 객체만 올 수 있다. 그리고 이 객체에는 OnPush, Default 두 개의 키와 값이 들어있다. OnPush : (CheckOnce) 컴포넌트에서 실제 레퍼런스(객체 비교)가 .. 2023. 1. 20. [Angular] 앵귤러의 decorators, 데코레이터 -ing 데코레이터의 종류 Class Decorators 1. @Component : 일반 클래스를 컴포넌트화 2. @NgModule : 개발해야될 컴포넌트 종류의 파일이 여러개가 되면 해당 파일을 관리할 부모같은 역할 모듈은 컴포넌트를 관리한다. 모듈은 여러개 존재 할 수 있으며 각각의 모듈은 각각 컴포넌트를 관리 한다. 메인 모듈이 존재하며, 메인 모듈은 imports를 통해 다른 모듈을 불러와 쓸 수 있다. 모듈에서 사용할 컴포넌트는 declaration에 추가해야 된다. 메인 모듈은 먼저 동작 할 메인 컴포넌트를 가질 수 있다. (bootstrap에서 선언) @Component 데코레이터에 선언된 selector는 다른 컴포넌트에서 사용 될 수 있다. @Component 데코레이터 속성에서 selector.. 2023. 1. 20. [Material-UI] Table [1] sticky - header Angular Material Table Sticky Header Example - ItSolutionStuff.com ID {{element.id}} Name {{element.name}} Email {{element.email}} HTML 템플릿 부분 *matHeaderRowDef에 위와 같이 "stick: true"값을 할당해주면 된다. table { width: 100%; } .example-container { height: 400px; max-width: 100%; overflow: auto; 그리고 table을 감싸는 container에게 높이, overflow 값을 반드시 넣어줘야 스크롤이 생길 수 있다. [2] sticky - column Name {{.. 2023. 1. 19. [Angular] Async Pipe 공식문서에서 Async Pipe에 대해 어떻게 설명하는가? (공식문서) ①The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. ②When a new value is emitted, the async pipe marks the component to be checked for changes. ③When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks. ④When the reference of the expression changes, the asyn.. 2023. 1. 19. [RxJS] 실습 - 스마트한 키워드 검색창 만들기 링크 : https://www.yalco.kr/@rxjs/3-1/ 소개 : 사용자의 입력에 따라 AJAX 호출로 서버에서 사용자 이름을 조회하는 기능이다. 계획(initial plan) : 기능 구현을 위해 단계별로 생각해보기. 작업 전 1차적으로 구상해보고 작업 완료 후 1차에서의 계획이 그대로 실현되었는지 생각해보고 다시 정리해 보기. 단계 : ①키 이벤트(입력) → ②Ajax 호출(검색) → ③결과 하단에 출력 사용될 연산자 : mergeMap, switchMap, pluck, filter, debounceTime, distinctUntilChange ■ mergeMap const url = 'http://127.0.0.1:3000/people/quarter-error' const keyword =.. 2023. 1. 16. 이전 1 ··· 9 10 11 12 13 14 15 ··· 51 다음
