$$config title: 2022.07.18 [YOUTUBE][공부로그] keywords: - 웹개발 로드맵 - 프론트엔드 $$ [YOUTUBE링크](https://www.youtube.com/watch?v=TTLHd3IyErM) [KakaoTV링크](https://tv.kakao.com/channel/4014887/cliplink/430519555) # 프론트엔드 로드맵 ## Basic Tools ##### 개발툴 설정 Computer - [Text Editor] VS CODE★ IntelliJ Atom Sublime Text
- [Browser] Chrome★ (타 브라우저에서도 잘 작동하는지 테스트 필요)
- [Terminal] Powershell Bash zsh
## Front-end ##### 프론트엔드 지식 상당히 많기 때문에 하나하나 외우는게 아니라 찾아가는 능력, 크게 맥락부터 이해하는 능력 필요 - [HTML] Tags Page Structure(페이지구조) Semantic Tags(시멘틱태그) SEO Accessibility(접근성)
- [CSS] Styling Layouts(flex grid) Responsive Design(반응형, 속성, 미디어쿼리, 애니메이션)
- [JavaScript] ES6+ Syntax (문법)

Basic let,const if,for,switch,while function object
Advanced Prototype Hoisting Scope Closure

[Browser APIs] DOM Manipulation Events Fetch API(Async)
## Tools ##### 생산성을 높이기 위한 툴 [CSS]
- BEM(css에서 클래스선언에 도움을줌) Sass Less PostCSS (css의 문제점. 반복적으로 작성하는 문법이 많은데 이걸 보완해줌)
- CSS Framework (Bootstrap) 미리 만들어진 UI요소에 class 네이밍만 하고 사용가능 Bootstrap Tailwind CSS Material UI Styled-Components
- JavaScript TypeScript(JavaScript + 안정성, 객체지향 등 중요함!!)★
- JavaScript Framework React (가장많이쓰임)★ Vue Angular Svelte(성장중) 여기까진 SPA.
그 다음의 문제를 보완한 - SSG(Static Site Generators) / SSR(Server side Rendering) Gasyby(React) Next.js(React)
- 보관 유지 보수 배포툴 Git (Verstion Control System) Github Bitbucket Gitlab
- PackageManager npm yarn ModuleBundler Webpack
## Testing - 코드 테스팅 Test Pyramid Jest Cypress Enzyme react-testing-library
Good Test Principles(어떻게 코딩해야 좋은지)
CI/CD (문제가 있다면 배포가 되지 않게해줌) ## Publish - 배포
Github Pages★ Netlify Heroku AWS Vercel Azure