2022 web front-end roadmap
| 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, closure, operator, switch, iterator, condition.. - ES2015+ features (destructuring, const, let, arrow, spread operator, for-of) - New feature (Dynamic import, Nullish Coalescing, Optional Chaining..) |
| Function - declaration and expression - arguments, parameter - calling stack - arrow function |
| Function based programming design - subroutine - rest parameter, default parameter - destructuring - recursion - pure function |
| Collection - JavaScript data structures - Array (APIs, Higher-rder 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 - Classes and instance(object) - prototype & Inheritance & Class Extends - object literal pattern - this, bind, apply, call |
| Unit test basic - unit test basic - understanding testing (why software testing is important?) |
| Algorithm training - complexity - stack, queue - recursion - search algorithm - sort |
| contents |
|---|
| Understanding HTTP - Web Architecture - Resource & URL |
| Browser & Server - How browser works (Browser render cycle) - 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..) - DOM traversal |
| Functional Programming - Pure function - Immutability - Function Compose & Combinator - Closure - Currying & Partial application - Iterator & Generator - Lazy evaluation - Monad & error handling - Functional asynchronous handling |
| HTML Templating - templating strategies - template literal |
| Asynchronous communication - Fetch API , axios library - JSON - Promise pattern - Cross-Domian (SOP, CORS, JSONP) |
| UI Unit test - DOM, Asynchronous test - Using Test library (Jest) |
| Web Animations - understanding web animations - Browser Rendering pipeline - CSS property( keyframe, transition, transform) - requestAnimationFrame & requestIdleCallback |
| Resuable UI Components - Reusable Component Design - Practices - Slide UI (infinite sliding) - Tab UI - Search-bar auto-completion |
| 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 |
| 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 - PWA(service worker) |
| Performance & UXable technique - Performance Diagnosis & Analysis - Dynamic & mixed animation handling - Throttling & Debounce - Minimizing browser reflow - Lazy loading |
| 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) - Development & Production mode |
| Front-End Env - Linting(Eslint) - Prettier |
| SPAs - Understanding SPAs - URL Routing & History API - Fetch and Indicator - Cache & LocalStorage - Observer pattern |
| React Basic - background & philosophy - Renderng flow - React features - diff algorithm - states & props - Styling (CSS-in-JS) - Styled Component, Emotion - Hooks API - JSX Syntax - CRA based projects (step by step) - Hooks based Component Design |
| React Advanced - state management - Flux, Recoil, react-query, SWR - useReducer, useContext - Optimization technique (React.memo, useCallback, useMemo, Suspense, Lazy) - Concurrent mode - React Test (Jest & React testing library) - SSR - Server Component |
| Web Multimedia APIs - Audio, Video Element - Web Socket - WebRTC - Canvas, WebGL, SVG - Web Audio API - Web MIDI API - Web Speech API - Web VR |
{CODESQUAD } 😎