티스토리 뷰
웹 개발을 한다면 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 Router
https://reacttraining.com/react-router/web/guides/quick-start
앱의 상태 관리를 위한 방법이 필요해 집니다. 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
https://react-redux.js.org/
Redux Saga
https://redux-saga.js.org/
Javascript Generator
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Generator
- 개발 시 유용한 모듈
Utility
immer
https://github.com/immerjs/immer
date-fns
https://date-fns.org/
Redux DevTools Extension
https://github.com/zalmoxisus/redux-devtools-extension#usage
ESLint
https://eslint.org/
Prettier
https://prettier.io/
'APPLICATION' 카테고리의 다른 글
ChatGPT 추천 어플(앱) TOP 5 (0) | 2023.05.23 |
---|---|
Android에서 AWS Mobile Hub를 이용한 DynamoDB 연동 (1) | 2022.11.02 |
반응형 웹사이트 VS 앱 개발 (0) | 2020.02.08 |
Ionic Framework - 하이브리드앱 개발기 (0) | 2017.02.01 |
앱 출시를 위해 준비해야 할 이미지들 (0) | 2016.11.21 |