Table of Contents

Front-end Skills
- Prepare
- Basic
  - Tools
  - Testing
  - Publish
- Tools
  - Front-End Frameworks

Front-end Skills

Prepare

Computer; MacOS, Windows, Linux
Browser; Chrome, Edge, Safari, Firefox
Rext Editor; VS Code, IntelliJ, Atom, Sublime Text
Terminal; Powershell, Bash, zsh

Editor; VSCode, WebStorm,…
Browsers; Chrome, Edge, Firefox, Safari, …

Basic

HTML; HTML Tags, Page Structure, Semantic Tags, SEO, Accessibility …
CSS; Styling, Layouts, Responsive Design, Animation, Sass, less, PostCSS, …
JavaScript; ES6+ Syntax, Browser APIs,… → TypeScript
- 언어 고유의 기능
- 브라우저 관련 기능

ES6+ Syntax
- Basic;
  - let, const
  - if, for switch, while
  - function
  - object
- Advance;
  - Prototype
  - Hoisting
  - Scope
  - Closure
Browser APIs;
- DOM Manipulation
- Events
- Fetch API (Async)

CSS
- Architecture; BEM
- Preprocessors; Sass, Less, PostCSS
- CSS Framework

JavaScript → TypeScript; Types, OOP
- JavaScript Framework; React, Vue, Angular, Svelte

SPA
Static Site Generators(SSG)
- Gatsby (React)
- GridSome (Vue)
- 11ty (JS)
Server Side Rendering (SSR)
- Next.js (React)
- Nuxt.js (Vue)
- Universal (Angular)
- Sapper (Svelte)

Tools

Git; Version Control System, GitHub, Bitbucket, GitLab
Package Manager; npm, yarn
Module Bunder; Webpack, Rollup, Parcel

Testing

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

Publish

Azure, AWS, Github Pages, Netlify, Vercel, Heroku

Tools

Package Manager; npm, yarn
Module Bundler; Webpack,
SCM; github, gitlab

Front-End Frameworks

Vue.js Vuetify.js Nuxt.js Vue.js
React React ( + Redux )
MobX ( React + MobX )
AngularJS ( Angular 1 )
Angular ( Fromerly known as Angular 2 )
TypeScript TypeScript
Ember
Knockout
Polymer
Riot

References

public:computer:front-end-frameworks · 2022/04/28 15:29 · alex