프런트엔드 커리큘럼

2019 front-end curriculum



STEP 1. JavaScript Programming
contents
Fundamentals
- Development tool (VSCode)
- unix basic command
- git / github
Node.JS
- npm project
- package.json, npm install
- Modules
- VSCode debugging
JavaScript Syntax
- type, string, scope(let,const,var), operator, switch, iterator, condition
Function
- declaration and expression
- arguments, parameter
- call stack
- arrow function
Function based programming design
- divide by subroutine
- rest parameter, default parameter
- destructuring
- recursion
Collection
- Array (Handling Array, high-order functions, spread operator)
- Object (Object literal, Handling Object property)
- Set & Map
String
- String manipulation, methods
- Regular Expressions
ES 2015+ (destructuring, const, let, arrow, spread operator, for-of...)
Asynchronous basic
- setTimeout
- JS Stack & callback queue & Event loop
Clean code
- software maintenance
- maintainable code, readable code
- coding convention
JavaScript 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
- tokenizer
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)
- CSS debugging(Chrome Dev tools)
DOM Manipulation
- HTML & DOM
- DOM properties & method
- DOM manipulation(append, delete, move..)
Event handling.
- EventListener, Event object
- bubbling/capturing, delegation
- preventDefault, stopPropagation
- keyboard event
- form control
- handling css properties(classList..)
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 (Flex, CSS Grid layout)
- preprocessor (Sass)
- Responsive Web Design
- CSS Typed Object Model
Mobile Web
- Touch Events
- Flicking UI Components
- 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
Asynchornous technique
- promise APIs
- generator
- Async/await
- Erros handling
Front-End Build
- NPM
- build(webpack, parcel)
- Transpiling (babel)
Web Service Architecture patterns
- ES6 Modular Programming
- decoupling data & view
- Observer pattern (pub/sub pattern)
- Reactive Programming (using Proxy object)
SPAs
- Understanding SPAs
- history API & URL Routing
- fetch and indicator
- data cache & localStroage & KVStorage
JavaScript Type System (TypeScript)
Framework & React concepts
- background & philosophy
- Renderng flow
- React features
- virtual DOM concepts
- states & props
- Hooks API
- JSX Syntax
React Practices
- CRA based projects (step by step)
React state management
- Flux Architecture
- useReduce
- Context API
- Redux
- Async control
React Projects
- Hooks based design
- Advanced Technique (useMemo, Suspense, Lazy, Concurrent mode)
- css libraries (styled components, material UI...)
- Jest
Progressive Web Apps
- Service worker
- Fetch API
- Cache API and Cache strategy
- offline
- push notification and push API