Angular 란?

프레임워크

• 프레임워크 vs 라이브러리
  • 강제성 ↑ vs 자유도 ↑
  • 규모 ↑ vs 규모 ↓
  • 공부할게 많음 vs 공부할게 적음
  • angular vs react
  • 자동차에 뼈대 vs 자동차 기능(like 헤드라이트)

왜 Angular를 쓸까?

• 기존에 방식 - DOM API 기반 애플리케이션
  • js가 주도적으로 html/css를 주무른다.
  • 필요한 것 가져와서 업애고 바꾸고 추가하고
  • html/css 구조를 파악하고 했다. => js가 html/css에게 의존하고 있다.
    • 의존 당하는애가 바뀌면 의존 하는애도 바뀌게 되어있다.
    • 그래서 요즘 jQuery를 안쓰고 있다.
• Angular 방식
  • html/css가 js를 바라보는 방식
  • html/css가 js가 되어야 한다.(문자열 상태, 하나의 값)
  • html/css가 어떠한 상태 데이터를 보겠다. 라고 하고 js에서는 그 상태데이터를 변경하면 알아서 바뀜
  • 결국 html/css가 랜더 함수

Angular 소개

• AngularJS는 2009년 구글의 미스코 헤브리(Miško Hevery)가 시작한 개인 프로젝트로 시작
• 2012년 AngularJS 1.0 공개
• 2016년 9월 14일 Angular 2 버전이 공개
• 2017년 3월 23일 Angular 4
• 2017년 11월 1일 Angular 5
• 2018년 5월 3일 Angular 6이 출시
• 호환성등 문제가 빈번하게 발생하여 많은 개발자를 혼란스럽게 하였지만 6버전 부터 안정
• AngularJS와 Angular는 다른 것!

Angular의 장점

개선된 개발 생산성

컴포넌트 기반 개발(CBD: Component Based Development)

• 레고 블록 같이 가져다 쓸 수 있음
• 웹 표준에 웹 컴포넌트라는 것이 있다.
• 핵심은 컴포넌트를 재사용
• HTML + css + js => 컴포넌트
• css를 분리해내는 것이 핵심
• 어떤 컴포넌트에만 동작하는 css

TypeScript의 도입

• 공식적으로 씀

개발 도구의 통합 및 개발 환경 구축 자동화

• Angular CLI의 contributor인 Mike Brocchi의 보고에 따르면 개발 환경 구축이 Angular 도입의 큰 장벽 중 하나로 조사되었다.
• 이러한 점을 감안해 Angular는 Angular CLI를 통해 간편한 개발 환경 구축을 지원한다.

성능의 향상

Digest Loop로 인한 성능저하 문제의 해결

• 양방향 바인딩 때문에 생기는 문제
  • 양방향 바인딩이란? - 양쪽에서 서로 바인딩

AoT 컴파일

• 컴파일 빨리해주는것

Lazy Loading

• SPA에 단점이 초기로딩속도가 느린것
• 한번에 받지말고 나서 필요할 때마다 받는다.

코드 최적화

• 나중에 서버에 올릴 코드를 최적화 시켜준다.

브라우저 지원 범위

• ie 9 부터 지원