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

• 들어가기 전에 이번에는 웹프론트엔드 개발자로 꿈을 꾸시는 분들에게 설명해 드리고 싶은 이야기입니다. 우리가 여러 가지를 학습하고 있지만, 웹프론트엔드 분야로 개발자의 삶을 꿈꾸신다면 추가로 참고가 되면 좋겠습니다.

---

학습 목표

1. 내가 무엇을 공부라고, 어떤 순서로 공부해야 할지 도움을 얻는다.

학습하기

curriculum

영상에서 설명한 내용입니다. 아래 참고링크에서도 볼 수 있습니다.

STEP 1. JavaScript Programming(with NodeJS)

Contents

• IDE(with nodeJS)
• Version Control(Git)
• Variables, Scope, Type, String(ES2015 based syntax)
• operator, switch, iterator, condition
• Finction - declaration and expression - arguments property & return - call stack
• Array - Array - methodsObject - Object - methods
• Object literal pattern & this keyword
• 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

STEP 2. Browser Web development Basic

Contents

• Understanding HTTP - Web architecture - URI - HTTP(header,method,status,cookie,session)
• How Browser works
• frontend-backend R&R
• HTML - structured design - semantic tags - Class and ID properties
• Scope and Closure
• CSS - properties-selectoe-layout(Float,Position,Boxmedel)
• 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 strayrgy
• HTML Templating - Using library-ES2015 templating literal
• Style property handling
• Ajax & JSON - Using XMLHttpRequest-CORS
• Ajax-cache & localStorage
• Object-oriented JavaScript - Prototype based design.
• Module pattern
• Understanding ES2015-let,const,arrow Function-spread operator,rest parameter, destructuring-Classes,Proxy
• Web animations - animation basic. - CSS3 animation(Transition and transform) - JavaScropt&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