🌟 Awesome Angular

Angular 개발자를 위한 최고의 컴포넌트, 라이브러리, 도구 모음 Google이 만든 엔터프라이즈급 프론트엔드 프레임워크 생태계

🧩 핵심 라이브러리

Angular 코어

• Angular ⭐ 96k – Google의 웹 애플리케이션 프레임워크
• Angular CLI ⭐ 27k – 공식 CLI 도구
• Angular Components ⭐ 25k – 공식 UI 컴포넌트
• RxJS ⭐ 31k – 반응형 프로그래밍 라이브러리

메타프레임워크 & SSR

• Angular Universal ⭐ 4k – 서버 사이드 렌더링
• Analog ⭐ 2.5k – Angular 메타프레임워크
• Scully ⭐ 2.5k – 정적 사이트 생성기
• NgUniversal – SSR 공식 가이드

개발 도구

• Angular DevTools – Chrome 개발자 도구 확장
• Nx ⭐ 24k – 모노레포 빌드 시스템
• Angular ESLint ⭐ 1.6k – ESLint 플러그인
• Compodoc ⭐ 4k – 문서 생성 도구

🎨 UI 컴포넌트

공식 & Material

• Angular Material ⭐ 25k – Google Material Design
• Angular CDK – 컴포넌트 개발 키트
• Angular Flex Layout ⭐ 6k – 반응형 레이아웃

서드파티 UI 라이브러리

• PrimeNG ⭐ 10k – 풍부한 UI 컴포넌트
• NG-ZORRO ⭐ 9k – Ant Design for Angular
• Nebular ⭐ 8k – 커스터마이징 가능한 UI 키트
• ngx-bootstrap ⭐ 6k – Bootstrap 컴포넌트

엔터프라이즈 솔루션

• Syncfusion Angular – 80+ 컴포넌트
• Kendo UI Angular – 엔터프라이즈 그리드
• DevExtreme Angular – 데이터 시각화
• AG Grid Angular – 고성능 그리드

Tailwind CSS 통합

• Tailwind CSS – 유틸리티 퍼스트 CSS
• Angular + Tailwind 설정 – 공식 가이드
• Flowbite Angular – Tailwind 컴포넌트

🔀 상태 관리

NgRx 생태계

• NgRx Store ⭐ 8k – Redux 스타일 상태 관리
• NgRx Effects – 사이드 이펙트 관리
• NgRx Entity – 엔티티 컬렉션 관리
• NgRx Component Store – 로컬 상태 관리

대안 상태 관리

• NGXS ⭐ 3.5k – 간소화된 상태 관리
• Akita ⭐ 4k – Salesforce의 상태 관리
• RxAngular State ⭐ 2k – 반응형 상태

서버 상태

• TanStack Query Angular – 서버 상태 관리
• Apollo Angular ⭐ 1.5k – GraphQL 클라이언트

📝 폼 관리

공식 폼

• Reactive Forms – 반응형 폼 API
• Template-Driven Forms – 템플릿 기반 폼

폼 라이브러리

• Formly ⭐ 2.8k – JSON 스키마 기반 폼
• ng-dynamic-forms ⭐ 1.3k – 동적 폼

검증 라이브러리

• class-validator ⭐ 11k – 데코레이터 기반 검증

🛣️ 라우팅 & 네비게이션

공식 라우터

• Angular Router – 공식 라우팅
• Route Guards – 라우트 가드
• Lazy Loading – 지연 로딩

라우팅 도구

• ngx-quicklink – 링크 프리페칭
• ngx-page-scroll – 스크롤 네비게이션

🌐 HTTP & API

HTTP 클라이언트

• HttpClient – 공식 HTTP 클라이언트
• HttpInterceptors – 요청/응답 인터셉터

GraphQL

• URQL Angular – 경량 GraphQL 클라이언트

REST 도구

• ngx-restangular – REST API 래퍼

🧪 테스팅

유닛 테스트

• Jasmine – 테스트 프레임워크
• Karma – 테스트 러너
• Jest ⭐ 44k – JavaScript 테스팅

E2E 테스트

• Playwright ⭐ 67k – 브라우저 자동화
• Cypress ⭐ 47k – E2E 테스팅
• Protractor – Angular E2E (deprecated)

테스트 도구

• ng-mocks ⭐ 1k – 모킹 라이브러리
• Testing Library Angular – 사용자 중심 테스트

🔧 개발자 도구

CLI 도구

• Angular CLI – 공식 CLI
• Nx – 모노레포 도구
• Bit – 컴포넌트 공유

IDE 지원

• Angular Language Service – VS Code 확장
• WebStorm – Angular IDE 지원
• Angular Console – GUI for CLI

린팅 & 포매팅

• Prettier – 코드 포매터
• Stylelint – CSS 린터

📱 모바일 & 크로스플랫폼

하이브리드 앱

• Ionic Angular ⭐ 51k – 하이브리드 앱
• NativeScript Angular – 네이티브 앱
• Capacitor – 네이티브 런타임

데스크톱

• Electron Angular – 데스크톱 앱
• Tauri – Rust 기반 데스크톱

PWA

• @angular/pwa – PWA 지원
• Workbox – 서비스 워커

🌍 국제화 (i18n)

공식 i18n

• Angular i18n – 공식 국제화

i18n 라이브러리

• ngx-translate ⭐ 4.5k – 런타임 번역
• Transloco ⭐ 2k – 현대적 i18n
• angular-l10n – 로컬라이제이션

📊 데이터 시각화

차트 라이브러리

• ngx-charts ⭐ 4.3k – D3 기반 차트
• ng2-charts ⭐ 2.3k – Chart.js 래퍼
• ngx-echarts – ECharts 래퍼
• Angular Google Charts – Google Charts

데이터 테이블

• AG Grid Angular – 엔터프라이즈 그리드
• ngx-datatable ⭐ 4.6k – 데이터 테이블
• mat-table – Material 테이블

📚 학습 자료

공식 문서

• Angular.io – 공식 문서
• Angular Blog – 공식 블로그
• Angular Update Guide – 업데이트 가이드

온라인 학습

• Angular University – 프리미엄 코스
• Ultimate Courses – Todd Motto 코스
• Fireship – 빠른 학습

커뮤니티

• r/Angular – Reddit 커뮤니티
• Angular Discord – 공식 Discord
• Stack Overflow – Q&A

🆕 2025 Highlights

Angular 18+ 새 기능

• Signals: 반응형 프리미티브
• Deferrable Views: 지연 로딩 뷰
• Standalone Components: 독립 컴포넌트 기본
• Built-in Control Flow: @if, @for, @switch

성능 최적화

• Hydration: 향상된 하이드레이션
• SSG Improvements: 정적 생성 개선
• esbuild: 빠른 빌드
• Zoneless: Zone.js 없는 앱

개발자 경험

• Angular CLI Improvements: CLI 개선
• Better Error Messages: 향상된 에러 메시지
• Strict Mode Default: 기본 엄격 모드
• Automatic Migration: 자동 마이그레이션

한국 Angular 생태계

• 삼성전자: Angular 기반 서비스
• LG CNS: 엔터프라이즈 Angular 활용
• SK텔레콤: Angular 프론트엔드
• 정부 공공기관: Angular 기반 시스템

🔄 버전 마이그레이션

AngularJS → Angular

• ngUpgrade – 점진적 마이그레이션
• Migration Guide – 마이그레이션 가이드

Angular 버전 업데이트

• ng update – CLI 업데이트 명령
• Update Guide – 버전별 가이드

📋 스타터 템플릿

공식 스타터

• angular-cli new – 기본 스타터
• Angular Examples – 공식 예제

커뮤니티 스타터

• Angular Nx Starter – Nx 모노레포

콘텐츠 업데이트 요청은 요청 게시판에 써주세요