[로드맵] 프론트엔드

박우현·2020년 12월 24일
1
post-thumbnail

👌 프론트엔드 로드맵

로드맵에 따라서 하나하나 차근차근 공부해보자!

✔ 인터넷

  • 인터넷은 어떻게 작동될까요?
  • 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

✔ 웹 어셈블리 (Web Assembly)

👍 참고 사이트

0개의 댓글