프론트 개발자를 위한 AngularJS, React 실무과정
평일, 주말과정 운영중 입니다.
바로가기 : http://topcredu.co.kr/sub/crcl/lecture/web
 |
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.0 | 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 |
|---|---|
| React | 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. 서버 사이드 |