3. Angular 기본 개념 잡기 (한장현)
1)Angular는 AngularJS와 다르다.
TS를 도입하면서 프레임워크 이름 변경
- 정기적인 버전업
- 철학은 비슷, 개발방법도 비슷
버전 정책은 SemVer
- 숫자에 겁먹을 필요는 없다.
2)Angular는 종합 프레임 워크다.
전체를 아우르는 구조를 제공
- 경쟁 프레임워크와 가장 큰 차이
- 뷰, 데이터 풀, 폼, 라우터, Http, 애니메이션(+머티리얼 디자인), 서버 사이드 랜더링, CLI, 테스트
각 모듈의 정합성, 자연스러운 데이터 연결이 보장
- MEAN 스택에서 Json객체 사용이 자유로운 것과 비슷한 느낌
3)프론트엔드 SPA를 만든다.
페이지 내부에서 라우터로 뷰를 전환
- 전통적인 HTML 페이지 전환 방식과 다름
해당 주소일 떄 동작하는 컴포넌트를 등록
- 자식 라우터를 사용하면 딥 링크도 가능 (/product/1515/sellect/3)
4)Typescript
Javascript 상위집합
- Javascript + a
- 정적타입, 제네릭, 인터페이스, TSLint
@어노테이션 === 함수
Angular 프레임워크에서 지원
- 함수 타입, 변수 타입 제공
- 기본 TSLint도 구성
5)컴퍼넌트 기반
추상화된 DOM 엘리먼트
- 템플릿 + 클래스 코드 (+ 스타일, 테스트 스펙)
- DOM에 직접 접근하는 것은 지양
어노테이션으로 Angular 컴포넌트 등록
- 객체 생서으 주입은 angular가 관리
- 라이프싸이클 지원(생성- 변화감지 - 종료)
컴포넌트의 조합, 트리로 구성
6)데이터 바인딩을 지원
angularJS에서 가장 인기있었던 기능
성능 향상을 위해 단방향 바인딩이 기본
양방향 바인딩도 가능
- 프로퍼티바인딩
- 이벤트 바인딩
- 양방향 바인딩
7)옵저버블
Push model Data Stream Publisher
콜백 체인 -> promise체인 -> Async 체인 -> Observable 체인
Rxjs 내장
- 기본 패키지에 포함
데이터 스트림에 사용
-Everything os stream?
-키보드 입력 이벤트, 서비스 상태 전달에 적합
-http는 ?
-Websocket에 더 어울림
8)서비스를 의존성으로 주입
컴퍼넌트를 연결
- 전역 데이터 풀로 활용
의존성 주입기가 인스턴스를 생성하고 주입
- 생성방법을 등록하면 컴포넌트에서 선언만 하고 사용
- 인스턴스 생성 방법을 신경 쓸 필요가 없음
- 컴포넌트 처럼 의존성 구성 가능
- 더미 객체를 사용하는 단위 테스트에 유리
9)모듈화 지원
ES6 모듈의 연장, 대체는 아님
- Export, import 사용
- import로 불러오고 @NgModule에 등록
Angular 모듈: @NgModule
- Angular에서 제공하는 모듈 : import
- 사용자가 만든 컴포넌트 : dec
10)angular CLI
command Line interface
- 프로젝트 기본 생성 + 구성요소 추가 + 서버 실행 + TSLint + 테스트 + 빌드 + 배포 자동화
- CLI 버전에 따라 기본 구성이 달라짐
11)최신 트렌드 도입
웹 컴포넌트
PWA
크로스 플렛폼
- 웹, 모바일, 네이티브 앱, 데스크탑 애플리케이션
리액티브 프로그래밍
서버 사이드 랜더링
머티리얼 디자인
Angular CLI
Angury(구글 개발자도구 확장 툴)
지금 공부해야할 것
- Typescript
- Angular 프레임 워크
- 컴포넌트 기반 아키텍트
- 리액티브 프로그래밍
앞으로 공부해야 할 것
- WebPack 최적화 하는 방법
- 서버 사이드 랜더링 & 검색 엔진 최적화
- 머티리얼 디자인 & 애니메이션
