방문을 환영합니다.
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

[UI / UX 프로그래밍]  

  

 

앵귤러(Angular) & 자바스크립트(ECMA, TypeScript) 화면구현 재직자향상과정 

 
                ìµê·¤ë¬(Angular) & ìë°ì¤í¬ë¦½í¸(ECMA, TypeScript) í면구í ì¬ì§ìí¥ìê³¼ì 
 
 
★ 교육개요 ★
 
angular.png
 
재직자가 아닌 경우 국비지원없이 전액 자부담으로 수강 가능 합니다.
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

List of Articles
번호 제목 글쓴이 날짜 조회 수
40742 [웹프로램 무료교육] 훈련수당 249만원 지급. 인공지능(머신러닝,딥러닝) 기반 빅데이터분석 개발자 전문과정 및 JAVA기반 SW엔지니어 과정 무료교육 2019.01.16 7
40741 [KG아이티뱅크] 모의해킹 컨설팅(화이트해커) 국비지원 취업과정 취업컨설팅 2019.01.16 7
40740 [KG아이티뱅크] 정보보안 전문가(해킹보안 전문가) 국비지원 취업과정 취업컨설팅 2019.01.16 6
40739 [KG아이티뱅크] 네트워크 엔지니어 및 네트워크 보안 관리자 국비지원 취업과정 취업컨설팅 2019.01.16 6
40738 [KG아이티뱅크] 클라우드 컴퓨팅 가상화시스템(시스템엔지니어) 관리자 국비지원 취업과정 취업컨설팅 2019.01.16 11
40737 [KG아이티뱅크] 보안 솔루션 및 CERT 정보보안 전문가 국비지원 취업과정 취업컨설팅 2019.01.16 7
» [국비지원// UI /UX] 앵귤러(Angular) & 자바스크립트(ECMA, TypeScript) 화면구현 재직자향상과정 탑크리에듀 2019.01.16 26
40735 [구디아카데미][국비지원][3월개강]응용SW기반 빅데이터UI전문가 양성과정 교육생 모집! file 구디 2019.01.15 11
40734 (스프링고급 + UI고급) 스프링부트,Spring Data JPA, Security & 앵귤러, 뷰(Angular, Vue.js) UI 프로젝트과정 탑크리에듀 2019.01.14 163
40733 [블록체인교육/이더리움교육] 이더리움을 활용한 블록체인 네트워크 구축 및 솔리디티(Solidity)를 이용한 토큰 DApp구축 개발자과정 탑크리에듀 2019.01.11 21
40732 [국비지원]SQL 활용과 오라클(Oracle) Hint를 이용한 SQL튜닝 재직자 향상과정 탑크리에듀 2019.01.10 27
40731 [국비지원][2월 개강] 교육생들이 선택한 우수훈련기관! 자바 스프링 개발자 과정 교육생 모집! file 구디 2019.01.10 15
40730 (블록체인학원/이더리움학원)이더리움을 활용한 블록체인 네트워크 구축 및 솔리디티(Solidity)를 이용한 토큰 DApp구축 개발자과정 탑크리에듀 2019.01.09 20
40729 [블록체인교육/이더리움교육]이더리움을 활용한 블록체인 네트워크 구축 및 솔리디티(Solidity)를 이용한 토큰 DApp구축 개발자과정 탑크리에듀 2019.01.08 33
40728 자마린(Xamarin) 크로스 플랫폼 앱개발 과정_C#으로 안드로이드, iOS 네이티브를 만들자 탑크리에듀 2019.01.07 89
40727 [2019년 자바개발자 취업을 위한 웹스프링 개발자무료교육 연수생 모집] ITTraining 2019.01.04 32
40726 [블록체인 국비지원] 가상화폐 시스템 구현을 위한 블록체인 개발자 국비지원 취업과정 에이콘이즈 2019.01.04 69
40725 [머신러닝 국비지원] 머신러닝(Machine Learning)을 활용한 데이터 분석 전문가 국비지원 취업과정 에이콘이즈 2019.01.04 27
40724 [프론트엔드 국비지원] 웹 프론트엔드 개발을 위한 자바 웹 개발자 국비지원 취업과정 에이콘이즈 2019.01.04 48
40723 [딥러닝 무료교육] 클라우드 기반 빅데이터 분석 및 자바 딥러닝 개발자 양성과정 KIC캠퍼스 2019.01.04 16
Board Pagination Prev 1 ... 8 9 10 11 12 13 14 15 16 17 ... 2050 Next
/ 2050