[자바학원/앵귤러교육]앵귤러(Angular) & 자바스크립트(ECMA, TypeScript) 화면구현 재직자향상과정

오라클왕 0 1,282 2018.07.01 09:23

                      [자바학원/앵귤러교육]

 

 

앵귤러(Angular) & 자바스크립트(ECMA, TypeScript)

 

 화면구현 재직자향상과정 

 

 

평일주간http://topcredu.co.kr/sub/crcl/view/open/2264

 

평일야간:http://topcredu.co.kr/sub/crcl/view/open/2266

 

주말주간:http://topcredu.co.kr/sub/crcl/view/open/2265

 

3bd7321351adc803874b71ff35e12c6a_1530328
 

  

 

 

 ★ 교육개요 ★ 

 

Angular는 Google에서 만든 SPA(Single Page Application)방식의 프론트엔드 웹 개발을 위한 프레임워크 입니다.  

사용언어는 TypeScript, ECMAScript등을 사용하지만 대체로 TypeScript 사용을 권장 합니다. 

 

[장점]
코드 유지보수가 효율적이며 Spring MVC로 백엔드 개발을 하는 것과 상당히 유사하게 클라이언트쪽을 개발 합니다.
페이지간 화면전환 속도가 우수 합니다.(물론 초기 로딩속도는 좀 느린편 입니다.)
DOM을 선택하고 조작하는데 자바스크립트 코드를 작성하지 않아도 되며 양방향 데이터 바인딩이 가능 합니다.
Model, View, Controller의 분리가 용이하기 때문에 가독성 또한 높아지며 단위테스트 역시 간단히 수행 할 수 있습니다.
HTML과 JavaScript의 DOM 핸들링을 자동으로 수행하기 때문에 간단하며 직관적인 코드를 작성할 수 있습니다.

[과정 특징]
최신 프론트엔드 UI 개발 기술(Angular2 이상, TypeScript, ECMAScript)을 교육하는 실무과정 입니다.
AngularJ2 이상을 핵심으로, 이를 구현하기 위한 자바스크립트 핵심기술을 실습과 함께 체계적으로 따라하기 식으로 수업합니다.
Full Stack Programmer, 최고의 Front End 개발을 꿈꾸는 분들에게 꼭 필요한 과정입니다.

 

★ 수료조건 ★

 

출석률 80%이상 

 

 

★ 교육목표 ★ 

 

Angular를 위한 기본이 되는 ECMASCript, TypeScript를 이용하여 UI를 구성할 수 있다.
Angular를 이용하여 설계된 화면 UI, 웹프론트를 개발할 수 있다.
설계된 화면과 폼의 흐름을 확인하고, 제약사항과 화면의 폼 흐름을 구현에 반영하도록 설계를 확인 할 수 있다. 
UI 요구사항과 UI 표준 및 지침에 따라 설계된 메뉴 구조를 해석 할 수 있다. 
구현을 위해 하위 시스템 단위의 내·외부 화면과 폼을 설계를 확인할 수 있다.
소프트웨어 아키텍처 세부 구현 지침과 UI 표준 및 지침을 반영하여, 확인된 UI 설계를 구현할 수 있다. 
확인된 화면과 폼 흐름 설계에 따라, 사용자 접근성을 고려한 화면과 폼의 흐름 제어를 구현할 수 있다.
확인된 화면과 폼 흐름 설계에 따라, 감성공학 기법을 고려하여 사용자가 접하는 화면, 폼, 메뉴, 흐름을 구현할 수 있다. 
구현된 화면, 폼, 메뉴, 흐름을 테스트할 수 있는 테스트 케이스를 작성하고 단위 테스트를 수행하기 위한 테스트 조건을 명세화 할 수 있다.

 

 

★ 교육대상 ★ 

 

프론트 개발자
UI 개발자
스크립팅 능력이 부족한 개발자 및 퍼블리셔

 

 

★ 커리큘럼 ★ 

 

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

 

Comments

번호 제목 글쓴이 날짜 조회
탑크리에듀, 2017~2018년 국기과정/실업자과정 수강후기/만족도/수강평 한번 확인 해보세요[전자정부응용S… FSP 2018.08.01 1404
(웹스퀘어5,스프링프레임워크,안드로이드,C#,WPF,Angular,파이썬,오라클,SQL)국비지원/노동부지원 … FSP 2018.07.02 2699
(IT국비지원무료교육/무료취업교육)자바,C#,모바일,IoT,UI/UX,웹퍼블리싱,정보처리기사,아두이노 무료교… 오라클왕 2018.07.02 2358
▶︎ 탑크리에듀교육센터(www.topcredu.co.kr) 소개 PPT 입니다._자바/SQL/스프링/닷넷/모… FSP 2016.09.09 6498
510 [기업출강교육]코텍스(Cortex-M3) 강좌 FSP 2019.11.05 524
509 (블록체인학원/이더리움학원)이더리움을 활용한 블록체인 네트워크 구축 및 솔리디티(Solidity)를 이용한 … 오라클왕 2019.01.03 888
508 (오라클학원/SQL학원)SQL튜닝, 오라클힌트(ORACLE Hints) 실무교육 오라클왕 2019.01.02 1019
507 (오라클학원/SQL학원)개발자,DB전문가를 위한 PL/SQL, 오라클힌트 & SQL튜닝교육 오라클왕 2019.01.02 963
506 (스프링고급 + UI고급)스프링부트,Spring Data JPA, Security & 앵귤러, 뷰(Angul… 오라클왕 2018.12.17 1642
505 Cortex-M3 프로세서구조및활용(기본과정) 오라클왕 2018.12.14 651
504 파이썬(Python)으로 입문하는 딥러닝(Deep Learning) 프로그래밍 오라클왕 2018.12.14 771
503 [국비지원 ]파이썬(Python) 프로그래밍 기본 재직자 향상 과정 오라클왕 2018.12.14 707
502 인공지능, 머신러닝, 딥러닝 개론(AI, Machine Learning, Deep Learning) 오라클왕 2018.12.14 818
501 [국비지원] SQL 활용과 오라클(Oracle) Hint를 이용한 SQL튜닝 재직자 향상과정 오라클왕 2018.12.14 951
500 [국비지원] 안드로이드 앱 인터페이스구현 재직자 향상과정 오라클왕 2018.12.14 1168
499 [자마린학원/자마린교육] 자마린(Xamarin) 크로스 플랫폼 앱개발 과정_C#으로 안드로이드, iOS 네이… 오라클왕 2018.12.14 1254
498 C#기반 WPF, XAML 윈도우 프로그래밍 오라클왕 2018.12.14 949
497 [국비지원] C# 기본 & 고급프로그래밍, 윈폼(Winform), 네트워크, ADO.NET 재직자향상과정 오라클왕 2018.12.14 779
496 C# 기본 & 고급프로그래밍, 윈폼(Winform), 네트워크, ADO.NET 재직자향상과정 오라클왕 2018.12.14 1043
495 [국비지원// UI /UX 프로그래밍] 앵귤러(Angular) & 자바스크립트(ECMA, TypeScript… 오라클왕 2018.12.13 1136
494 [IT국비무료 취업교육] UI/UX 개발전문가(웹퍼블리싱 & 모바일앱) 구직자 양성과정_자바서버프로그래밍 +… 오라클왕 2018.12.13 1625
493 [자바 웹프로그래밍] 스프링부트(Spring Boot), JPA, Querydsl, Angular 풀스택개발… 오라클왕 2018.12.13 1465
492 [국비지원/자바 웹 프로그래밍] 스프링&마이바티스&웹스퀘어(WebSquare) 통합구현 실무 재직자 향상과정 오라클왕 2018.12.13 1453
491 [자바 웹프로그래밍] 스프링 부트 & 시큐리티 & 소셜(Spring Boot & Security & Spri… 오라클왕 2018.12.13 1182
490 [자바 웹프로그래밍] IT개발자를 위한 깃허브(GihHub) 이해하기 오라클왕 2018.12.13 974
489 [자바 웹프로그래밍] 뷰제이에스(Vue.js) 프로그래밍 입문 과정 오라클왕 2018.12.13 866
488 [자바 웹 프로그래밍] 스프링부트, Spring Data JPA, Querydsl 쇼핑몰 실무프로젝트과정 오라클왕 2018.12.13 1584
487 (닷넷,C#/미취업자/신입사원교육)C#기초에서 윈폼, WPF, 자마린앱, 웹개발자과정(C#.NET, ADO.… FSP 2018.12.11 4008
486 GitHub교육_IT개발자를 위한 깃허브(GihHub) 이해하기(평일주간/주말주간) FSP 2018.12.06 954
485 [닷넷,C#/취업/신입사원교육]C#기초에서 윈도우, 스마트폰 앱, 웹 개발자과정(C#.NET, ADO.NET… FSP 2018.11.01 2736
484 스프링부트(Spring Boot), JPA, Querydsl, Angular 풀스택개발자 실무프로젝트 과정 FSP 2018.11.01 1624
483 [스프링부트/스프링학원] 스프링 부트 & 시큐리티 & 소셜(Spring Boot & Security & Sp… 오라클왕 2018.10.31 1310
482 (뷰제이에스학원/Vue.js학원) 뷰제이에스(Vue.js) 프로그래밍 입문과정 FSP 2018.10.18 1286
481 [닷넷학원/닷넷교육] c# 기본 & 고급프로그래밍, 윈폼(Winform), 네트워크, ADO.NET 재… 오라클왕 2018.09.20 992
480 [오라클학원/SQL교육] SQL 활용과 오라클(Oracle) Hint를 이용한 SQL튜닝 재직자… 오라클왕 2018.09.20 1216
479 [자마린학원/자마린교육] 자마린(Xamarin) 크로스 플랫폼 앱개발 과정 C#으로 안드로… 오라클왕 2018.09.14 1508
478 [국비무료 자격증과정] 정보처리기사 취득 양성과정 *수강후기/만족도/수강평 한번 확인 해보세요 정보처리교육은… 오라클왕 2018.09.12 1138
477 [닷넷학원/씨샵교육] C#기반 WPF, XAML 윈도우 프로그래밍 오라클왕 2018.09.12 1068
476 탑크리에듀교육센터 정보처리기사(정보처리산업기사) 과정 수강생만족도!_정보처리교육은 탑크리에듀에서 FSP 2018.09.07 1015
475 [국비전액무료교육]UI/UX 개발전문가_자바/JSP/스프링/마이바티스/JS/ECMA/Angular/React… 오라클왕 2018.09.07 2520
474 [자바학원/C#교육] 프로그래밍언어기초, C언어, 자바(JAVA) 오라클왕 2018.08.01 1283
473 탑크리에듀, 2017~2018년 국기과정/실업자과정 수강후기/만족도/수강평 한번 확인 해보세요[전자정부응용S… FSP 2018.08.01 1404
472 2018년 정보처리기사, 산업기사 마지막 기회 3회차 일정 및 강의/국비지원무료교육/실업자교육/구직자교육/재… FSP 2018.07.18 869