[React & NodeJS]공부#4
날짜 : 21.06.23
참고 강의
[React.js]
1. Proxy Server
- 역할
1) 방화벽 기능
2) 웹 필터 기능
3) 캐쉬 데이터, 공유 데이터 제공 기능
2. Concurrently
사용하는 이유 : front 서버와 back 서버를 한 번에 켜기 위해
- Concurrently 설치
npm install concurrently --save
- root의 [package.json] script에 추가
"dev": "concurrently \"npm run backend\" \"npm run start --prefix client\""
3. CSS Framework
- Antd UI 사용
npm install antd --save
- [client]-[index.js]에 import
import 'antd/dist/antd.css';
4. Redux
Redux 사용 이유(state에서 사용)
-> STORE를 통해 층을 타고 올라가지 않아도 직접적 접근이 가능해짐
- Redux 설치
npm install redux react-redux redux-promise redux-thunk --save
- [client]-[src]-[_reducers]-[index.js]생성
import { combineReducers } from "redux";
// import user from './user_reducer';
// 나중에 사용될 함수이므로 미리 입력해놓기
const rootReducer = combineReducers({
//user,
})
export default rootReducer;
-
Chrome 확장 프로그램에서 redux dev tools 다운하기
-
[client]-[src]-[index.js] 수정
import { Provider } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import Reducer from './_reducers';
const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore)
ReactDOM.render(
<Provider
store={createStoreWithMiddleware(Reducer,
// for redux devtools
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
)}
>
<App />
</Provider>,
document.getElementById('root')
);
Full Code
Walang Github
Walang Notion
Author And Source
이 문제에 관하여([React & NodeJS]공부#4), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ganzi410/React-NodeJS공부4저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)