[tips] frontend-loadmap-2022

Published: by Creative Commons Licence

참고

드림코딩-2022웹개발 로드맵

Frontend

Basic Tools

  • computer
  • text editor
    • VS Code
  • Browser
    • Chrome, Edge, Safari, FireFox
  • Terminal
    • powershell

Front-end

  • HTML
    • @ HTML Tags
    • @ Page Structure
    • @ Semantic Tags
    • @ SEO: Search Engine Optimizer
    • @ Accessibility
  • CSS
    • @ Styling
    • @ Layouts
    • @ Responsive Design
    • @ Animation
    • Architecture
      • BEM: 클래스 이름 명명 규칙
    • Preprocessors: 전처리기 문법 -> 순수 CSS로 변환해줌
      • Sass, Less, PostCSS
    • CSS Framework : 미리 만들어진 스타일이 적용되어 있음
      • Bootstrap
      • PostCSS
      • Tailwind CSS
      • Material UI
      • Styled-Components : 자바스크립트에 CSS가 섞여있어 장점- 동적으로 변경 가능, 단점-비즈니스 로직과 섞인다, 성능비효율, 유지보수 힘들다
  • JavaScript
    • @ ES6 +Syntax
      • Basic : let, const if, for, switch, while function object
      • Advanced: prototype hoisting scope closure
    • @ Browser APIs
      • Dom manipulation
      • Events
      • Fetch API(Async)
    • @ TypeScript : Types, OOP
    • Javascript Framework
      • @ React
      • Vue
      • Angular
      • Svelte
    • Static Site Generators(SSG): 기존 SPA(Single Page Application)를 보완해서 나온것
      • Gatsby(React)
      • GridSome(Vue)
      • llty(JS)
    • Server Side Rendering(SSR)
      • @ Next.js(React)
      • Nuxt.js(Vue)
      • Universal(Angular)

Tools

  • Version Control System
    • @ Git
  • Package Manager
    • @ npm
    • yarn
  • Module Bundler
    • Webpack
    • Rollup
    • Parcel

Testing

  • Test Pyramid
    • Jest
    • Cypress
    • Enzyme
    • react-testing-library
  • Good Test Principles
  • CI/CD

Publish

  • Github Pages
  • AWS
  • Vercel
  • Heroku
  • Netlify
  • Azure

Backend

  • public APIs
  • Firebase
  • Backend Roadmap

Web Assembly

  • 자바스크립트 성능을 더 향상 시킬수 있는 방법
  • 자바스크립트 대체가 아닌 성능이 많이 중요한 곳에 사용할 수 있다.

GraphQL <-> RestAPI

  • Apollo
  • Relay

Cross Platform

  • Desktop : Electron
  • Mobile: PWA, Cordova, React Native, Flutter
  • AI: TensorFlow, Synaptic, Brain.js
  • Web 3.0