2020 프론트엔드 개발자 로드맵 시작

프론트엔드 개발자로의 성장을 위해 오늘부터 아래 로드맵대로 공부를 시작하려한다.

 

 

 

1. 인터넷

 - 인터넷은 어떻게 작동될까요?

 - HTTP는 무엇일까요?

 - 브라우저와 동작 원리

 - DNS와 작동 원리

 - 도메인 네임은 무엇일까요?

 - 호스팅은 무엇일까요?

 

2. HTML

 - 기초 배우기

 - 의미론적(Semantic)인 HTML 작성

 - 폼과 유효성 검사

 - 컨벤션과 모범 사례 (Best Practice)

 - 접근성

 - 기본 SEO

 

3. CSS

 - 기초 배우기

 - 레이아웃 만들기 (Floats / Positioning / Display / Box Model / CSS Grid / Flex Box)

 - 반응형 디자인과 미디어쿼리

 

4. JavaScript

 - 구문(Syntax)과 기본 문법

 - DOM 조작 방법 배우기

 - Fetch API / Ajax (XHR) 배우기

 - 모듈러 JavaScript와 ES6+ 배우기

 - 개념 이해하기 (호이스팅, 이벤트 버블링, 스코프 프로토타입, Shadow DOM, strict) 

 

5. 버전관리 (Version Control Systems) : 버전관리는 무엇일까요? 왜 사용해야할까요?

 

6. Git 기본 사용법

 

7. 저장소 호스팅 서비스 : 계정 생성 및 깃허브(Github) 사용 방법 배우기

 - GitHub

 

8. 웹 보안 지식

 - HTTPS / CORS / 컨텐츠 보안 정책 / OWASP 보안 취약점

 

9. 패키지 매니저

 - npm

 - yarn

 

10. CSS 구조 (Architecture)

 - BEM

 

11. CSS 전처리기 (CSS preprocessor)

 - Sass

 - PostCSS

 

12. 빌드도구

 - 태스크 러너 : npm scripts

 - 모듈 번들러

   · Webpack

   · Rollup

   · Parcel

 - Linters 및 Formatters

   · Prettrer

   · ESLint

 

13. 프레임워크 선택

 - React.js

   · Redux

   · MobX

 - Angular

   · RxJS

   · NgRx

 - Vue.js

   · VueX

 

14. 현대의 CSS

 - Styled Components

 - CSS Modules

 - Styled JSX

 - Emotion

 

15. 웹 컴포넌트

 - HTML Templates

 - Custom Elements

 - Shadow DOM

 

16. CSS 프레임워크

 - Reactstrap

 - Material UI

 - Tailwind CSS

 - Chakra

 - Bootstrap

 - MAterialize CSS

 - Bulma

 

17. 앱 테스트

 - Jest

 - react-testing-library

 - Cypress

 - Enzyme

 

18. 타입 검사

 - TypeScript

 

19. Progressive Web Apps

 - PRPL Pattern

 - RAIL Model

 - 성능 분석

 - Using Lighthouse

 - Using DevTools

 

20. PWA에서 사용되는 웹 API

 - Storage

 - Web Sockets

 - Service Workers

 - Location

 - Notifications

 - Device Orientation

 - Payments

 - Credentials

 

21. 서버 사이드 렌더링 (SSR)

 - React.js
 - Next.js

 - Angluar

 - Universal

 - Vue.js

 - Nuxt.js

 

22. GraphQL

 - Apollo

 - Relay Modern

 

23. 정적 사이트 생성기

 - Next.js

 - GatsbyJS

 - Nuxt.js

 - Vuepress

 - Jekyll

 - Hugo

 

24. 모바일 어플리케이션

 - React Native

 - NativeScript

 - Flutter

 - Ionic

 

25. 데스크탑 어플리케이션

 - Electron

 

>>세분화 하면 대략 81가지 개념 정리가 필요한데, 이를 3달 안에 완벽 습득이 가능하도록 스터디하는 것이 목표다. (여름이 오기 전까지 프론트엔드로 한걸음 나가기!! 화잍힝!)