웹 프론트엔드 개발자가 공부할 것들

edwith 부스트코스 웹 프로그래밍 강의 과정 중, 웹 프론트엔드 개발자가 공부할 것들과 순서에 대한 내용이 있었다.

블로그에 포스팅해두고 하나씩 공부해나가면 좋을 것 같아 포스팅한다.

 

 

 

1. JavaScript Programming (with nodeJS)

 

프로그래밍의 기본이 될 수 있는 언어의 특징을 아는 것 + 프로그래밍 능력이 중요!

 

• IDE (with nodeJS)
• Version control (Git)
• Variables, Scope, Type, String (ES2015 based syntax)
• operator, switch, iterator, condition
• Function
  • - declaration and expression
  • - arguments property & return
  • - call stack
• Array
  • - Array
  • - methodsObject
  • - Object
  • - methods
• Object literal pattern & this keyword (this 헷갈리기 쉽지만 알아야 한다ㅜㅜ)
• bind, apply, call methods
• String manipulation (문자열 처리)
• Regular Expressions (정규표현식)
• Asynchronous(비동기) basic
  • - setTimeout
  • - nodeJS user Input
• JavaScript clean code
• JavaScript debugging
  • - nodeJS debugging
  • - Chrome dev tools(source, console panel)
• programming design(설계) basic

 

 

 

2. Browser Web development Basic (브라우저 웹 개발 기초)

 

브라우저에서 동작되는 웹 개발을 이해해야 함.

자바스크립트라는 도구를 이용하여 브라우저 웹 개발을 하는 것(웹 사이트 만들기)부터 해보기.

• Understanding HTTP (HTTP에 대한 쉬운 책으로 공부해볼 것)
  • - Web architecture
  • - URI
  • - HTTP (header, method, status, cookie, session)
• How Browser works
• frontend-backend R&R (R&R은 책임과 역할이란 의미, 협업을 위한 지식 필요)
• HTML
  • - structured design
  • - semantic tags
  • - Class and ID properties
• Scope and Closure (변수의 유효 범위)
• CSS
  • - properties
  • - selector
  • - layout(float, position, boxmodel)
• Debugging (with Chrome developer tools)
  • - elements, networks panels
• DOM Manipulation
  • - traversal, append, delete, move
• Event handling.
  • - EventListener
  • - Event object
• Event handling.
  • - delegation and bubbling/capturing
• Event handling
  • - keyboard control
• HTML Templating
  • - string replace.
  • - understanding templating strategy
• HTML Templating
  • - Using library
  • - ES2015 template literal
• Style property handling
• Ajax & JSON
  • - Using XMLHttpRequest
  • - CORS
• Ajax-cache & localStorage
• Object-oriented JavaScript
  • - Prototype based design.
• Module pattern
• Understanding ES2015 (ES2015 = ES6,  ES6은 ES5의 어떤 점을 보완하여 나온 건지 알아두면 좋음)
  • - let, const, arrow Function
  • - spread operator, rest parameter, destructuring
  • - Classes, Proxy
• Web animations
  • - animation basic.
  • - CSS3 animation (Transition and transform)
  • - JavaScript & CSS3 animation control.
  • - JavaScript animation
• UI Component
  • - Slide
• UI Component
  • - Tab UI
• UI Component
  • - Layer
• UI Component
  • - search bar auto-complete
• Form control
• Back-End application (nodeJS)
  • - nodeJS web application and Express
  • - URL Routing and HTTP Response
  • - View Engine
  • - APIs
• Programming design advanced
• UX programming - thinking. (사용자를 이해하는 관점 필요)
  • - UX improving programming

 

 

 

 

3. Browser Web development Advanced (브라우저 웹 개발 고급)

 

좀 더 규모 있는 서비스 개발을 위해 필요한 효율적이고 성능 좋은 고급 코드, 디자인 패턴, 방법론, 도구 등

3단계를 먼저 하기도 하는데 (예를 들자면 기본 웹 개발보다 유행하는 프레임워크 공부, 모바일 웹 등부터 시작)

스텝을 밟아가며 차근차근해나가는 게 더 좋을 듯 (주니어 개발자에겐 1,2만 충분히 해도 할 게 많음)

 

• CSS Layout
  • - Flex,
  • - CSS Grid layout
• CSS Preprocessor
  • - SASS
• Responsive Web Design (반응형 웹 디자인)
• Mobile Touch Events.
• Mobile UI Component
  • - Flicking UI (infinite-slide)
• Using JavaScript library
  • - handlebar, UI Component(plugin)
• Functional programming
  • - reduce, partial, currying
  • - function compose, pipline
  • - lodash.js (함수형 프로그래밍)
• File-Uploader
• design pattern
  • - proxy
  • - Observer
  • - MVC
  • - Inheritance
• Asynchornous technique
  • - Promise
  • - generator
  • - Async/await (깊게 알수록 경쟁력 있는 개발자가 될 것)
• UI Unit test
  • - How to write UI Unit test
  • - Using Mocha
  • - Using Mock
• Front-End Build
  • - NPM
  • - Webpack build (이 위주로 많이 보일 텐데, 이 Webpack이 뭘 도와주는 건지 생각해보면 좋을 듯)
  • - Transpiling
• Debugging advanced
• Understanding SPAs (모바일 페이지 관련 기술들 알아야 하고, UX 관점이 중요하다)
• SPAs
  • - ES6 Modular Programming
  • - Architecuture Design (like Flux Architecture)
  • - Resuable component
  • - Routing & History API
• UX Programming
  • - Improved Usability
  • - lazy loading
  • - Ajax and indicator
  • - Progressive Web Apps(offline & Web App loading)
• Typescript
• JavaScript Frameworks overview
• Web animation control
  • - pause/resume
  • - throttling
  • - minimizing browser reflow
• Code quality
  • - linting
• React framework (프론트엔드 프레임워크로 React가 가장 유명하고 많이 쓰지만, 다른 것도 많다)
  • - background & philosophy
  • - Renderng flow.
  • - React features
  • - virtual DOM
  • - components life cycles
  • - states & props
  • - JSX Syntax
• React Practices
  • - CRA based mini projects (step by step)
  • - Write React Component
  • - Higher order components
  • - Presentational/Container components
  • - immutable & shoouldComponentUpdate
• React + Data flow(Redux)
  • - Flux Architecture
  • - Examples
• React + Async
  • - generator and Redux-saga

 

 

 

 

 

 

---

 

 

 

 

출처)

edwith 부스트코스 웹 프로그래밍

- #참고. 웹프론트엔드 개발자가 공부할 것과 공부 순서 (V)