2022 Front End 로드맵 따라가기 [프롤로그]

Front End 개발자로 성장하기

개발자로 취업을 준비하면서 여러가지 학습 방법이나 순서 등을 찾아보면서 매년 보았던 로드맵 문서가 있다. 개발자로 준비를 한번이라도 해본 사람이라면 대부분 알고 있으리라 생각하는 그 유명한 로드맵이다.

모르는 분들을 위해 아래 주소 첨부 드립니다.
https://roadmap.sh/frontend (2022년 Front End 개발자 로드맵)

위와 같은 형식의 로드맵을 제공해주고 있지만, 개발을 처음 시작할 당시 이 로드맵을 보았을 때 어디서 부터 무엇을 어떻게 학습해야 할지 감을 잡지 못했었던 기억이 난다.
취업 후 다시 차근차근 학습해보기 위해 다시 로드맵을 검색 하던 중 나와 같은 고민들을 하는 사람이 많았고, 이를 보기 더 편하고 순서와 설명을 같이 진행해주는 영상을 하나 보게 되었다. 그 영상은 바로 취업 준비할때 몇번 보았던 유튜브 채널 '드림코딩 by 엘리' 이었다.

위 영상에서는 엘리님께서 Front End 개발자 로드맵을 이해하기 쉽고 깔끔하게 정리를 해주시고, 각 단계와 파트들에 대한 간략한 소개도 해주셨다.
이 로드맵을 참고하여 2022년 Front End 로드맵 따라가기를 시작해보려고 한다.

학습 방법 및 순서

학습 방법

• 각 단계별, 목차별 태그 부여 및 시리즈 작성
• TIL(Today I Learned) 태그 내에 글을 작성
• 블로그, 유튜브, 공식문서 등을 참고하여 이해한 부분을 작성
• 다른 사람에게 설명할 수 있도록 학습

학습 순서

1. 위의 영상에서 나누었던 단계별로 학습을 진행한다.
   1. Basic Tools
      • Computer (macOS, windows, Linux)
      • Browser (크롬, 사파리, IE 등)
      • Text Editor (VS Code, WebStorm)
      • Terminal (Powershell, Bash, zsh)
   2. Front-end
      • HTML (태그, 속성 등)
      • CSS (Architecture, Preprocessors, CSS Framework)
      • JavaScript (ES6, DOM, BrowserAPI, TypeScript(OOP), Framework, SSG, SSR)
   3. Tools
      • 버전 관리 (Git)
      • 패키지 관리 (npm, yarn)
      • 모듈 관리 (webpack)
   4. Testing
      • Test Pyramid (jest, react-testing-library)
      • Good Test Priciples
      • CI / CD (테스트 자동화)
   5. Publish
      • 배포 (aws, azure, github-pages, vercel 등)
   6. Backend
      • Public API
      • Firebase
   7. Web Assembly
      • 웹 성능 최적화 (비디오, 이미지 처리 등)
   8. GraphQL
      • Apollo
      • Relay
   9. Cross Platform
      • Desktop (Electron)
      • Mobile (PWA, Cordova, RN, Flutter)