seco / tutorial-angular

Introduction

Goal

• ECMAScript ⇒ TypeScript ⇒ Angular 순서로 학습합니다.
• 기초를 탄탄하게 구축합니다. 기초없는 건물은 사상누각일 뿐 입니다. 앵귤러라는 건물을 탄탄한 기초위에 세우신다면 자바스크립트 개발자로서 전반적인 실력이 동반상승합니다. 우리에게 정말 필요한 것은 툴 사용법이 아닙니다. 무엇이든 할 수 있다는 자심감과 하고 싶다는 호기심 그리고 빠르게 적응할 수 있는 내공이 필요합니다.
• 암기는 지양하고 흐름을 지향합니다. 문법을 외우지 마세요. 문법의 탄생배경을 이해하려고 노력하세요.
• 개념은 되도록 간단하게 정리하고 코드를 통해서 원리를 이해합니다. 코드를 다이어그램으로 다이어그램을 코드로 바꿔가면서 학습하세요.
• 앵귤러를 사랑하게 되고 다른 개발자들에게 추천하는 행동을 보이는 자신을 발견하게 됩니다. 좋아하게 되면 발전하는 것은 알아서 됩니다.
• 최대한 개념은 간단하게 정리합니다. 설명이 길수록 삼천포를 빠질 확률이 높아집니다.
• 실습위주로 학습합니다. 개념부분을 제외하고는 대부분의 설명은 마치 프로젝트를 수행하는 듯하게 코드를 작성하면서 진행합니다. 학습을 마치면 바로 시작할 수 있다는 자신감을 덤으로 얻게 됩니다. 실무에 적용할 수 있는 코드를 통해서 배우고 익혀 프로젝트에 바로 적용할 수 있는 결과물을 이용할 수 있습니다.
• 실습은 선 작업 후 설명 방식으로 진행됩니다. 학습의 목적은 코드를 읽을 수 있는 능력을 얻는 것이어야 합니다. 먼저 작업을 하면서 무엇을 위한 코드인지 생각합니다. 설명을 먼저 보지 마세요. 호기심은 곧 집중력으로 이어집니다. 이러한 호기심을 가지고 설명을 확인합니다. 이렇게 진행하면 같은 시간에 2배의 학습효과를 기대할 수 있습니다.
• 반복은 선택이 아닌 필수입니다. 도공이 같은 자기를 몇 번이나 만들어 봤을까요? 서예가는 같은 글자를 몇 번이나 써봤을까요? 피아니스트는 같은 곡을 몇 번이나 쳐봤을까요? 달인이 되기 위해서는 반복적인 훈련을 필수로 수행하셔야 합니다. 재미있게 반복할 수 있는 팁을 드립니다. 경쟁기술인 Vue.js, React 등으로 작성된 코드를 Angular로 바꿔보세요. 그리고 그 반대도 수행해 보세요. 기술의 차이를 정리하세요. 그러면 여러분은 달인이 된 자신을 발견하실 겁니다. 그리고 자신의 코드를 공개하세요. 공개된 소스를 통해서 배웠으니 자신의 소스도 공개하여 받은 사랑을 나눠주세요.

Version

• OS: win32 x64
• Node: 10.14.1
• Angular CLI: 7.1.1
• Angular: ~7.1.0
• typescript: 3.1.6
• IDE: Atom

Table of Contents

Part Ⅰ. JavaScript's New Wave

• Introduction
• Part Ⅰ. JavaScript's New Wave
• Development Enviroment Settings
• ECMAScript Essence
  • const
  • let
  • Default Parameters
  • Spread Operator
  • Rest Parameter
  • Destructuring Assignment
  • Module System
  • Object Shorthand
  • Template Strings
  • Arrow Function
  • Class
  • Promise
  • Async Await
• TypeScript Essence
  • Types
  • Interface
  • Class
  • Access Modifier
  • Decorator

Part Ⅱ. Angular Basic

• Part Ⅱ. Angular Basic
• Architecture
• Angular CLI
• Routing Ⅰ
• Component
• Binding
• Directive
• Service
• Pipe
• Module

Part Ⅲ. Angular Intermediate

• Part Ⅲ. Angular Intermediate
• Component Life Cycle
• Component Communication
• HTTP Service
• Routing Ⅱ and Guard
• Form Control
• CSS in Angular
• Transclusion

Part Ⅳ. Angular in Action

• Part Ⅳ. Angular in Action
• RxJS
• To Do List by Angular as Chrome Extension
  • by Vue.js
  • by React
• [ngrx]
• Angular Pagination with Node + Express + sequelize
• Angular with Node + Express + JWT
• [Angular with Spring Restful + JPA + MariaDB]
• Logging

Part Ⅴ. New Features of Angular

• Part Ⅴ. New Features of Angular
• Workspace
• Library
• Angular Universal

Appendix

• Appendix
• Bootstrap 4
• Bootstrap Template
• Angular Material
• primeng
• ng-bootstrap
• ngx-bootstrap
• nebular
• [ngx-admin]
• SASS

Hall of Fame

• Hall of Fame
• Pipe Sort

The source code is all below the folder of work.

since: 2018.12.2
author: Seokwon SONG
email: [email protected]

You can call me Chris. Chris is my name too.

이 저작물은 크리에이티브 커먼즈 저작자표시-비영리 2.0 대한민국 라이선스에 따라 이용할 수 있습니다.