2020 front-end curriculum




STEP 1. JavaScript Programming

contents
Fundamentals
- Development tool (VSCode)
- unix basic command
- git / github
Node.JS
- npm project
- package.json & module dependencies
- Modules & CommonJS
- VSCode node debugging
JavaScript Syntax
- type, string, scope(let,const,var), operator, switch, iterator, condition..
- ES 2015+ features (destructuring, const, let, arrow, spread operator, for-of)
Function
- declaration and expression
- arguments, parameter
- calling stack
- arrow function
Function based programming design
- subroutine
- rest parameter, default parameter
- destructuring
- recursion
- pure function
Collection
- handling JavaScript data structures
- Array (APIs, higher-order functions)
- Object (Object literal, Handling Object property)
- Set & Map
String
- String manipulation, methods
- Regular Expressions
Asynchronous basic
- setTimeout
- JS stack & callback queue & event loop
Clean code
- software maintenance
- maintainable code, readable code
- coding convention
debugging
- JavaScript Errors
- Error handling
- VSCode or Chrome dev tools(source, console) debugging
OOP programming
- Object-Oriented Programming
- SOLID
- ES Classes and instance(object)
- prototype & Inheritance & Class Extends
- object literal pattern
- this, bind, apply, call
Unit test basic
- unit test basic
- make simple test library
Algorithm training
- complexity,
- stack, queue
- recursion

STEP 2. Browser Web development Basic

contents
Understanding HTTP
- Web Architecture
- Resource & URL
Browser & Server
- How browser works
- How server works (Node.JS simple server)
- request & response
- HTTP (header, method, status, cookie, session)
HTML
- HTML structured design
- semantic tags
- Class and ID properties
- HTML debugging(Chrome Dev tools)
CSS
- style properties
- cascading
- Inheritance
- selector
- layout (float, position, boxmodel, flex)
- CSS debugging(Chrome Dev tools)
DOM Manipulation
- HTML & DOM
- DOM properties & method
- DOM manipulation(append, delete, move..)
Functional Programming
- compose & combinator
- currying & partial application
- iterator & generator
- lazy evaluation
- monad & error handling
- functional asynchronous handling
HTML Templating
- templating strategies
- template literal
Asynchronous communication
- Fetch API
- XMLHttpRequest
- JSON handling
- Promise pattern
- Cross-domian (SOA, CORS, JSONP)
Functional Programming
- scope and closure
- partial, currying
- Immutability
- pipeline & combinator
- iteration protocol (for-of, generator)
- Monad(Either..)
UI Unit test
- DOM, Asynchronous test
- Using Test library (Jest, Mocha)
Web Animations
- understanding web animations
- Browser Rendering pipeline
- CSS property( keyframe, transition, transform)
- requestAnimationFrame & requestIdleCallback
UI Components
- Slide UI (infinite sliding)
- Tab UI
- Search-bar auto-completion
- Reusable Component Design
Web Service Application Architecture
- Modular programming (ES Modules)
- Project structure for Web services
Back-End application Basic(nodeJS)
- Express
- URL Routing and HTTP Response
- template engine & Server-side rendering
- Building a RESTful API
UX programming - thinking.
- UX improving programming.

STEP3. Browser Web development Advanced

contents
CSS Advanced
- Layout (CSS Grid layout)
- preprocessor (Sass)
- Responsive Web Design
- CSS Typed Object Model
Mobile Web
- touch events
- swipe gesture interaction
- mobile web debugging
Performance & UXable technique
- dynamic & mixed animation handling
- throttling & debounce
- minimizing browser reflow
- Lazy loading
- Performance diagnosis (with Chrome Dev tools)
HTTP
- File-Uploader & Mulipart formdata
- session
- token based authentication & jwt
Asynchornous technique
- promise APIs
- generator
- Async/await
- Erros handling
TypeScript
- Types
- union, interface, generics, Enums, Classes, Functions
Front-End Build
- NPM script
- build(webpack, parcel)
- Transpiling (babel)
- setup development & production
SPAs
- Understanding SPAs
- history API & URL Routing
- fetch and indicator
- data cache & localStroage & KVStorage
- module depencies management (Observer pattern)
React Basic
- background & philosophy
- Renderng flow
- React features
- virtual DOM concepts
- states & props
- Styling (styled components, material UI...)
- Hooks API
- JSX Syntax
- CRA based projects (step by step)
- Hooks based component design
React Advanced
- state management (Flux Architecture)
- useReduce, useContext
- Optimization technique (React.memo, useCallbackm, useMemo, Suspense, Lazy)
- Concurrent mode
- React Test (Jest & React testing library)
- SSR
Progressive Web Apps
- Service worker
- Fetch API
- Cache API and Cache strategy
- offline
- push notification and push API

{I LOVE CODESQUAD } 😎