|
프론트 개발자를 위한 AngularJS, React 실무과정평일, 주말과정 운영중 입니다.바로가기 : http://topcredu.co.kr/sub/crcl/lecture/web
 |
AngularJS 2.X & React 실무과정
선수학습 :
Java Script(본원의 [자바스크립트 프로그래밍 for Node.JS, AngularJS2, React]과정 수료자도 수강 가능), jQUERY, HTML
교육기간 :
4일 총 28시간
강의장소 :
탑크리에듀교육센터 [A강의장] [약도보기]
교육문의 :
02-851-4790
수강료 :
520,000원[실무중심교육]고용보험 미지원, 일반 과정 입니다. (소수정예, 스파르타식 교육 입니다.) 한분한분의 수강생 여러분들께 최선을 다하는 실무/실습 위주의 교육 입니다.[실무중심교육]고용보험 미지원, 일반 과정 입니다. (소수정예, 스파르타식 교육 입니다.) 한분한분의 수강생 여러분들께 최선을 다하는 실무/실습 위주의 교육 입니다. [실무중심교육]고용보험 미지원, 일반 과정 입니다. (소수정예, 스파르타식 교육 입니다.) 한분한분의 수강생 여러분들께 최선을 다하는 실무/실습 위주의 교육 입니다.
결제방법 :
계좌이체 / 방문카드결제
교재 :
PDF 제공
|
| 교육개요 |
 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.0 |
Simple WebsiteChapter 1GithubDependenciesGetting StartedCheck SiteTestingChapter 2Compile and Serve2.1. tsconfig.json2.2. package.json2.3. Bootstrapping2.4. The App Component2.5. The Home Component2.6. The State Service2.7. The Views2.8. Routing Markup2.9. ReviewResourcesCIDER1. Create Your Class2. Import Your Dependencies3. Decorate Your Class4. Enhance with Composition5. Repeat for Sub-ComponentsEXTRA: Bootstrap the Main ComponentOutroCIDER Practice1. Create Your Class2. Import Your Dependencies3. Decorate Your Class4. Enhance with Composition5. Repeat for Sub-Components5.1. Create Your Class5.2. Import Your Dependencies5.3. Decorate Your Class5.4. Enhance with Composition5.5. Repeat for Sub-Components6. 결과 확인Angular 2 소개앵귤러를 사용해야 하는 이유앵귤러 아키텍처구성요소의 결합앵귤러 설정파일package.jsontsconfig.jsontypings.json앵귤러 기동컴포넌트컴포넌트의 분할(자식 컴포넌트 추가)복수 자식 컴포넌트데이터 루프 처리(ngFor)양방향 데이터 바인딩클라이언트-서버 데이터 동기화1단계 : 클라이언트 사이드 - 기본 틀2단계: 서버 사이드 - Restful Service3단계 : 클라이언트 사이드 - HTTP 로직결과 확인앵귤러 아키텍처 구성요소ControllersScopeInjectionServer-side renderingTypeScriptTemplatesng-forDetection MechanismsDirectiveComponents VS Directive@NgModule# Module in Angular 1# Module in Angular 2book-module-range앵귤러 살펴보기hello-angular2book-promise-httpbook-pipe-basicbook-pipe-custombook-inout-inputbook-inout-outputbook-form-basicbook-form-validbook-form-controlbook-form-formbuilderbook-directive-propertybook-directive-event실습 1 : Registration and Login실습 2 : Tour of Heroes Tutorial앱 디자인 미리보기설정 샘플 프로젝트 살펴보기Chapter 1. 간단한 앱angular-tour-of-heroes 프로젝트 구조프로젝트 설정파일디펜던시 설치파일 생성테스트 1Chapter 2. 업그레이드: Master/Detail테스트 2Chapter 3. 업그레이드: MULTIPLE COMPONENTS테스트 3Chapter 4. 업그레이드: ServicesCreating a Hero Service테스트 4Chapter 5. 업그레이드: Routing테스트 5Chapter 6. 업그레이드: HTTPProviding HTTP ServicesRegister for HTTP servicesSimulating the web API |
| React |
1. ReactJS TutorialPrerequisitesReactJS - OverviewReact FeaturesFLUXReact AdvantagesReact Limitations2. ReactJS - Environment SetupNodeJS and NPMStep 1 - Install Global PackagesStep 2 - Create Root FolderStep 3 - Add Dependencies and pluginsStep 4 - Create filesStep 5 - Set Compiler, Server and LoadersStep 6 - index.htmlStep 7 - App.jsx and main.jsStep 8 - Running the Server3. ReactJS - JSX3.1. Using JSX3.2. Nested Elements3.3. Custom Attributes3.4. JavaScript Expressions 153.5. Styling3.6. Comments3.7. Naming Convention4. ReactJS - Components4.1. Stateless Example4.2. Stateful Example실습실습 - 해답5. ReactJS - StateUsing Props6. ReactJS - Props Overview6.1. Using Props6.2. Default Props6.3. State and Props7. ReactJS - Props ValidationValidating Props8. ReactJS - Component API8.1. Set State8.2. Force Update8.3. Find Dom NodeNOTE9. ReactJS - Component Life CycleLifecycle MethodsNOTE10. ReactJS - Forms10.1. Simple Example10.2. Complex Example11. ReactJS - Events11.1. Simple Example11.2. Child Events12. ReactJS - Refs12.1. Using Refs13. ReactJS - KeysUsing Keys14. ReactJS - RouterStep 1 - Install React RouterStep 2 - Create ComponentsStep 3 - Add Router15. ReactJS - Flux ConceptFlux ElementsFlux Pros16. ReactJS - Using FluxStep 1 - Installing ReduxStep 2 - Create Files and FoldersStep 3 - ActionsStep 4 - ReducersStep 5 - StoreStep 6 - Root ComponentStep 7 - Other Components17. ReactJS - AnimationsStep 1 - Install React CSS Transitions GroupStep 2 - Add CSS fileStep 2A - Appear AnimationStep 2B - Enter and Leave Animations18. Higher Order ComponentsNOTE19. ReactJS - Best Practices1. Hello World1.1. hello.html1.2. 브라우저가 처리하는 JS소스를 살펴보는 방법1.3. 리액트 빌트인 컴포넌트의 목록2. 엘리먼트 속성2.1. id2.2. 복수의 자식 엘리먼트2.3. class, for2.4. style2.5. 리액트 데브툴 브라우저 확장3. Bower3.1. 설치3.2. bower.json 생성3.3. 환경설정 파일 .bowerrc 생성3.4. react, babel 설치3.5. 작업결과bower.json3.6. hello.html4. 컴포넌트4.1. 컴포넌트 생성4.2. props4.3. propsTypesReact.PropTypes 목록4.4. 무상태 컴포넌트4.5. 상태 컴포넌트5. 컴포넌트 라이프사이클5.1. Mount, Update5.2. Update, Unmount5.3. 라이프 사이클에 따라 state 제어5.4. Mixin5.5. 상태가 변하지 않은 경우 랜더링 방지5.6. 빌트인 Mixin6. Excel : 커스텀 테이블 컴포넌트6.1. 기본틀 만들기03.00.table.csstable-th.html : head 영역 만들기table-th-td.html : body 영역 만들기6.2. sorttable-sort.html : 헤드 셀 클릭 > 오름차순 정렬table-sortby.html : 헤드 셀 클릭 > 오름차순 내림차순 정렬6.3. edit : 바디 셀 더블클릭 > 입력폼 > 엔터키 저장table-edit.html6.4. searchtable-search.html6.5. log : 되돌리기table-log.html6.6. 다운로드table-download.html7. JSXhello-broken.htmlhello-unbroken.htmltable-sortby.htmltable-sortby2.htmljsx-js-expression.htmlwhite-space.htmlunicode.htmlescape.htmles6-spread-syntax.htmlelement-array.htmlmulti-children.htmldefault-value.htmltextarea.htmlselect.htmlmulti-default-value-select.htmljsx-table-download.htmlcomponent-communicate.html8. Boiler Plate8.1. 프로젝트 구조8.2. 모듈 시스템8.3. 예제 파일들 만들기css/components/Logo.csscss/app.cssimages/react-logo.svgjs/source/components/Logo.jsjs/source/app.jsindex.html8.4. 패키징8.4.1. JS 패키징 : bundle.js 생성8.4.2. CSS 패키징 : bundle.css 생성8.4.3. 확인8.5. 개발 중 빌드하기8.5.1. build.sh8.5.2. watch 모듈8.6 배포8.6.1 deploy.sh8.6.2. gulp9. 앱 구축하기index.htmljs/source/components/Excel.jscss/components/Excel.cssjs/source/app.jscss/components/Logo.cssjs/source/components/Logo.jswatch 스크립트 실행작업결과 확인10. FLUXA Flux ExampleLoading the ToDo ItemsCreating a New ToDo ItemFlux vs. MVC11. HTTP11.1. 클라이언트 사이드11.2. 서버 사이드 |
|