프론트 개발자를 위한 AngularJS, React 실무과정

평일, 주말과정 운영중 입니다.
바로가기 : http://topcredu.co.kr/sub/crcl/lecture/web

 

AngularJS 2.X & React 실무과정

AngularJS 2.X & React 실무과정

 

선수학습 :
Java Script(본원의 [자바스크립트 프로그래밍 for Node.JS, AngularJS2, React]과정 수료자도 수강 가능), jQUERY, HTML
교육기간 :
4일 총 28시간

 

 

강의장소 :
탑크리에듀교육센터 [A강의장] [약도보기]
교육문의 :
02-851-4790
수강료 :
520,000원
[실무중심교육]고용보험 미지원, 일반 과정 입니다. (소수정예, 스파르타식 교육 입니다.) 한분한분의 수강생 여러분들께 최선을 다하는 실무/실습 위주의 교육 입니다.[실무중심교육]고용보험 미지원, 일반 과정 입니다. (소수정예, 스파르타식 교육 입니다.) 한분한분의 수강생 여러분들께 최선을 다하는 실무/실습 위주의 교육 입니다. [실무중심교육]고용보험 미지원, 일반 과정 입니다. (소수정예, 스파르타식 교육 입니다.) 한분한분의 수강생 여러분들께 최선을 다하는 실무/실습 위주의 교육 입니다.
결제방법 :
계좌이체 / 방문카드결제
교재 :
PDF 제공

 

교육개요AngularJS 2.X & React 실무과정
AngularJS는 구글에서 2010년 10월 출시된 자바스크립트 기반 WEB MVC(Model View Controller), MVW(Model View Whatever) 프레임워크로 자바스크립트 프레임워크 중 가장 인기 있는 오픈소스중 하나입니다. 앵귤러는 크로스 플랫폼 지원, 처리속도, 개발생산성 등 다양한 요구에 의해 그 필요성이 높아지고 있습니다.

최근 들어 브라우저에서 동작하는 스크립트의 역할이 뷰에서 머물지 않고 컨트롤러까지 확대되었습니다. 데이터를 자바스크립트 객체상태로 유지하고, 이에 따라 서버의 역할은 데이터를 제공하는 공급자 역할로 축소되고 있기 때문에 AngularJS 및 React의 중요성은 더욱 높아질 것입니다.

React는 페이스북과 인스타그램에서 만든 라이브러리로 이벤트 요청 시 서버에서 코드를 받아 다시 렌더링해야 되는 문제를 해결하기 위해 만들어졌습니다. 개발자로 하여금 재사용 가능한 UI를 생성 할 수 있게 해주거 여러 자바스크립트 프레임워크나 라이브러리와 함께 사용할 수 있습니다. 뿐만 아니라 Virtual DOM 이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 유저인터페이스를 렌더링 할 수 있습니다. 이렇듯 React는 최소한의 DOM 처리로 컴포넌트들을 업데이트 할 수 있게 해주는 훌륭한 기술입니다.

본 과정은 최적화된 본원의 자체교재를 통해 이론과 실습을 적절히 진행하며, 실습을 통해 이론을 배울 수 있도록 하는 과정입니다. Full Stack Programmer, 최고의 Front End 개발을 꿈꾸는 분들에게 꼭 필요한 과정이라고 자신합니다.
수료조건출석률 80%이상
교육목표- AngularJS 2.X의 이해 및 활용
- React의 이해 및 활용
교육대상개발자
디자이너

교육내용

AngularJS 2.0Simple Website
Chapter 1
Github
Dependencies
Getting Started
Check Site
Testing
Chapter 2
Compile and Serve
2.1. tsconfig.json
2.2. package.json
2.3. Bootstrapping
2.4. The App Component
2.5. The Home Component
2.6. The State Service
2.7. The Views
2.8. Routing Markup
2.9. Review
Resources
CIDER
1. Create Your Class
2. Import Your Dependencies
3. Decorate Your Class
4. Enhance with Composition
5. Repeat for Sub-Components
EXTRA: Bootstrap the Main Component
Outro
CIDER Practice
1. Create Your Class
2. Import Your Dependencies
3. Decorate Your Class
4. Enhance with Composition
5. Repeat for Sub-Components
5.1. Create Your Class
5.2. Import Your Dependencies
5.3. Decorate Your Class
5.4. Enhance with Composition
5.5. Repeat for Sub-Components
6. 결과 확인
Angular 2 소개
앵귤러를 사용해야 하는 이유
앵귤러 아키텍처
구성요소의 결합
앵귤러 설정파일
package.json
tsconfig.json
typings.json
앵귤러 기동
컴포넌트
컴포넌트의 분할(자식 컴포넌트 추가)
복수 자식 컴포넌트
데이터 루프 처리(ngFor)
양방향 데이터 바인딩
클라이언트-서버 데이터 동기화
1단계 : 클라이언트 사이드 - 기본 틀
2단계: 서버 사이드 - Restful Service
3단계 : 클라이언트 사이드 - HTTP 로직
결과 확인
앵귤러 아키텍처 구성요소
Controllers
Scope
Injection
Server-side rendering
TypeScript
Templates
ng-for
Detection Mechanisms
Directive
Components VS Directive
@NgModule
# Module in Angular 1
# Module in Angular 2
book-module-range
앵귤러 살펴보기
hello-angular2
book-promise-http
book-pipe-basic
book-pipe-custom
book-inout-input
book-inout-output
book-form-basic
book-form-valid
book-form-control
book-form-formbuilder
book-directive-property
book-directive-event
실습 1 : Registration and Login
실습 2 : Tour of Heroes Tutorial
앱 디자인 미리보기
설정 샘플 프로젝트 살펴보기
Chapter 1. 간단한 앱
angular-tour-of-heroes 프로젝트 구조
프로젝트 설정파일
디펜던시 설치
파일 생성
테스트 1
Chapter 2. 업그레이드: Master/Detail
테스트 2
Chapter 3. 업그레이드: MULTIPLE COMPONENTS
테스트 3
Chapter 4. 업그레이드: Services
Creating a Hero Service
테스트 4
Chapter 5. 업그레이드: Routing
테스트 5
Chapter 6. 업그레이드: HTTP
Providing HTTP Services
Register for HTTP services
Simulating the web API
React1. ReactJS Tutorial
Prerequisites
ReactJS - Overview
React Features
FLUX
React Advantages
React Limitations
2. ReactJS - Environment Setup
NodeJS and NPM
Step 1 - Install Global Packages
Step 2 - Create Root Folder
Step 3 - Add Dependencies and plugins
Step 4 - Create files
Step 5 - Set Compiler, Server and Loaders
Step 6 - index.html
Step 7 - App.jsx and main.js
Step 8 - Running the Server
3. ReactJS - JSX
3.1. Using JSX
3.2. Nested Elements
3.3. Custom Attributes
3.4. JavaScript Expressions 15
3.5. Styling
3.6. Comments
3.7. Naming Convention
4. ReactJS - Components
4.1. Stateless Example
4.2. Stateful Example
실습
실습 - 해답
5. ReactJS - State
Using Props
6. ReactJS - Props Overview
6.1. Using Props
6.2. Default Props
6.3. State and Props
7. ReactJS - Props Validation
Validating Props
8. ReactJS - Component API
8.1. Set State
8.2. Force Update
8.3. Find Dom Node
NOTE
9. ReactJS - Component Life Cycle
Lifecycle Methods
NOTE
10. ReactJS - Forms
10.1. Simple Example
10.2. Complex Example
11. ReactJS - Events
11.1. Simple Example
11.2. Child Events
12. ReactJS - Refs
12.1. Using Refs
13. ReactJS - Keys
Using Keys
14. ReactJS - Router
Step 1 - Install React Router
Step 2 - Create Components
Step 3 - Add Router
15. ReactJS - Flux Concept
Flux Elements
Flux Pros
16. ReactJS - Using Flux
Step 1 - Installing Redux
Step 2 - Create Files and Folders
Step 3 - Actions
Step 4 - Reducers
Step 5 - Store
Step 6 - Root Component
Step 7 - Other Components
17. ReactJS - Animations
Step 1 - Install React CSS Transitions Group
Step 2 - Add CSS file
Step 2A - Appear Animation
Step 2B - Enter and Leave Animations
18. Higher Order Components
NOTE
19. ReactJS - Best Practices
1. Hello World
1.1. hello.html
1.2. 브라우저가 처리하는 JS소스를 살펴보는 방법
1.3. 리액트 빌트인 컴포넌트의 목록
2. 엘리먼트 속성
2.1. id
2.2. 복수의 자식 엘리먼트
2.3. class, for
2.4. style
2.5. 리액트 데브툴 브라우저 확장
3. Bower
3.1. 설치
3.2. bower.json 생성
3.3. 환경설정 파일 .bowerrc 생성
3.4. react, babel 설치
3.5. 작업결과bower.json
3.6. hello.html
4. 컴포넌트
4.1. 컴포넌트 생성
4.2. props
4.3. propsTypes
React.PropTypes 목록
4.4. 무상태 컴포넌트
4.5. 상태 컴포넌트
5. 컴포넌트 라이프사이클
5.1. Mount, Update
5.2. Update, Unmount
5.3. 라이프 사이클에 따라 state 제어
5.4. Mixin
5.5. 상태가 변하지 않은 경우 랜더링 방지
5.6. 빌트인 Mixin
6. Excel : 커스텀 테이블 컴포넌트
6.1. 기본틀 만들기
03.00.table.css
table-th.html : head 영역 만들기
table-th-td.html : body 영역 만들기
6.2. sort
table-sort.html : 헤드 셀 클릭 > 오름차순 정렬
table-sortby.html : 헤드 셀 클릭 > 오름차순  내림차순 정렬
6.3. edit : 바디 셀 더블클릭 > 입력폼 > 엔터키 저장
table-edit.html
6.4. search
table-search.html
6.5. log : 되돌리기
table-log.html
6.6. 다운로드
table-download.html
7. JSX
hello-broken.html
hello-unbroken.html
table-sortby.html
table-sortby2.html
jsx-js-expression.html
white-space.html
unicode.html
escape.html
es6-spread-syntax.html
element-array.html
multi-children.html
default-value.html
textarea.html
select.html
multi-default-value-select.html
jsx-table-download.html
component-communicate.html
8. Boiler Plate
8.1. 프로젝트 구조
8.2. 모듈 시스템
8.3. 예제 파일들 만들기
css/components/Logo.css
css/app.css
images/react-logo.svg
js/source/components/Logo.js
js/source/app.js
index.html
8.4. 패키징
8.4.1. JS 패키징 : bundle.js 생성
8.4.2. CSS 패키징 : bundle.css 생성
8.4.3. 확인
8.5. 개발 중 빌드하기
8.5.1. build.sh
8.5.2. watch 모듈
8.6 배포
8.6.1 deploy.sh
8.6.2. gulp
9. 앱 구축하기
index.html
js/source/components/Excel.js
css/components/Excel.css
js/source/app.js
css/components/Logo.css
js/source/components/Logo.js
watch 스크립트 실행
작업결과 확인
10. FLUX
A Flux Example
Loading the ToDo Items
Creating a New ToDo Item
Flux vs. MVC
11. HTTP
11.1. 클라이언트 사이드
11.2. 서버 사이드

List of Articles
번호 제목 글쓴이 날짜 조회 수
302 [아이티윌]자바프로그래밍, 네트워크보안, 빅데이터분석 전액 국비지원 취업과정 연수생 모집요강 file 아이티윌강남 2017.05.04 15
301 [정부지원]국비지원재직자노동부지원과정(자바교육/오라클교육/SQL교육/스프링프레임워크교육/닷넷C#교육/안드로이드교육/JPA학원/JAVA학원/SQL튜닝교육) 탑크리에듀 2017.05.04 4
300 [탑크리에듀] 실무자를 위한 React 실습과정 (구로디지털단지,IT실무학원,JavaScript,리액트) 탑크리에듀 2017.05.02 4
299 [탑크리에듀] SQL기본 및 활용과 PL/SQL, 힌트/튜닝 재직자향상과정(구로디지털단지,IT실무,SQL교육) 탑크리에듀 2017.05.01 5
298 [아이티윌]자바프로그래밍, 네트워크보안, 빅데이터분석 전액 국비지원 취업과정 연수생 모집요강 file 아이티윌강남 2017.04.28 7
» (탑크리에듀) 프론트 개발자를 위한 AngularJS, React 실무과정 (구로디지털단지,IT실무,java교육) 탑크리에듀 2017.04.28 9
296 [아이티윌]자바프로그래밍, 네트워크보안, 빅데이터분석 전액 국비지원 취업과정 연수생 모집요강 file 아이티윌강남 2017.04.27 2
295 [구로IT학원,React,AngularJS,IT실무교육] 프론트 개발자를 위한 AngularJS, React 실무과정 탑크리에듀 2017.04.27 5
294 [아이티윌]자바프로그래밍, 네트워크보안, 빅데이터분석 전액 국비지원 취업과정 연수생 모집요강 file 아이티윌강남 2017.04.26 3
293 [구로IT학원,국비지원,안드로이드,자바,모바일개발] 안드로이드 앱 어플리케이션 구현 재직자 향상과정 탑크리에듀 2017.04.26 1
292 [구로IT학원,IT실무교육,국비지원재직자과정] C#,ADO.NET기반 네트워크 프로그래밍 재직자 향상과정 탑크리에듀 2017.04.25 1
291 [아이티윌]자바프로그래밍, 네트워크보안, 빅데이터분석 전액 국비지원 취업과정 연수생 모집요강 file 아이티윌강남 2017.04.25 1
290 [5월17일의 무료교육] 3개월만에 오라클 자격증 취득하고 공채준비하자 ! 에이콘아카데미 2017.04.24 3
289 [정부지원]국비지원재직자노동부지원과정(자바교육/오라클교육/SQL교육/스프링프레임워크교육/안드로이드교육/JPA학원/JAVA학원/SQL튜닝교육) 탑크리에듀 2017.04.24 4
288 [IT실무교육,스프링강좌,Hibernate,Java,국비지원재직자과정] 스프링, 마이바티스를 이용한 통합구현 재직자향상과정 탑크리에듀 2017.04.21 7
287 [국비지원과정,IT실무교육,탑크리에듀] 전자정부프레임워크 기반 응용SW엔지니어링 구직자 양성과정 (자바교육) 탑크리에듀 2017.04.20 8
286 [구로디지털단지,IT실무,국비지원과정,전자정부] 전자정부프레임워크 기반 응용SW엔지니어링 구직자 양성과정 탑크리에듀 2017.04.19 9
285 (구로디지털단지,IT실무,오라클강좌,자바강좌,국비지원재직자과정) Spring Framework & JPA 활용한 프로그램구현 재직자향상과정 탑크리에듀 2017.04.18 12
284 [아이티윌]자바프로그래밍, 네트워크보안, 빅데이터분석 전액 국비지원 취업과정 연수생 모집요강 file 아이티윌강남 2017.04.19 10
283 (재직자국비지원,수당지급,구직자무료교육)자바/스프링/전자정부프레임워크/닷넷/C#/안드로이드/빅데이터/SQL/오라클 기초에서실무까지_재직자환급교육,고용노동부지원학원 탑크리에듀 2017.04.16 14
Board Pagination Prev 1 ... 11 12 13 14 15 16 17 18 19 20 ... 31 Next
/ 31