Angular 프로젝트를 개발할 때 유용하고 자주 쓰이는 몇가지 도구를 소개한다.
- Angury: Angular 앱 개발에 쓰이는 브라우저 Extension용 프로파일링 도구
- Compodoc: Angular 도큐먼트 생성 도구
- Webpack Bundle Analyzer: 웹팩 번들링 결과 파일의 사이즈 시각화 도구
- Angular Console: Angular CLI 기능을 GUI(웹)에서 수행할 수 있는 도구
- Angular Language Service: 개발도구에서 템플릿 자동 완성, 에러 및 힌트 등 코드 어시스턴트 도구
Angury
Angury는 Angular 애플리케이션의 디버깅과 프로파일링을 위한 도구이다. 구글 크롬과 모질라 파이어폭스 브라우저의 Extension으로 사용할 수 있다.
또한 컴포넌트 트리, 라우터 트리, 시각적 디버깅 도구 등을 통해 프로젝트를 시각화하여 개발자가 분석하기 쉽도록 한다. 따라서 애플리케이션 구조, 변경 감지, 퍼포먼스등을 즉각적으로 파악할 수 있다.
Compodoc
Angular 프로젝트의 도큐먼트를 생성해주는 도구이다. 생성된 도큐먼트를 제공한다면 Angular 어플리케이션이나 라이브러리의 기능 및 구조를 가장 쉽고 빠르게 이해시킬 수 있을 것이다.
기능으로는 모듈, 서비스, 클래스, 컴포넌트 등에 대한 명세와 구조를 시각화 해준다. 또한 단위 테스트 결과와 커버리지도 확인할 수 있다. 이것들을 빠르게 파악하기 위해 검색도 가능하고 메인화면에는 대시보드를 통해 전체 구조를 확인할 수 있다.
Webpack Bundle Analyzer
확대/축소가 가능한 트리 맵으로 Webpack의 번들 결과 파일의 사이즈를 시각화해준다. Angular 프로젝트를 번들링했을 때 어떤 모듈/라이브러리가 사이즈를 차지하는 지 한눈에 파악할 수 있으며 최적화에도 도움을 준다.
Angular Console
까다롭고 복잡 할 수 있는 Angular CLI의 기능을 터미널이 아닌 GUI(웹) 상에서 비교적 쉽게 수행할 수 있으며 Angular 프로젝트의 전체적인 구조를 파악하는데 도움을 준다.
Angular Language Service
개발 도구에서 Angular의 템플릿 자동완성, 에러 및 힌트를 탐색하는 코드 어시스턴트 등의 기능을 제공한다. 사실 상 Angular 애플리케이션을 개발할 시에 없어서는 안되는 존재이다. 그렇지 않다면 개발 속도는 현저히 낮아질 것이다. 지원하는 개발 도구로는 WebStrom, Sublime Text, VS Code 등 다양한 도구에서 활용할 수 있다.
