Angular Popular Tools - Angury - Compodoc - Webpack Bundle Analyzer - Angular Console - Angular Language Service

2. Angury - Angular 앱 개발에 쓰이는 브라우저 Extension
용 프로파일링 도구
Compodoc - Angular 도큐먼트 생성 도구
Webpack Bundle Analyzer - 웹팩 번들링 결과 파일의 사
이즈 시각화 도구
Angular Console - Angular CLI 기능을 GUI(웹)에서 수
행할 수 있는 도구
Angular Language Service - 개발도구에서 템플릿 자동
완성, 에러 및 힌트 등 코드 어시스턴트 도구
Angular Popular Tools

3. Angury는 Angular 애플리케이션의 디버깅과 프로파일링을 위
한 도구이다. 구글 크롬과 모질라 파이어폭스 브라우저의
Extension으로 사용할 수 있다.
또한 컴포넌트 트리, 라우터 트리, 시각적 디버깅 도구 등을 통
해 프로젝트를 시각화하여 개발자가 분석하기 쉽도록 한다. 따
라서 애플리케이션 구조, 변경 감지, 퍼포먼스등을 즉각적으로
파악할 수 있다.
Angury

4. Angury

5. Compodoc
Angular 프로젝트의 도큐먼트를 생성해주는 도구이다. 생성된
도큐먼트를 제공한다면 Angular 어플리케이션이나 라이브러리
의 기능 및 구조를 가장 쉽고 빠르게 이해시킬 수 있을 것이다.
기능으로는 모듈, 서비스, 클래스, 컴포넌트 등에 대한 명세와
구조를 시각화 해준다. 또한 단위 테스트 결과와 커버리지도 확
인할 수 있다. 이것들을 빠르게 파악하기 위해 검색도 가능하고
메인화면에는 대시보드를 통해 전체 구조를 확인할 수 있다.

6. Compodoc

7. Compodoc

8. Webpack Bundle Analzer
확대/축소가 가능한 트리 맵으로 Webpack의 번들 결
과 파일의 사이즈를 시각화해준다.
Angular 프로젝트를 번들링했을 때 어떤 모듈/라이브
러리가 사이즈를 차지하는 지 한눈에 파악할 수 있으며
최적화에도 도움을 준다.

9. Webpack Bundle Analzer

10. Angular Console
까다롭고 복잡 할 수 있는 Angular CLI의 기능을 터
미널이 아닌 GUI(웹) 상에서 비교적 쉽게 수행할 수
있으며 Angular 프로젝트의 전체적인 구조를 파악하
는데 도움을 준다.
https://vimeo.com/284057890

11. Angular Language Service
개발 도구에서 Angular의 템플릿 자동완성, 에러 및 힌트를 탐색하
는 코드 어시스턴트 등의 기능을 제공한다.
사실 상 Angular 애플리케이션을 개발할 시에 없어서는 안되는 존
재이다. 그렇지 않다면 개발 속도는 현저히 낮아질 것이다.
지원하는 개발 도구로는 WebStrom, Sublime Text, VS Code 등
다양한 도구에서 활용할 수 있다.