valleycho

- ng-container와 pipe 1. 테스트 코드 작성 2. [참고 1]의 코드 작성 후 홈페이지에서 용량 확인 → orders 모듈에 작성 후 ng-container 부분을 false로 작성하였고, 용량은 15.7KB 나온 것을 확인 할 수 있다. 그러면 ng-container ngIf의 false 부분을 true로 변경해보자. 3.ng-container의 ngIf를 true로 변경한 홈페이지 용량 확인 → 용량이 똑같다. 이는 false일 때 주석인 부분도 용량을 똑같이 차지한다는 것을 의미한다. 그러면 용량을 차지하고 있으면 로드하는 속도가 저하되는 원인이 될 수 있다. 이를 어떻게 줄일까? pipe를 이용해보자. 4. 아래의 파일 내용과 같이 작성 후 용량 확인 → 용량이 줄었다. 15.7K..

- Lazy Loading Modules 구성 비교 테스트 - 요약 - [참고 2], [참고 3]의 lazy loading 적용 전 후의 내용을 보면 [참고 2]의 적용전에는 customers 컴포넌트의 내용과 orders의 내용이 main.js의 포함이 되어서 파일용량이 352KB인 것을 확인할 수 있고, [참고 3]은 main.js는 13.4KB 이고, Customers와 Orders를 클릭했을 때 모듈을 로드해서 가져오기 때문에 용량이 차이나고 따로 분리되어있는 것을 확인할 수 있다. 첫 화면 로드시의 main.js의 파일을 불러오는데 이 파일이 큰 경우에 첫 로드 속도가 느려지는 문제가 발생하므로 lazy loading을 적용시켜 모듈을 분리하여야 첫 페이지 로딩 속도가 빨라진다.

- TrackBy 간단한 테스트 코드 작성. - app.component.ts - app.component.html [참고 1, 2] 처럼 테스트 코드를 작성 후 html 파일에서 아래 그림과 같이 Refresh items를 클릭한다. → refresh items를 클릭하면 개발자도구의 Elements의 ul li 부분이 전부 깜빡이는 것을 확인할 수 있다. 이건 렌더링을 새로 한다는 것이므로 성능상 속도를 저하시키는 원인이 될 수 있다. 그럼 어떻게 수정할까? - app.component.ts - app.component.html [참고 4, 5] 처럼 테스트 코드를 작성 후 html 파일에서 아래 그림과 같이 Refresh items를 클릭한다. → refresh items를 클릭하면 개발자도구의 E..

- OnPush 및 ChangeDetectionRef medium.com/sjk5766/angular-change-detection-%EC%84%B1%EB%8A%A5-%ED%96%A5%EC%83%81%EB%B0%A9%EB%B2%95-onpush-changedetectionref-71c9bccf0a42 Angular Change Detection 성능 향상방법 (OnPush, ChangeDetectionRef) Angular는 기본적으로 데이터가 단방향 (부모 -> 자식) 으로 흐르도록 설계되었을 거라 가정합니다. 즉 상위 컴포넌트가 변경한 데이터를 하위 컴포넌트에서는 반영만 하고 변경하지 않을 것이라 medium.com 간단 요약 Angular의 변경 감지는 제일 상위부터 하위로 발생하므로 불 필요한 성..