Front-End Road Map

Front-End 개발자의 로드맵

1. 인터넷

• 인터넷 동작 원리
• HTTP란?
• 브라우저 동작 원리
• DNS 란?
• Domain Name 이란?
• 호스팅 이란?

2. HTML/CSS/JavaScript

HTML

• HTML 기초
• Semantic HTML
• Form과 유효성 검사
• HTML 컨벤션
• 웹접근성
• SEO 기본

CSS

• CSS 기본
• 레이아웃 작성
• Floats, Positioning, Display, Box Model, CSS Grid, Flex Box
• 반응형, 미디어쿼리

JavaScript

• JS 기본 문법과 구조
• DOM 제어
• Fetch API와 비동기 처리
• ES6+ 와 Modular JS
• 호이스팅, 이벤트버블링, 스코프, 프로토타입, Shadow DOM, Strict 개념 이해

3. Version Control Systems

• Git 기본 사용법
• GitHub, Bitbucket

4. Web Security

• HTTPS
• Content Security Policy
• CORS
• OWASP Security Risks

5. Package Manager

• npm
• yarn

6. CSS Preprocessor & Architecture

• CSS Preprocessor(CSS 전처리기) : Sass, PostCSS 등
• Architecture : BEM

7. Build Tools

• Task Runner : npm scripts
• Module Bundler : Webpack, Rollup, Parcel
• Linters and Formatters : Prettier, ESLint

8. Framework

• React.js
• Angular
• Vue.js

9. Modern CSS

• Styled Component
• CSS Module
• Styled JSX
• Emotio

10. Web Component

• HTML Templates
• Custom Elements
• Shadow DOM

11. CSS Framework

• Reactstrap
• Bootstrap
• Material UI

12. Test

Unit, Integration, Funtional 테스트의 차이 인지하고, Test Tool 활용법 확인

• Jest
• react-testing-library
• Cypress
• Enzyme

13. Progressive Web Apps

PWAs에서 사용하는 다른 WebAPI 학습 필요

• Storage
• Web Sockets
• Service Workers
• Location
• Notifications
• Device Orientation
• Payments
• Credentials

계산, 측성 그리고 더 나은 퍼포먼스

• PRPL Pattern
• RAIL Model
• Performance Metrics
• Lighthouse
• 개발자도구

14. Type Checkers

• TypeScript

15. Server Side Rendering

• ReactJs : Next.js
• Vue.js : Nuxt.js

16. GraphQL

• Apollo
• Relay Modern

17. Static Site Generators

• Next.js
• Gatsby.js
• Nuxt.js
• Vuepress
• Jekyll
• Hugo

18. Mobile Applications

• React Native
• NativeScript
• Flutter
• Ionic

19. Desktop Applications

• Electron

20 WASM

• Web Assembly

참고 2020 프론트엔드 개발자 로드맵