Backend 개발자 입장에서 Frontend 개발을 하게 되면서 어떤 것들을 어떤 순서대로 학습해야 할지를 정리해 보고자 합니다.

웹 개발을 한다면 backend/frontend 구별 없이 HTML, CSS, JS는 기본적으로 알고 있어야 합니다.
React 개발 시에 ES6+ 에서 추가된 기능들이 자주 사용되므로 개념 정도는 공부해 둘 필요가 있습니다.

React 기반으로 개발을 할 예정이므로 React를 먼저 학습 합니다. 한글을 지원하므로 조금 더 학습하기 쉽습니다. Hooks 는 지금 단계에서는 일단 넘어가고 차후 필요할 때 다시 보는 것도 방법입니다.

React 사이트에서 Create React App 을 이용하여 코드를 작성합니다.
React 개발에 필요한 것들을 모아둔 것이므로 시작은 CRA 로 하는 것이 좋습니다.
CRA는 webpack 같은 번들러나 babel 같은 트랜스파일러를 포함하고 있습니다. 어떤 것들인지 알아두고 넘어갑니다.

웹 앱에서 페이지 이동을 어떻게 하는지 알려면 react-router 를 봅니다.

일단, 여기까지 왔을 때 React 할만한데.. 라고 생각했습니다만...

앱이 커지면 상태 관리를 위한 방법이 필요해 집니다. Redux 나 Mobx 또는 Hooks 를 이용하는 방법이 있습니다. 프로젝트에서 Redux 를 사용하므로 Redux 에 대해 정리합니다.

Redux 를 보기에 앞서 Flux 에 대한 이해가 필요합니다. Redux 는 Flux의 개념을 기반으로 하기 때문입니다. 개인적으로 Flux 를 보고 Redux 를 봤을 때 좀 더 이해가 쉬웠습니다.

Redux에는 수많은 미들웨어들이 존재합니다. 그 중 비동기 요청 등을 처리하기 위해 Saga 를 사용합니다. Saga 는 JS의 generator 개념을 먼저 이해해야 합니다.

개발 시 유용한 모듈들.