(탑크리에듀) 프론트 개발자를 위한 AngularJS, React 실무과정 (구로디지털단지,IT실무,java교육)

개인 기업 서치펌

커뮤니티

게시판

갤러리

웹진게시판

IT 교육/국비지원/세미나

(탑크리에듀) 프론트 개발자를 위한 AngularJS, React 실무과정 (구로디지털단지,IT실무,java교육)

작성자: 탑크리에듀

추천: 0건 반대: 0건 조회: 4300 등록일: 2017-04-28

프론트 개발자를 위한 AngularJS, React 실무과정 평일, 주말과정 운영중 입니다. 바로가기 : <a href="http://topcredu.co.kr/sub/crcl/lecture/web" style="box-sizing: border-box; background: 0px 0px; color: rgb(102, 102, 102);">http://topcredu.co.kr/sub/crcl/lecture/web</a>  <div class="detail_hd_box" style="box-sizing: border-box; letter-spacing: normal; background-color: rgb(255, 255, 255); vertical-align: top; color: rgb(68, 68, 68); font-family: "맑은 고딕", "Malgun Gothic", dotum, 돋움, sans-serif;"><table class="__se_tbl_ext" style="box-sizing: border-box; border-spacing: 0px; border-collapse: collapse; background-color: transparent; margin: 0px; padding: 0px; vertical-align: top;"><colgroup style="box-sizing: border-box; margin: 0px;"><col width="20%" style="box-sizing: border-box; margin: 0px;"><col width="80%" style="box-sizing: border-box; margin: 0px;"></colgroup><tbody style="box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: top;"><tr style="box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: top;"><td style="box-sizing: border-box; padding: 0px; margin: 0px; vertical-align: top;"><img itemprop="image" content="http://topcredu.co.kr/images/crcl/826_angularjs2.jpg" src="http://topcredu.co.kr/images/crcl/826_angularjs2.jpg" alt="AngularJS 2.X &amp; React 실무과정" class="img-tag " style="box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: middle; width: auto; height: auto; max-width: 100%;"></td><td style="box-sizing: border-box; padding: 0px; margin: 0px; vertical-align: top;"><div style="box-sizing: border-box; margin-left: 10px; vertical-align: top;"><h4 style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-size: 18px; font-family: Roboto, sans-serif; font-weight: normal; line-height: 1.3; color: rgb(0, 0, 0); vertical-align: top;">AngularJS 2.X & React 실무과정</h4> <dl class="detail_list" style="box-sizing: border-box; margin-top: 20px; padding: 0px; vertical-align: top;"><dt style="box-sizing: border-box; line-height: 28px; font-weight: bold; padding: 0px; vertical-align: top; float: left; width: 70px; color: rgb(0, 0, 0);">선수학습 :</dt><dd style="box-sizing: border-box; line-height: 28px; padding: 0px; vertical-align: top; float: none; width: 447.273px;">Java Script(본원의 [자바스크립트 프로그래밍 for Node.JS, AngularJS2, React]과정 수료자도 수강 가능), jQUERY, HTML</dd><dt style="box-sizing: border-box; line-height: 28px; font-weight: bold; padding: 0px; vertical-align: top; float: left; width: 70px; color: rgb(0, 0, 0);">교육기간 :</dt><dd style="box-sizing: border-box; line-height: 28px; padding: 0px; vertical-align: top; float: none; width: 426.182px;">4일 총 28시간</dd><dt style="box-sizing: border-box; line-height: 28px; font-weight: bold; padding: 0px; vertical-align: top; float: left; width: 70px; color: rgb(0, 0, 0);"></dt></dl>  <dl class="detail_list" style="box-sizing: border-box; margin-top: 20px; padding: 0px; vertical-align: top;"><dt style="box-sizing: border-box; line-height: 28px; font-weight: bold; padding: 0px; vertical-align: top; float: left; width: 70px; color: rgb(0, 0, 0);">강의장소 :</dt><dd style="box-sizing: border-box; line-height: 28px; padding: 0px; vertical-align: top; float: none; width: 245.818px;">탑크리에듀교육센터 [A강의장] <a href="http://topcredu.co.kr/sub/intro/location" style="box-sizing: border-box; background: 0px 0px; color: rgb(102, 102, 102); margin: 0px; padding: 0px; vertical-align: top;">[약도보기]</a></dd><dt style="box-sizing: border-box; line-height: 28px; font-weight: bold; padding: 0px; vertical-align: top; float: left; width: 70px; color: rgb(0, 0, 0);">교육문의 :</dt><dd style="box-sizing: border-box; line-height: 28px; padding: 0px; vertical-align: top; float: none; width: 76.3636px;">02-851-4790</dd><dt style="box-sizing: border-box; line-height: 28px; font-weight: bold; padding: 0px; vertical-align: top; float: left; width: 70px; color: rgb(0, 0, 0);">수강료 :</dt><dd style="box-sizing: border-box; line-height: 28px; padding: 0px; vertical-align: top; float: none; width: 517.273px;">520,000원 [실무중심교육]고용보험 미지원, 일반 과정 입니다. (소수정예, 스파르타식 교육 입니다.) 한분한분의 수강생 여러분들께 최선을 다하는 실무/실습 위주의 교육 입니다.[실무중심교육]고용보험 미지원, 일반 과정 입니다. (소수정예, 스파르타식 교육 입니다.) 한분한분의 수강생 여러분들께 최선을 다하는 실무/실습 위주의 교육 입니다. [실무중심교육]고용보험 미지원, 일반 과정 입니다. (소수정예, 스파르타식 교육 입니다.) 한분한분의 수강생 여러분들께 최선을 다하는 실무/실습 위주의 교육 입니다.</dd><dt style="box-sizing: border-box; line-height: 28px; font-weight: bold; padding: 0px; vertical-align: top; float: left; width: 70px; color: rgb(0, 0, 0);">결제방법 :</dt><dd style="box-sizing: border-box; line-height: 28px; padding: 0px; vertical-align: top; float: none; width: 146.909px;">계좌이체 / 방문카드결제</dd><dt style="box-sizing: border-box; line-height: 28px; font-weight: bold; padding: 0px; vertical-align: top; float: left; width: 70px; color: rgb(0, 0, 0);">교재 :</dt><dd style="box-sizing: border-box; line-height: 28px; padding: 0px; vertical-align: top; float: none; width: 55.2727px;">PDF 제공</dd></dl> </div></td></tr></tbody></table></div><div class="detail_edu" style="box-sizing: border-box; letter-spacing: normal; background-color: rgb(255, 255, 255); margin-top: 20px; vertical-align: top; border-top: 1px solid rgb(221, 221, 221); color: rgb(68, 68, 68); font-family: "맑은 고딕", "Malgun Gothic", dotum, 돋움, sans-serif; text-align: center;"><table class="__se_tbl_ext" summary="교육에 대한 안내 입니다." width="100%" style="box-sizing: border-box; border-spacing: 0px; border-collapse: collapse; background-color: transparent; margin: 20px 0px 0px; padding: 0px; vertical-align: top; width: 659.636px; border-top: 1px solid rgb(0, 52, 97);"><caption style="box-sizing: border-box; margin: -1px 0px 0px; padding: 0px; vertical-align: top; width: 1px; height: 1px; font-size: 0px; line-height: 0px;"></caption><colgroup style="box-sizing: border-box; margin: 0px;"><col width="20%" style="box-sizing: border-box; margin: 0px;"><col width="80%" style="box-sizing: border-box; margin: 0px;"></colgroup><tbody style="box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: top;"><tr style="box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: top;"><th style="box-sizing: border-box; padding: 0px 10px; text-align: left; margin: 0px; vertical-align: middle; background: rgb(248, 248, 248); border-bottom: 1px solid rgb(221, 221, 221); color: rgb(0, 52, 97); line-height: 22px;">교육개요</th><td style="box-sizing: border-box; padding: 10px; margin: 0px; vertical-align: middle; border-bottom: 1px solid rgb(221, 221, 221); line-height: 22px;"><img src="http://topcredu.co.kr/images/crcl/detail/header_angularjs_react.png" alt="AngularJS 2.X &amp; React 실무과정" class="img-tag " style="box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: middle; width: auto; height: auto; max-width: 100%;"> 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 개발을 꿈꾸는 분들에게 꼭 필요한 과정이라고 자신합니다.</td></tr><tr style="box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: top;"><th style="box-sizing: border-box; padding: 0px 10px; text-align: left; margin: 0px; vertical-align: middle; background: rgb(248, 248, 248); border-bottom: 1px solid rgb(221, 221, 221); color: rgb(0, 52, 97); line-height: 22px;">수료조건</th><td style="box-sizing: border-box; padding: 10px; margin: 0px; vertical-align: middle; border-bottom: 1px solid rgb(221, 221, 221); line-height: 22px;">출석률 80%이상</td></tr><tr style="box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: top;"><th style="box-sizing: border-box; padding: 0px 10px; text-align: left; margin: 0px; vertical-align: middle; background: rgb(248, 248, 248); border-bottom: 1px solid rgb(221, 221, 221); color: rgb(0, 52, 97); line-height: 22px;">교육목표</th><td style="box-sizing: border-box; padding: 10px; margin: 0px; vertical-align: middle; border-bottom: 1px solid rgb(221, 221, 221); line-height: 22px;">- AngularJS 2.X의 이해 및 활용 - React의 이해 및 활용</td></tr><tr style="box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: top;"><th style="box-sizing: border-box; padding: 0px 10px; text-align: left; margin: 0px; vertical-align: middle; background: rgb(248, 248, 248); border-bottom: 1px solid rgb(221, 221, 221); color: rgb(0, 52, 97); line-height: 22px;">교육대상</th><td style="box-sizing: border-box; padding: 10px; margin: 0px; vertical-align: middle; border-bottom: 1px solid rgb(221, 221, 221); line-height: 22px;">개발자 디자이너</td></tr></tbody></table><h3 class="article_title" style="box-sizing: border-box; margin: 20px 0px; padding: 0px 0px 0px 20px; border: 0px; font-size: 15px; font-family: Roboto, sans-serif; font-weight: 500; line-height: 1.3; color: rgb(0, 0, 0); vertical-align: top; text-align: left;">교육내용</h3><table class="__se_tbl_ext" summary="교육에 대한 내용안내 입니다." style="box-sizing: border-box; border-spacing: 0px; border-collapse: collapse; background-color: transparent; margin: 20px 0px 0px; padding: 0px; vertical-align: top; width: 659.636px; border-top: 1px solid rgb(0, 52, 97);"><caption style="box-sizing: border-box; margin: -1px 0px 0px; padding: 0px; vertical-align: top; width: 1px; height: 1px; font-size: 0px; line-height: 0px;"></caption><colgroup style="box-sizing: border-box; margin: 0px;"><col width="20%" style="box-sizing: border-box; margin: 0px;"><col width="80%" style="box-sizing: border-box; margin: 0px;"></colgroup><tbody style="box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: top;"><tr style="box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: top;"><th style="box-sizing: border-box; padding: 0px 10px; text-align: left; margin: 0px; vertical-align: middle; background: rgb(248, 248, 248); border-bottom: 1px solid rgb(221, 221, 221); color: rgb(0, 52, 97); line-height: 22px;">AngularJS 2.0</th><td style="box-sizing: border-box; padding: 10px; margin: 0px; vertical-align: middle; border-bottom: 1px solid rgb(221, 221, 221); line-height: 22px;">Simple 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</td></tr><tr style="box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: top;"><th style="box-sizing: border-box; padding: 0px 10px; text-align: left; margin: 0px; vertical-align: middle; background: rgb(248, 248, 248); border-bottom: 1px solid rgb(221, 221, 221); color: rgb(0, 52, 97); line-height: 22px;">React</th><td style="box-sizing: border-box; padding: 10px; margin: 0px; vertical-align: middle; border-bottom: 1px solid rgb(221, 221, 221); line-height: 22px;">1. 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. 서버 사이드</td></tr></tbody></table></div>									<style type='text/css'> p { line-height:270%;}</style>

트위터

페이스북

댓글 : 0 건



이전글	[아이티윌]자바프로그래밍, 네트워크보안, 빅데이터분석 전액 국비지원 취업과정 연수생 모집요강
다음글	2017년 상반기 JAVA개발자 정규직 채용교육(연봉2600만원)

번호	제목	작성자	추천	반대	조회	등록일
☞	(탑크리에듀) 프론트 개발자를 위한 Angula...	탑크리에듀	0	0	4301	2017-04-28

3	[구로IT학원,React,AngularJS,IT실무교육] ...	탑크리에듀	0	0	3913	2017-04-27

2	[앵귤러강의,자바강의,오라클강의,IT실무교...	탑크리에듀	0	0	5445	2016-08-18

1	[방학특강,IT실무고급교육★탑크리에듀]Nod...	탑크리에듀	0	0	6683	2016-07-27