[UI / UX 프로그래밍]
앵귤러(Angular) & 자바스크립트(ECMA, TypeScript) 화면구현 재직자향상과정
-
JavaScript for Angular(ECMAScript, TypeScript) Chapter 1 : ECMAScript
1. ECMAScript
2. ES6 개발환경 설정
WebStorm 바벨 설정
3. var
4. let
5. const
6. parameter
7. spread operator
8. Destructuring Assignment
9. Module System
1. CommonJS 방식
2. ES6(ECMA2015) 방식
3. IIFE 방식
4. AMD
10. 함수 축약 표현식
11. Arrow function
12. $ expression
13. class
클래스 주요 특징
클래스 기본 문법
클래스 문법 코드를 ES5 코드로 트랜스파일링한 결과 확인
extends 키워드
ES5, ES6 문법 혼용
클래스가 객체를 대상으로 상속
super 키워드
클래스 표현식 vs 선언식
ES5 상속과 class 를 사용한 ES6 상속의 차이점
Multiple Inheritance with Proxies
14. 비동기 처리
1. Call-back Function
2. Event Emitter
3. Promise
15. TypeScript 소개
Learn TypeScript in 30 Minutes
The Benefits of Using TypeScript
Chapter 2 : Angular Basic
Step 1 – 앵귤러 소개
Step 2 – Simple Example
Step 3 – Project Structure
Step 4 - CLI
1. 설치
2. 새 프로젝트 만들기
3. 테스트를 위한 빌드
4. 서비스(배포)를 위한 빌드
Step 5 – Component
Binding
빌트인 지시자
Step 6 – Service
서비스 추가
Step 7 – Pipe
빌트인 파이프
커스텀 파이프
Step 8 - Directive
커스텀 디렉티브
Step 9 – Module
루트 모듈 : AppModule
핵심 모듈 : CoreModule
특징 모듈 : PlayerModule
특징 모듈 : MemberModule
3
공유 모듈 : ShareModule
Chapter 3 : Angular Core
Step 1 – Life Cycle
Step 2 – Component Communication
@Input and @Output
@ViewChild
Observable & Subject
@ContentChild
@ViewChildren
@ContentChildren
Step 3 – HTTP
Promise
Observable
Step 4 – Router
해시 기반 주소로 변경
연결순서 : http://localhost:4200/router-link-test
연결순서: http://localhost:4200/pages/first-page
연결순서 : http://localhost:4200/member
연결순서 : http://localhost:4200/children
연결순서 : http://localhost:4200/login?session_id=1234#anchor
연결순서 : http://localhost:4200/children
연결순서 : http://localhost:4200/children/1
연결순서 : /children/1 /children/5
연결순서 : http://localhost:4200/lazy/player
연결순서 : http://localhost:4200/active
특징 모듈 라우터
Step 5 - Guard
Step 6 – Form
book-form-basic
book-form-valid
book-form-control
4
book-form-formbuilder
Chapter 4 : Angular Extension
Step 1 – DI
Providers
불투명 토큰을 이용한 제공자 설정
Provider 없이 객체 DI
주입기를 이용한 객체 생성
Step 2 – CSS Style
Step 3 – Sanitization
Step 4 – Animation
Chapter 5 : Angular Deep Dive
Step 1 - Angular1 과의 차이점
Directive
Components VS Directive
Step 2 – 분석 : Registration and Login
Step 3 - 실습 : Tour of Heroes Tutorial
01 : The Hero Editor
02 : Master/Detail
03 : Multiple Components
04 : Services
05 : Routing
06 : Http