프론트엔드 로드맵 따라 공부해보자!
관련 내용을 배우면 관련글로 하나씩 정리하기

01 Internet

• 인터넷은 어떻게 작동될까요?
• http는 무엇일까요?
• 브라우저의 동작원리
• dns의 동작원리
• 도메인 네임은 무엇일까요?
• 호스팅은 무엇일까요?

02 HTML

• HTML 기초
• 의미론적(Semantic)인 HTML 작성
• 폼과 유효성 검사
• 컨벤션과 모범 사례(Best Practice)
• 접근성
• 기본 SEO

03 CSS

• CSS 기초
• CSS 레이아웃
  • Floats
  • Positioning
  • Display
  • Box Model
  • CSS Grid
  • Flex Box
• 반응형 디자인과 미디어 쿼리

04 JavaScript

• 구문(Syntax)과 기본 문법
• DOM 조작 방법 배우기
• Fetch API/Ajax(XHR)배우기
• 모듈러 Javascript와 ES6+ 배우기
• 개념 이해하기
  • 호이스팅
  • 이벤트버블링
  • 스코프
  • 프로토타입
  • Shadow DOM
  • strict

05 버전 관리

• Git 사용법
• 저장소 호스팅 서비스
  • GitHub
  • Gitlab
  • Bitbucket

06 웹 보안지식

• 최소한의 기본지식
  • HTTPS
  • CORS
  • 콘텐츠 보안 정책
  • OWASP 보안 취약점

07 패키지 매니저

• npm
• yarn

08 CSS 구조

• BEM
• OOCSS
• SMACSS

09 CSS 전처리기

• Sass
• PostCSS
• Less

10 빌드도구

• 태스크 러너
  • npm scripts
  • Gulp
• 모듈 번들러
  • Webpack
  • Rollup
  • Parcel
• Linters 및 Formatters
  • Prettier
  • ESLint
  • Standard JS

11 프레임워크 선택

• React.js
  • Redux
  • MobX
• Angular
  • RxJS
  • NgRx
• Vue.js
  • VueX

12 현대의 CSS

• Styled Components
• CSS Modules
• Styles JSX
• Emotion
• Radium
• Glamorous

13 웹 콤포넌트

• HTML Templates
• Custom Elements
• Shadow DOM

14 CSS 프레임워크

• Reactstrap

• Material UI

• Tailwind CSS

• Chakra

• Bootstrap

• Materialize CSS

• Bulma

15 APP TEST

• Jest
• react-testing-library
• Cypress
• Enzyme

---

• Mocha
• Chai
• Ava
• Jasimin

---

16 타입 검사

• TypeScript
• Flow

---

17 Progressive Web Apps

• Storage
• Web Sockets
• Service Workers
• Location
• Notifications
• Device Orientation
• Payments
• Credentials

---

• PRPL Patterns
• RAIL Model
• 성능 분석
• Using Lighthouse
• Using Dev Tools

---

18 서버 사이드 렌더링(SSR)

• React.js
  • Next.js
  • After.js
• Angular
  • Universal
• Vue.js
  • Nuxt.js

---

19 GraphQL

• Apollo
• Relay Mordern

---

20 정적 사이트 생성기

• Next.js
• GatsbyJS
• Nuxt.js
• Vuepress
• Jekyll
• Hugo

---

21 모바일 어플리케이션

• React Native
• Native Script
• Flutter
• Ionic

---

22 데스크탑 어플리케이션

• Electron
• Carlo
• Proton Native

---

23 웹 어셈블리