[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