[웹 프로그래밍] 웹 개발 로드맵

웹 개발자 연봉 글로벌 / 미국 평균 연봉

백앤드 개발자 ; 9500~ / 1.3억~

프론트앤드 개발자 ; 1억~ / 1억 1천~

풀스택 개발자 ; 1억 1천~ / 1억 2천~

- 날이 갈수록 웹개발자 수요 많아지는 중

 

 

프론트앤드 개발 순서

1. Basic Tools 

; 개발 툴 공부

- 컴퓨터

- Text Editor(VS code, Intellij, Atom, Sublime Text 등) 필요

- 브라우저(Chrome, Edge, Safari, Firefox)

- Terminal(Powershell, Bash, zsh)

 

2. Front-end 

- HTML 

HTML Tags, Page Structure, Semantic Tags(어떨 때 어떤 태그를 쓰는것이 의미 있는지), SEO(특정한 키워드로 네이버에 검색했을 때 우리 사이트가 나올 수 있도록), Accessibility(접근성) 공부 필요

- CSS

Styling, Layout(아이템 배치), Responsive Design, Animation

- JavaScript 

ES6+ Syntax(JS 문법) ; Basic(let,const/if,for,swtich,while/function/object), Advanced(Prototype,Hoisting,Scope,Closure)

Browser APIs(브라우저 內 다양한 함수들) ; DOM Manipulation, Events, Fetch API

# 전부 외울 수는 없음. 적용하는 능력, 찾아가는 능력을 익힐 것

 

# CSS 심화공부

Architecture - BEM ; CSS 방법론. Block__Element--Modifier로 이름 짓는 법 -> 배울 필요는 x

Preprocessors - Sass, Less, PostCSS ; 반복적인 작성 줄여줌

CSS Framework - BootStrap, PostCSS, Tailwind CSS, Material UI, Styled-Components

 

# JS 심화공부

Type, OPP - Typescript ; 안정성 추구, 유지보수성 높음

JS Framework ; React(40%), Vue(18%), Angular(22%), Svelte

Static Site Generators(SSG) ; Gatsby(React), GridSome(Vue), 11ty(JS)

Server Side Rendering(SSR) ; Next.js(React), Nuxt.js(Vue), Universal(Angular), Sapper(Svelte)

 

프론트엔드 공부 순서 정리

HTML>CSS>JS(ES6+Syntax, Browser APIs)>React>Next.js>TS

 

3. Tool

- Front-end와 병행하며 공부

- Version Control System ; GitHub, GitBucket, GitLab

- Package Manager ; npm, yarn

- Module Bundler ; Webpack, Rollup, Parcel

(따로 공부할필요는 없음. 설정은 이미 되어있음)

 

4. Testing

- Test Pyramid ; Jest, Cypress, Enzyme, React-testing-library

- Good Test Principles

- CI/CD  

(취업 전이라면 모든것 마스터하기 전까지는 비추)

 

5. publish 

- AWS, Netflify, Github Pages, Azure, Vercel, Heroku

 

 

---

Reference

https://www.youtube.com/watch?v=TTLHd3IyErM&t=1392s