2017년 8월 31일 목요일
2017년 8월 30일 수요일
2017년 8월 29일 화요일
[탑크리에듀] 앵귤러JS(AngularJS), 리액트(React) 기반 웹 & 앱 UI개발 재직자 향상과정
 | 앵귤러JS(AngularJS), 리액트(React) 기반 웹 & 앱 UI개발 재직자 향상과정
|
| 교육개요 | 본 과정은 최신 프론트엔드 UI화면 개발 기술을 교육하는 실무 재직자 향상 과정 입니다. AngularJS는 구글에서 2010년 10월 출시된 자바스크립트 기반 WEB MVC(Model View Controller), MVW(Model View Whatever) 프레임워크로 자바스크립트 프레임워크 중 가장 인기 있는 오픈소스중 하나입니다. 앵귤러는 크로스 플랫폼 지원, 처리속도, 개발생산성 등 다양한 요구에 의해 그 필요성이 높아지고 있습니다. React는 페이스북과 인스타그램에서 만든 라이브러리로 이벤트 요청 시 서버에서 코드를 받아 다시 렌더링해야 되는 문제를 해결하기 위해 만들어졌습니다. 개발자로 하여금 재사용 가능한 UI를 생성 할 수 있게 해주거 여러 자바스크립트 프레임워크나 라이브러리와 함께 사용할 수 있습니다. 뿐만 아니라 Virtual DOM 이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 유저인터페이스를 렌더링 할 수 있습니다. 이렇듯 React는 최소한의 DOM 처리로 컴포넌트들을 업데이트 할 수 있게 해주는 훌륭한 기술입니다. 본 과정은 최적화된 본원의 자체교재를 통해 이론과 실습을 적절히 진행하며, 실습을 통해 이론을 배울 수 있도록 하는 과정입니다. Full Stack Programmer, 최고의 Front End 개발을 꿈꾸는 분들에게 꼭 필요한 과정이라고 자신합니다. |
|---|---|
| 수료조건 | 출석률 80%이상 |
| 교육목표 | - 응용 S/W개발의 Front 개발 아키텍처를 설명할 수 있다. - 응용 S/W개발 프론트 영역을 AngularJS를 통해 구축할 수 있다. - 응용 S/W개발 프론트 영역을 React를 통해 구축할 수 있다. - AngularJS 및 React 최신 개발방법의 습득 |
| 교육대상 | - 프론트 개발자 - 웹개발자 - 앱 개발자 |
교육내용
| AngularJS | AngularJS 1.개발환경설정 Node ATOM Git 2.ECMASript6 let Keyword const Keyword Parameter Spread Operator Destructuring Assignment CommonJS Module System ES6 Module System 함수 축약 표현식 Arrow Function $ Class 3.Async Programming Callback Function Event Emitter Promise 4.TypeScript Class Interface Abstract Class Annotation 5.Angular Quick Start Simple Website Demo Bootstrapping Component @NgFor Service Routing I DIY:Component 6.Angular Concepts Pros/Cons Architecture Data Binding 7.Angular CLI Create Module Create Component Create Service Create Pipe Create Directive Build 8.Angular Client-Server Client Single Page Application Spring Boot CORS Project HTTP module 9.Angular Demo Registration and Login Routing II Guard Form DIY:Style 10.Angular Library PrimeNG |
|---|---|
| React | React 1.개발환경설정 Node ATOM Git 2.ECMASript6 Parameter Spread Operator Destructuring Assignment 함수 축약 표현식 Arrow Function $ Class 3.React JSX biased Overview Generator Enviroment Setup JSX Component State Props Life Cycle Event Refs Router FLUX Redux Animation HOC 4.React JS biased Simple Demo Element Attribute Component Life Cycle Mixin JSX Component Communication 5.React Pratice Custom Table Component Sorting Editing Searching Undoing Downloading 6.React Client-Server react-http-request axios Node Express CORS Project 7.React Library Material UI |
2017년 8월 28일 월요일
★★★(국비무료교육/수당지급/국가기간전략산업/실업자/구직자무료교육)취업알선,자바스프링등..국가기간전략산업직종 무료교육 알려드립니다.
안녕하세요~
구로디지털단지2분거리 탑크리에듀 교육센터입니다.
국가기간전략산업직종 무료교육 소개해 드리오니 참조 부탁드립니다.
0. 대상 : 구직자/실업자/고등학교,대학교 졸업예정자
2. 빅데이터기반 DB엔지니어링 구직자 양성과정 : 자세히보기
2017년 8월 24일 목요일
[빅데이터교육/스파크학원]빅데이터 입문자를 위한 아파치 스파크(Apache Spark) 프로그래밍(평일주간)
 |
| 교육개요 | 빅데이터R도 데이터 분석에서 널리 사용되고 있는 무료 도구이지만 대용량 데이터를 직접 다루는 데 한계가 있습니다. 하지만 아파치 스파크(Apache Spark)는 머신러닝, 그래프 알고리즘, 실시간 스트리밍, 처리는 물론 하둡, 빅데이터 R, Hive, Apache Zeppeli) 등 빅데이터 분야의 기존 도구와 연동이 가능해서 다양한 분야로 확장되고 있으며 특히 메모리상에서 동작하여 클러스터 환경의 분산 데이터 처리 시스템으로 뛰어난 성능과 다양한 데이터 처리를 위한 함수를 제공하며 빅데이터R, 하둡, 하이브 등 기존 데이터 분석 도구등과 연동하여 사용할 수 있으며 하둡에 비해 간단한 코드로 작업이 가능 합니다. 본 과정에서 스파크의 개요, 설치, 설정 및 작동, 사례, 적용방법을 예제와 더블어 배울 수 있으므로 단기간에 스파크에 대해 이해를 하고 여러분들의 시스템에 적용할 수 있을 것 입니다. |
|---|---|
| 수료조건 | 출석률 80%이상 |
| 교육목표 | - 아파치 스파크 개요의 이해 - 스파크 설치 및 개발환경의 이해 - 스파크 설정의 이해 - Scalar 언에에 대한 이해 - 스파크 RDD의 이해 - SQL과 HiveQL기반의 아파치 스파크 SQL의 이해 - 스파크 MLlib의 이해 - Mllib과 스파크 ML을 이용한 머신 러닝 애플리케이션 개발 방법의 이해 - 스파크 스트리밍을 이용한 고속 데이터 스트림 처리 방법의 이해 |
| 교육대상 | - 빅데이터에 관심 있는 자 - 아파치 스파크의 도입을 원하는 자 - 아파치 스파크에 관심있는 개발자, 데이터분석가, DB전문가 |
교육내용
| 빅데이터 스파크 프로그래밍 | 아파치 스파크 개요 스파크 설치 및 설정 클러스터 디자인 개요 및 용어 클러스터 환경의 이해 스파크 어플리케이션 개발 Hello World 작성 Scalar 프로그래밍 - 설치 - 기본문법 RDD 프로그래밍 - RDD 생성 - RDD 액션 - RDD 연산, 트랜스포메이션 - Key/Value 페어 스파크 SQL - 스파크 SQL을 이용한 데이터 처리 - 데이터프레임 - JDBC - User Define Function - 내장함수 - 하이브 스파크 스트리밍을 통한 데이터 처리 - 스트리밍 아키텍처 - 스트리밍 컨텍스트 - 스트리밍 데이터 처리 스파크 MLlib을 이용한 머신러닝 - 개발환경 설정 - MLlib API - 데이터 타입 - MLlib 데이터 처리 - 알고리즘 |
|---|
2017년 8월 21일 월요일
2017년 8월 17일 목요일
[재직자과정추천]앵귤러js(angular js), 리액트(react) 기반 웹 & 앱 ui개발 재직자 향상과정_앵귤러학원/직장인환급/앵귤러학원추천/리액트학원/IT학원추천/국비지원
[재직자 국비지원가능]
평일주간 : http://www.topcredu.co.kr/sub/crcl/view/emp/2135
평일야간 : http://www.topcredu.co.kr/sub/crcl/view/emp/2136
주말주간 : http://www.topcredu.co.kr/sub/crcl/view/emp/2153
＂앵귤러JS(AngularJS), 리액트(React) 기반 웹 & 앱 UI개발 재직자 향상과정“은
최신 프론트엔드 UI화면 개발 기술을 교육하는 실무 재직자 향상 과정 입니다.
AngularJS는 구글에서 2010년 10월 출시된 자바스크립트 기반 WEB MVC(Model View Controller), MVW(Model View Whatever) 프레임워크로 자바스크립트 프레임워크 중 가장 인기 있는
오픈소스중 하나입니다.
React는 최소한의 DOM 처리로 컴포넌트들을 업데이트 할 수 있게 해주는 훌륭한 기술입니다.
2017년 8월 13일 일요일
2017년 8월 8일 화요일
[탑크리에듀] 전자정부프레임워크기반 응용SW엔지니어링/ 빅데이터 DB엔지니어링 구직자/실업자 무료취업교육
안녕하세요~
구로디지털단지2분거리 탑크리에듀 교육센터(www.topcredu.co.kr) 입니다.
국가기간전략산업직종 무료교육 소개해 드리오니 참조 부탁드립니다.
0. 대상 : 구직자/실업자/고등학교,대학교 졸업예정자
2. 빅데이터기반 DB엔지니어링 구직자 양성과정 : 자세히보기
(고급자바스크립트강좌 for AngularJS, React)static of class,class 범위 안에서 static 키워드로 선언하는 함수의 정체
(고급자바스크립트강좌 for AngularJS, React)static of class,class 범위 안에서 static 키워드로 선언하는 함수의 정체
- 1. { for AngularJS, React} 고급 자바스크립트 3. staticof class 탑크리에듀 IT기술 칼럼 와 함께하는
- 2. { ES6 }3. static of class ES6의 클래스문법을 새로운 문법이라고 단순히 받아들이는 것보다는 기존의 사용 법과 비교해서 익히는 것이 좋습니다. 왜냐하면 클래스는 함수를 정의하는 방법중 에 하나일 뿐이기 때문입니다. 이번 시간에는 class 범위 안에서 static 키워드로 선언하는 함수의 정체가 무엇인지 살펴보겠습니다. ES5에서 함수를 선언한 다음에, 함수도 자체적으로 객체이기 때문에 다음과 같이 필요한 자원을 할당할 수 있습니다. 자바스크립트는 함수를 생성자로 사용해서 만 들어지는 객체의 관점에서 보면 새 객체가 이용할 수 있는 3가지 종류의 자원배분 방법이 있습니다. 1. 객체가 스스로 갖고 있는 프로퍼티를 이용한다. 2. 객체의 부모인 생성자 함수의 프로토타입 객체가 갖고 있는 프로퍼티를 이용한다. 3. 생성자 함수 자체가 객체로써 직접 갖고 있으면서 제공하는 프로퍼티를 이용한다.
- 3. { ES6 }3. static of class example3.js functionCar(){} Car.info= function(){ console.log('Acarisamotorvehicle.'); } Car.info();//A car isa motorvehicle. Car.info 처럼 작성된 자원은 정적인 자원입니다. 정적인 자원은 Car 함수를 생성자로 사용하여 만들어지는 새 객체와 그에 따라 이루어지는 상 속관계와 무관합니다. 주로 변하지 않으면서 다수의 객체에서 공통적으로 이용될 수 있는 자원이 설정대상입니다. 이번 시간에는 3번째 방법을 살펴보겠습니다. 함수 문법에서는 다음 예제처럼 작성합니다.
- 4. { ES6 }3. static of class class3.es6 classCar{ staticinfo(){ console.log('Acar isa motorvehicle.'); } } Car.info();//A car isa motorvehicle. 수행결과는 이전 코드와 같습니다. 클래스 범위안에서 선언하므로 프로토타입객체에 추가하는 함수와 구분하기 위해서 함수명 앞에 static 키워드를 설정합니다. 클래스 문법으로는 정적인 변수는 선언할 수 없으나 이전 문법으로는 가능하다는 것을 참고로 알아두시면 좋겠습니다. 위 코드를 새로 도입된 클래스 문법으로 작성하면 다음과 같습니다.
- 5. { ES6 }3. static of class class3.js 'usestrict'; var_createClass= function(){ functiondefineProperties(target,props){ for(vari= 0;i <props.length;i++){ vardescriptor=props[i]; descriptor.enumerable=descriptor.enumerable|| false; descriptor.configurable= true; if("value"in descriptor) descriptor.writable= true; Object.defineProperty(target,descriptor.key,descriptor); } } returnfunction(Constructor,protoProps,staticProps){ if(protoProps) defineProperties(Constructor.prototype,protoProps); if(staticProps) defineProperties(Constructor,staticProps); returnConstructor; }; }(); 다음으로 클래스문법으로 작성된 코드가 트랜스파일링 된 결과를 살펴보겠습니다.
- 6. { ES6 }3. static of class function_classCallCheck(instance,Constructor){ if(!(instanceinstanceofConstructor)){ thrownewTypeError("Cannotcalla classasafunction"); } } varCar=function(){ functionCar(){ _classCallCheck(this,Car); } _createClass(Car,null, [ { key:'info', value:functioninfo(){ console.log('Acarisa motorvehicle.'); } } ]); returnCar; }(); Car.info(); //# sourceMappingURL=C:Lessonecmascript20170328what-is-classclass3class3.js.map
- 7. { ES6 }3. static of class _createClass(Car,null, [ { key:'info', value:functioninfo(){ console.log('Acarisa motorvehicle.'); } } ]); 코드를 부분적으로 살펴보겠습니다. 첫 번째 파라미터로 Car 함수를, 세 번째 파라미터로 배열을 전달합니다. 이는 다음 코드를 거쳐 defineProperties 함수에 전달됩니다. if (staticProps) defineProperties(Constructor,staticProps);
- 8. { ES6 }3. static of class functiondefineProperties(target,props){ for(vari= 0;i <props.length;i++){ vardescriptor=props[i]; descriptor.enumerable=descriptor.enumerable|| false; descriptor.configurable= true; if("value"in descriptor) descriptor.writable= true; Object.defineProperty(target,descriptor.key,descriptor); } } defineProperties 함수의 로직을 살펴봅니다.
- 9. { ES6 }3. static of class console.log(target); /* [Function:Car] */ console.log(descriptor); /* { key:'info', value:[Function:info], enumerable:false, configurable:true, writable:true} */ Object.defineProperty(target,descriptor.key,descriptor); 중간에 로그를 남겨서 살펴보면, 위 로직은 다음처럼 처리하는 것 입니다. value: 프로퍼티에할당된값 enumerable:for-in루프나Object.keys()메소드를사용하여열거할수있다. configurable:프로퍼티속성을변경,삭제할수있다. writable: 할당연산자로값을변경할수 있다. Object.defineProperty 함수를 사용하여 함수 Car에 프로퍼티 info를 추가합니다. 프로퍼티 info는 데이터 프로퍼티로써 다음과 같은 속성을 갖고 있습니다..
- 10. { ES6 }3. static of class ES5 문법에서, 함수를 객체로 보고 함수객체에 직접 추가하는 자원들은, 새로운 클래스 문법에 서는 클래스 범위내에 선언하고 함수앞에 static 키워드를 붙이면 됩니다. class Car{ static info() { console.log('A car is a motor vehicle.'); } } Car.info(); ES6 문법 function Car(){} Car.info=function() { console.log('A car is a motor vehicle.'); } Car.info();// Acar is a motor vehicle. ES5 문법
- 11. { ES6 }3. static of class { key:'info', value:[Function:info], enumerable:false, configurable:true, writable:true} 결과가 같기 때문에 다른점이 없다고 생가할 수도 있습니다만, 약간 다른 부분이 존재합니다. 다른 부분이 무엇인지 살펴보겠습니다. 다음은 클래스 문법으로 추가된 static 함수를 대상으로 하는 프로퍼티 서술객체의 내용입니다. 열거대상이 아니라고 설정되어 있습니다.
- 12. { ES6 }3. static of class example3.js functionCar(){} Car.info= function(){ console.log('Acarisamotorvehicle.'); } Car.info();//A car isa motorvehicle. vardescriptor= Object.getOwnPropertyDescriptor(Car,'info'); console.log(descriptor); //ES5 함수문법으로추가된static한함수의프로퍼티서술객체의내용 //(디폴트데이터프로퍼티의설정값) /* { value:[Function], writable:true, enumerable:true, configurable:true} */ 다음으로 기본 ES5 함수문법으로 선언된 정적인 자원의 서술정보를 살펴봅니다.
- 13. { ES6 }3. static of class 앞선 예제와는 다르게 “enumerable: true”로 설정되어 있습니다. 따라서, 객체의 프로퍼티들을 대상으로 루프 처리 시 함수 info도 포함된다는 것을 알 수 있습니다. 대부분의 경우 함수는 루프 처리대상이 아닙니다. 이렇게 포함되어 있으면 함수를 제외하는 코드가 루프 처리 시 부가적으로 필요하게 됩니다. 따라서, 새로운 클래스 문법에서는 enumerable: false로 설정한다고 볼 수 있습니다. 추가로 언급하자면, 클래스 문법에서는 정적인 변수는 취급대상이 아니므로 항상 enumerable: false로 설정해서 사용해도 문제가 되지 않습니다. 분석을 통해 우리는 클래스문법으로 정의한 static 함수는 루프 처리 시, 제외되는 성질을 띄고 있다는 것을 알 수 있었습니다. 자바스크립트는 ES5 버전에서 개발자가 객체의 프로퍼티의 성질을 조정해서 사용할 수 있는 기능을 제공하고 있습니다. 이것이 Property Descriptor(프로퍼티 서술자)의 쓰임새 입니다.
- 14. { ES6 }3. static of class 송석원 현재 : - 탑크리에듀교육센터 자바, 스프링 프레임워크, JPA, Querydsl, AngularJS, React, Android 분야 전임강사 경력 : - 오라클자바커뮤니티교육센터 자바, 스프링, JPA, Node.JS, AngularJS, React, Android 전임강사 - 탑크리에듀 교육센터 Java, Spring Data JPA, Querydsl, SQL 교재 편찬위원 - 회원수 14,000명의 오라클자바커뮤니티 운영 및 관리 - SK T-아카데미 스프링 프레임워크 강의 - 정철 어학원 탑크리에듀교육센터 Tel. 02-851-4790 http://www.topcredu.co.kr Copyrights ⓒ Topcredu. All rights Reserved.
[국비지원재직자과정] C#,ADO.NET기반 네트워크 프로그래밍 재직자 향상과정
[국비지원재직자과정] C#,ADO.NET기반 네트워크 프로그래밍 재직자 향상과정
본 과정은 정부에서 교육비를 지원하는 "C#,ADO.NET기반 네트워크 프로그래밍 재직자 향상과정"입니다.
자세한 사항은 홈페이지를 참고하시기 바랍니다.
피드 구독하기:
글 (Atom)