홍보 / 광고

  • (탑크리에듀) 프론트 개발자를 위한 AngularJS, React 실무과정 (구로디지털단지,IT실무,java교육)
프론트 개발자를 위한 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. 서버 사이드
0 좋아요!
이 게시물을
0  COMMENTS
←First Page
15 16 17 18 19 20 21 22 23 24
Last Page→
한델 로그인 하기