만들면서 배우는 Angular 2.0
Out of Stock
기간 2017년 1월 16일부터 2017년 2월 15일
일정 매주 월, 수, 금 저녁 7:30~10:30 (3시간씩 총 36시간)
2017년 1월 27일, 1월 30일 휴무
준비물 개인 노트북
장소 위키아카데미 1강의실(강남역 12번출구)
수강인원 20명 선착순

품절

리뷰

아직 리뷰가 없습니다.

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

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

Need Help? Contact Us Leave Feedback

Category: .

Share

수강대상

단기간에 Angular 2.0을 습득하려는 개발자

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

강사소개

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

초보자를 위한 만들면서 배우는 Angular 2.0의 특징 및 진행 방식

기초부터 탄탄히

이번 강의는 Angular 최신 버전인 2.0을 기초부터 자세히 학습할 수 있는 강의 입니다.

단계별로 만드는 웹앱

하나의 웹앱을 단계별로 나눠 제작하는 방식으로 진행함으로써 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만원(2017년 1월 7일까지)