👌 프론트엔드 로드맵
로드맵에 따라서 하나하나 차근차근 공부해보자!
✔ 인터넷
인터넷은 어떻게 작동될까요?HTTP는 무엇일까요?- 브라우저의 동작 원리
- DNS와 작동 원리
- 도메인 네임은 무엇일까요?
- 호스팅은 무엇일까요?
✔ HTML
기초 배우기- 의미론적인 HTML 작성
- 폼과 유효성 검사
- 컨벤션과 모범 사례
- 접근성
- 기본 SEO
✔ CSS
기초 배우기- 레이아웃 만들기
- Float
- Positioning
- Display
- Box Model
- CSS Grid
- Flex Box
반응형 디자인과 미디어쿼리
✔ JavaScript
구문과 기본 문법DOM 조작 방법 배우기- Fetch API / Ajax (XHR) 배우기
- 모듈러 JavaSCript와 ES6+ 배우기
- 개념 이해하기:
호이스팅, 이벤트 버블링, 스코프 프로토타입, Shadow DOM, strict
✔ 버전 관리
Git 기본 사용법GitHub
✔ 웹 보안 지식
- HTTPS
- CORS
- 컨텐츠 보안 정책
- OWASP 보안 취약점
✔ 패키지 매니저
npm- yarn
✔ CSS 구조
BEM
✔ CSS 전처리기
- Sass
- PostCSS
✔ 빌드 도구
- 태스크 러너
- npm scripts
- Linters 및 Formatters
- Prettier
- ESLint
- 모듈 번들러
- Webpack
- Rollup
- Parcel
✔ 프레임워크
- React.js
- Redux
- MobX
- Angular
- RxJS
- NgRx
- Vue.js
- VueX
✔ 현대의 CSS
- Styled Components
- CSS Modules
- Styled JSX
- Emotion
✔ 웹 컴포넌트
- HTML Templates
- Custom Elements
- Shadow DOM
✔ CSS 프레임워크
- JS 기반
- Reactstrap
- Material UI
- Tailwind CSS
- Chakra
- CSS 기반
- Boostrap
- Materialize CSS
- Bulma
✔ 앱 테스트
- Jest
- react-testing-library
- Cypress
- Enzyme
✔ 타입 검사
- TypeScript
✔ Progressive Web Apps
- PWA 웹 API
- Storage
- Web Sockets
- Service Workers
- Location
- Notifications
- Device Orientation
- Payments
- Credentials
- 계산, 측정, 성능 향상
- PRPL Pattern
- RAIL Model
- 성능 분석
- Using Lighthouse
- Using DevTools
✔ 서버 사이드 렌더링 (SSR)
- React.js
- Next.js
- Angular
- Universal
- Vue.js
- Nuxt.js
✔ GraphQL
- Apollo
- Relay Modern
✔ 정적 사이트 생성기
- Next.js
- GatsbyJS
- Nuxt.js
- Vuepress
- Jekyll
- Hugo
✔ 모바일 어플리케이션
- React Native
- NativeScript
- Flutter
- Ionic
✔ 데스크탑 어플리케이션
- Electron
