2018 front-end curriculum

출처 : https://github.com/nigayo/front-end-curriculum

STEP 1. JavaScript Programming (with nodeJS)

contents
IDE (with nodeJS)
Version control (Git)
Variables, Scope, Type, String (ES2015 based syntax)
operator, switch, iterator, condition
Function  - declaration and ｅxpression  - arguments property & return - call stack
Array  - Array  - functional methods Object  - Object  - methods
Immutability in JavaScript
Understanding ES2015 - let, const, arrow Function - spread operator, rest parameter, destructuring
OOP JavaScript Basic - understanding OOP. - JavaScript class and object Overview - ojbect literal pattern - this keyword
bind, apply, call methods
String manipulation
Regular ｅxpressions
Asynchronous basic  - setTimeout - nodeJS user Input
JavaScript clean code
JavaScript debugging - nodeJS debugging  - Chrome dev tools(source, console panel)
Unit test basic - understanding unit test - make simple assertion library and test function
Programming design basic
Algorithm training - complexity - stack - recursion - tokenizer (JSON parser)

STEP 2. Browser Web development Basic

contents
Understanding HTTP - Web architecture - URI - HTTP (header, method, status, cookie, session)
How Browser works
frontend-backend R&R
HTML - structured design  - semantic tags - Class and ID properties
Scope and Closure
CSS- properties- selector- layout(float, position, boxmodel)
Debugging (with Chrome developer tools) - elements, networks panels
DOM Manipulation - traversal, append, delete, move
Event handling.  - EventListener- Event object
Event handling. - delegation and bubbling/capturing
Event handling  - keyboard control - Form control
HTML Templating  - string replace. - understanding templating strategy
HTML Templating  - Using library - ES2015 template literal
Style property handling
Ajax & JSON  - Using XMLHttpRequest - CORS - Promise - Ajax-cache & localStorage
OOP JavaScript  - Prototype based design. - Inheritance pattern(Object.create and Class extend) - Module pattern
Understanding ES2015 - Classes - Symbol  - Proxy - Set, Map
Functional Programming - reduce, partial, currying - compose, pipline - lodash.js
UI Unit test  - Using Jest  - DOM, Asynchronous test
Web animations  - animation basic. - CSS3 animation (Transition and transform)  - JavaScript & CSS3 animation control. - JavaScript animation.
UI Components  - Slide UI (infinite sliding) - Tab UI - Layer - Infinite Tree menu - Search bar auto completion - Reusable Component Design.
Back-End application (nodeJS) - nodeJS web application and Express - URL Routing and HTTP Response - View Engine - APIs
Web Service Application Architecture - MVC - Project structure.
UX programming - thinking. - UX improving programming.

STEP3. Browser Web development Advanced

contents
CSS Layout  - Flex,  - CSS Grid layout
CSS Preprocessor  - SASS
Responsive Web Design/
Mobile Touch Events.
Mobile UI Component - Flicking UI (infinite-slide)
- Progressive Web Apps  - Service worker  - Fetch API - Cache API and Cache strategy - offline - push notification and push API
Web animation control  - pause/resume  - throttling  - minimizing browser reflow
Using JavaScript library
File-Uploader
Asynchornous technique  - Promise advanced - generator - Async/await
Front-End Build - NPM - Webpack build - Transpiling(babel)
Debugging advanced -Chrome dev tools (memory, performance, audits)
SPAs - Understanding SPAs - ES6 Modular Programming - Behavioral Design Pattern (Observer) - Routing & History API - Lazy loading - Ajax and indicator
Typescript.
Code quality - linting
React framework  - background & philosophy  - Renderng flow.  - React features  - virtual DOM  - components life cycles  - states & props  - JSX Syntax
React Practices  - CRA based mini projects (step by step) - Write React Component - Higher order components - Presentational/Container components - immutable & shoouldComponentUpdate
React + Data flow(Redux)  - Flux Architecture  - Examples
React + Async  - generator and Redux-saga