Backend 개발자 입장에서 Frontend 개발을 하게 되면서 어떤 것들을 어떤 순서대로 학습해야 할지를 정리해 보고자 합니다.
웹 개발을 한다면 backend/frontend 구별 없이 HTML, CSS, JS는 기본적으로 알고 있어야 합니다.
React 개발 시에 ES6+ 에서 추가된 기능들이 자주 사용되므로 개념 정도는 공부해 둘 필요가 있습니다.
- HTML5
- https://developer.mozilla.org/ko/docs/Web/HTML/HTML5
- https://poiemaweb.com/
- https://htmlreference.io/
- CSS3
- https://developer.mozilla.org/ko/docs/Web/CSS
- https://learnlayout.com/
- https://cssreference.io/
- SASS/SCSS
- https://sass-lang.com/
- Javascript / ECMAScript 2015 (ES6)+
- https://developer.mozilla.org/ko/docs/Web/JavaScript
- http://kangax.github.io/compat-table/es6/
React 기반으로 개발을 할 예정이므로 React를 먼저 학습 합니다. 한글을 지원하므로 조금 더 학습하기 쉽습니다. Hooks 는 지금 단계에서는 일단 넘어가고 차후 필요할 때 다시 보는 것도 방법입니다.
- React & React Hooks
- https://ko.reactjs.org/
- https://reactjs.org/docs/thinking-in-react.html
React 사이트에서 Create React App 을 이용하여 코드를 작성합니다.
React 개발에 필요한 것들을 모아둔 것이므로 시작은 CRA 로 하는 것이 좋습니다.
CRA는 webpack 같은 번들러나 babel 같은 트랜스파일러를 포함하고 있습니다. 어떤 것들인지 알아두고 넘어갑니다.
- Create React App
- https://create-react-app.dev/
- webpack
- https://webpack.js.org/guides/
- babel
- https://babeljs.io/
웹 앱에서 페이지 이동을 어떻게 하는지 알려면 react-router 를 봅니다.
일단, 여기까지 왔을 때 React 할만한데.. 라고 생각했습니다만...
앱이 커지면 상태 관리를 위한 방법이 필요해 집니다. Redux 나 Mobx 또는 Hooks 를 이용하는 방법이 있습니다. 프로젝트에서 Redux 를 사용하므로 Redux 에 대해 정리합니다.
Redux 를 보기에 앞서 Flux 에 대한 이해가 필요합니다. Redux 는 Flux의 개념을 기반으로 하기 때문입니다. 개인적으로 Flux 를 보고 Redux 를 봤을 때 좀 더 이해가 쉬웠습니다.
Redux에는 수많은 미들웨어들이 존재합니다. 그 중 비동기 요청 등을 처리하기 위해 Saga 를 사용합니다. Saga 는 JS의 generator 개념을 먼저 이해해야 합니다.
- Flux
- https://haruair.github.io/flux/
- https://bestalign.github.io/2015/10/06/cartoon-guide-to-flux/
- Redux
- https://lunit.gitbook.io/redux-in-korean/
- https://bestalign.github.io/2015/10/26/cartoon-intro-to-redux/
- Middleware
- React Redux
- Redux Saga
개발 시 유용한 모듈들.
- Utility
- immer
- date-fns
- Redux DevTools Extension
- ESLint
- Prettier
