만들면서 배우는 Angular 2.0 (평일반)
Out of Stock
기간 2017년 3월 6일 ~ 3월 31일 (총 4주)
일정 [월, 수, 금] 저녁 7:30~10:30 (3시간씩 총 36시간)
준비물 개인 노트북
장소 위키아카데미 1강의실(강남역 12번출구)
수강인원 20명 선착순
수강료 108만원(조기등록 할인가 100만원)

품절

리뷰

아직 리뷰가 없습니다.

“만들면서 배우는 Angular 2.0 (평일반)” 를 처음으로 리뷰해주세요

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.

Need Help? Contact Us Leave Feedback

Category: .

Share

수강대상

jQuery 다음 단계를 고민하고 있는 웹프론트엔드 개발자

ECMAScript 2015와 TypeScript를 습득하려는 개발자

체계적으로 Angular 2.0을 습득하려는 개발자

웹앱 프로젝트를 준비중인 개발자 또는 팀

강사소개

현 웹동네(http://www.webdongne.com) 커뮤니티 운영자
현 웹프론트엔드 프리랜서 개발자
현 공개소프트웨어 협회 교육 자문위원
강의 경력 위키아카데미 만들면서 배우는 Angular 2.0 강의(2017)
웹프론트엔트 강의, 기업 강의, 특강,세미나 다수 진행
저서 자바스크립트+jQuery 완전정복 스터디 1,2,3권(2015년 출간)
HTML5+CSS3+jQuery+JavaScript 실무활용 14가지(2013년 출간)
jQuery를 활용한 인터랙티브 웹콘텐츠 제작하기(2011년 출간)

만들면서 배우는 Angular 2.0의 특징 및 진행 방식

체계적인 커리큘럼

형식적인 커리큘럼은 이제 그만! Angular 2.0을 정복하기 위해 최적화된 커리큘럼을 제작했습니다. Angular 2.0 준비단계에서는 자바스크립트 ECMAScript 2015와 TypeScript를 학습하며, Angular 2.0 학습단계에서는 혼자 학습하기 어려운 Promise, RXJS, Router, 모듈화 처리 등 Angular 2.0 개념과 기능들을 우선순위로 나눠 학습합니다.

'100%' 실습 위주의 강의

딱딱한 이론 중심 강의는 이제 그만! 모든 강의 내용은 핵심 내용과 기능을 이해하기 쉽게 직접 제작한 예제를 가지고 진행됩니다. 뿐만 아니라 다양한 실무 팁을 비롯해 요즘 유행하고 있는 다른 SPA 프래임워크와 Angular와의 차이점등도 자세히 학습하게 됩니다.

단계별로 만드는 웹앱

강의 진행방식은 하나의 웹앱을 단계별로 나눠 제작하는 방식으로써 Angular 2.0 기능을 난이도에 맞게 나눈 기능을 학습한 후 학습한 기능을 활용해 웹앱을 제작하는 방식으로 진행됩니다.

수강생을 위한 특전

쉽고 빠르게 배우는 Angular 2 프로그래밍

교육커리큘럼

강의는 다음과 같이 총 2단계로 나눠 6가지 주제를 학습합니다. 자세한 내용은 상세커리큘럼을 확인해주세요.

[Angular 2.0 준비단계]

  • 1단계. ECMAScript 2015 핵심내용 (6시간)
  • 기초 문법
  • 함수 문법
  • 클래스 문법
  • Promise 객체 소개와 활용
  • 2단계. TypeScript 핵심내용 (6시간)
  • 기초 문법
  • 함수 문법
  • 클래스 문법
  • 객체지향 문법
  • 3단계. Twitter Bootstrap UI 핵심내용 (3시간)
  • Bootstrap 그리드 시스템
  • Bootstrap 핵심 CSS
  • Bootstrap 핵심 컴포넌트

[Angular 2.0 학습단계]

  • 4단계. Angular 2.0 기초: Component와 Template (6시간)
  • Component 소개와 제작
  • 데이터 바인딩
  • 기본 지시문
  • 5단계. Angular 2.0 초중급: Serivce와 Directive 그리고 Pipe (6시간)
  • Component 간의 데이터 연동
  • Service 소개와 제작
  • Attribute Directive 소개와 제작
  • Structural Directive 소개와 제작
  • Pipe 소개와 제작
  • 6단계. Angular 2.0 중급: 라우터와 모듈 (9시간)
  • 서버와의 데이터 연동
  • 라우터 소개와 활용
  • 모듈화 소개와 활용

[최종결과물]

  • 메모장 웹앱
  • 메모 리스트 페이지
  • 메모 읽기 페이지
  • 메모 수정 페이지

상세 교육커리큘럼

01.

Angular 2.0 준비, ECMAScript 2015 핵심내용


이번 단계에서는 Angular 2.0을 학습하기 위해 반드시 이해하고 있어야하는 ECMAScript 2015 핵심 내용을 다룹니다.

  • 개발환경 설정
  • 에디터 설정
  • 컴파일 방법
  • 기초 문법
  • 신규 변수 선언 방법
  • 신규 데이터 대입 방법
  • 신규 반복문 소개
  • 함수 문법
  • 함수 신규 문법 둘러보기
  • Arrow 함수
  • Rest 파라메터
  • 함수 기본값 처리
  • 클래스 문법
  • 클래스 신규 문법 둘러보기
  • 신규 클래스 문법
  • 신규 클래스 상속 문법
  • getter, setter 소개
  • 클래스에서 Arrow 함수 사용법
  • Promise 객체
  • Promise 객체 소개와 활용법
  • Promise 객체 vs. 콜백 함수
02.

Angular 2.0 준비, TypeScript 핵심내용


이번 단계에서는 Angular 2.0 기본 언어인 TypeScript 핵심내용을 다룹니다.

  • 개발환경 설정
  • 에디터 설정
  • 컴파일 방법
  • 기초 문법
  • 자바스크립트 vs. TypeScript
  • 변수 선언 방법
  • 데이터 대입 방법
  • 반복문
  • 함수 문법
  • 자바스크립트 vs. TypeScript
  • 함수 정의
  • 클래스 문법
  • 자바스크립트 vs. TypeScript
  • 클래스 정의
  • 접근 지정자
  • 객체지향 문법
  • 자바스크립트 vs. TypeScript
  • 추상 클래스 소개와 기능
  • 메서드 오버라이드
  • 메서드 오버로드
  • 인터페이스(interface) 소개와 기능
  • 다형성(Polymorpism) 소개와 기능
  • 합성(Composition) 소개와 기능
  • 모듈 소개와 기능
  • ECMAScript Module
  • AMD Module
  • CommonJS Module
  • TypeScript에서 jQuery 사용하기
03.

Angular 2.0 준비, Twitter Bootstrap UI 핵심내용


이번 단계에서는 결과물 제작에서 사용하는 Bootstrap 핵심내용을 다룹니다.

  • Bootstrap 소개
  • Bootstrap 기본 기능 둘러보기
  • Bootstrap 사용방법
  • 핵심기능
  • 그리드 시스템 소개와 사용법
  • 핵심 CSS
  • 핵심  컴포넌트
  • 실습: 메모장 웹앱 제작 단계 01. 화면 제작하기
04.

Angular 2.0 학습, 기초: Component와 Template


이번 단계에서는 Angular 2.0의 가장 기본이 되는 Component와 Template 내용을 다룹니다.

  • 개발환경 설정
  • 에디터 설정
  • 컴파일 방법
  • Angular 2.0 전체 기능 둘러보기
  • 한 눈으로 확인하는 Angular 2.0 기능 둘러보기
  • Module이란?
  • Component란?
  • Directive란?
  • Pipe란?
  • Router란?
  • Service란?
  • Binding이란?
  • 의존성 주입(DI)이란?
  • MVC란?
  • Angular 2.0 기본 어플리케이션 구조
  • 실습: 무작정 따라하는 Hello 웹앱
  • 실습: 메모장 웹앱 제작 단계 02. 기본 구조 잡기
  • Component #01 Component 기초
  • Component 기본 구조
  • 템플릿 기본 구조
  • 데이터를 템플릿에 출력(바인딩)하기
  • 스타일 정의 방법
  • 실습: 메모장 웹앱 제작 단계 03. 메모 리스트 페이지 제작
  • 템플릿 문법 #01 데이터 바인딩
  • 단방향(모델 데이터 -> 템플릿에 출력)
  • 단방향(템플릿 입력 데이터-> 모델 데이터에 적용)
  • 양방향(모델 데이터 -> 템플릿 입력 데이터)
  • 이벤트 등록 방법
  • 속성 바인딩
  • 스타일 바인딩
  • 클래스 바인딩
  • 실습: 메모장 웹앱 제작 단계 04. 메모 리스트 페이지에 스타일 적용, 메모 보기 페이지 제작
  • 템플릿 문법 #02 기본 지시문
  • ngClass 지시문
  • ngStyle 지시문
  • ngFor 지시문
  • ngIf 지시문
  • ngSwitch 지시문
  • 실습: 메모장 웹앱 제작 단계 05. 메모 삭제 기능 추가, 메모 리스트 페이지 기능 추가(메모가 없는 경우)
05.

Angular 2.0 학습, 초중급: Service와 Directive 그리고 Pipe


이번 단계에서는 데이터 처리를 담당하는 Service와 Pipe를 다룹니다.

  • Angular 2.0 Component #02
  • 부모 컴포넌트 데이터를 자식 컴포넌트에서 사용하기
  • 자식 컴포넌트 데이터를 부모 컴포넌트에서 사용하기
  • @ViewChild,@ViewChildren, @ContentChild, @ContentChildren  사용법
  • 부모 컴포넌트와 자식 컴포넌트 간의 데이터 연동
  • 실습: 메모장 웹앱 제작 단계 06. 메모 보기 페이지 기능 수정
  • Angular 2.0 Service #01 Service 기초
  • 의존성 주입(Dependency Inection) 이란?
  • Service 기본 구조
  • 컴포넌트에 Service 주입하기
  • 실습: 메모장 웹앱 제작 단계 07. 메모 관리 서비스 추가, 메모 리스트 페이지 기능 수정(서비스와 연동처리)
  • Angular 2.0 Service #02 Service 추가내용
  • Provider 소개와 활용
  • 문자열 주입하기
  • Service 생성시 초기값 설정
  • Angular 2.0 사용자 정의 지시어 #01 Attribute Directive 제작
  • Attribute Directive 구조
  • Component vs. Directive 차이점
  • 실습: 메모장 웹앱 제작 단계 08. 읽기 상태 출력을 Attribute Directive로 제작, 메모 리스트 페이지 기능 수정
  • Angular 2.0 사용자 정의 지시어 #02 Structural Directive 제작
  • Structural Directive 구조
  • Attribute Directive vs. Structural Directive 차이점
  • 실습: 메모장 웹앱 제작 단계 09. 메모 리스트 페이지 기능 수정
  • Angular 2.0 Pipe
  • Pipe 구조
  • 실습: 메모장 웹앱 제작 단계 10. 읽은 상태의 메모만을 걸러내는 기능을 파이프로 제작
06.

Angular 2.0 학습, 중급: 라우터와 모듈


이번 단계에서는 Angular 2.0 중급 내용인 서버 데이터 연동처리와 라우터 그리고 모듈화 방법을 다룹니다.

  • Angular 2.0 서버 연동/Http 모듈 활용
  • RxJS 기본 사용법
  • Promise 기본 사용법
  • HttpModule 소개
  • Http 객체 기본 사용법
  • Angular 2.0 과 서버간의 데이터 연동 방법
  • 문자열 방식으로 데이터 주고 받기
  • JSON 방식으로 데이터 주고 받기
  • 실습: 메모장 웹앱 제작 단계 11. 메모 관리 서비스 수정(가상 데이터를 실제 서버 데이터로 변경), 메모 리스트 페이지 기능 수정
  • Angular 2.0 Router #01 라우터 기초
  • 라우터 관련 기본 객체 소개와 기능 둘러보기(RouterModule, Router, Route, Routes, ActivatedRoute, Route Guards)
  • 라우터를 활용한 웹 페이지 구조 잡기
  • 라우터를 활용한 페이지 이동 방법
  • 실습: 메모장 웹앱 제작 단계 12. 라우터를 활용한 페이지 제작
  • Angular 2.0 Router #02 라우터 중급
  • 라우트 가드 소개와 기능 둘러보기(CanActivate, CanActivatedChild, CanDeactivate, Resolve, CanLoad)
  • 자식 라우트 소개와 활용법
  • 실습: 메모장 웹앱 제작 단계 12. 자식 라우터 활용한 페이지 제작
  • Angular 2.0 Module 모듈을 활용한 구조화 작업
  • 모듈화를 적용한 웹앱 제작 소개
  • 모듈 소개와 기능 둘러보기(CoreModule, SharedModule, FeatureModule, LazyModule)
  • CoreModule 만들기
  • SharedModule 만들기
  • FeatureModule 만들기
  • 동적으로 자식 모듈 로딩해서 사용하기
  • 실습: 메모장 웹앱 제작 단계 13.리팩토링: 모듈을 활용한 구조화 작업

정가 108만원 > 조기등록 할인가 100만원(2월 22일까지)