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

More Related Content

PPTX
Java calendar project(gui)(swing window)(androidapp)
PDF
Angular Seminar [한빛미디어 리얼타임 세미나]
PPTX
안드로이드 빌드 with Gradle
PDF
Google maps android v2
PDF
그레이들(Gradle)로 만드는 안드로이드 요리법
PPTX
Sencha review
PPTX
Sencha review
PDF
PWA 파헤치기
Java calendar project(gui)(swing window)(androidapp)
Angular Seminar [한빛미디어 리얼타임 세미나]
안드로이드 빌드 with Gradle
Google maps android v2
그레이들(Gradle)로 만드는 안드로이드 요리법
Sencha review
Sencha review
PWA 파헤치기

More from SangHun Lee (20)

PDF
Angular Library
PDF
Angular CodeLab 두번째
PDF
Angular CodeLab 첫번째
PDF
Chrome 69 updates
PDF
Angular Component Interaction
PDF
Chrome 68 updates
PDF
Reactive Programming with Rxjs
PDF
Angular Features and New Things
PPTX
SSG광고의 오마주_에드워드 호퍼
PDF
[IOS말고 Android] Inflation을 이용하여 부분 Activity 띄우기
PDF
Ror 4주차(루비맛보기, form 태그)
PDF
Ror 2주차(컨트롤러 생성)
PDF
루비온레일즈_01_간단한 정적인 홈페이지 제작
PDF
Basic of web ref.웹을지탱하는기술_02
PDF
Eclipse gef
PDF
Gef 정리
PDF
Eclipse rcp 정리(enabled when, contextmenu)
PDF
2015.07.01
PDF
Basic of web ref.웹을지탱하는기술_01
PDF
Html5 video
Angular Library
Angular CodeLab 두번째
Angular CodeLab 첫번째
Chrome 69 updates
Angular Component Interaction
Chrome 68 updates
Reactive Programming with Rxjs
Angular Features and New Things
SSG광고의 오마주_에드워드 호퍼
[IOS말고 Android] Inflation을 이용하여 부분 Activity 띄우기
Ror 4주차(루비맛보기, form 태그)
Ror 2주차(컨트롤러 생성)
루비온레일즈_01_간단한 정적인 홈페이지 제작
Basic of web ref.웹을지탱하는기술_02
Eclipse gef
Gef 정리
Eclipse rcp 정리(enabled when, contextmenu)
2015.07.01
Basic of web ref.웹을지탱하는기술_01
Html5 video
Ad

Angular Popular Tools

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