⭐프로젝트 1 - Concurrently, Antd CSS, Redux

📕Concurrently

여러개의 commands를 동시에 작동 시킬수 있게 해주는 툴이다

지금 우리가 클라이언트를 키기 위해서 터미널 위치를 클라이언트로 바꿔서 켜주고,

서버를 키기 위해서 또 나와서 켜야하는 번거로움이 있다

npm install concurrently --save

설치 위치는 프로젝트 폴더에 다운받는다

클라이언트 폴더에 다운하지 않는다

사용 방법은 package.json 파일에서 script 부분에 추가시켜주는것이다

"all": "concurrently \"npm start\" \"npm start --prefix client\"",

루트 폴더의 package.json 의 스크립트 부분에 이렇게 추가를 시켜줬다

앞의 이름은 본인이 원하는 것으로 만들면 된다

파일을 저장한 후 npm run 이름 이렇게 하면 두가지가 동시에 켜진다

📘Antd CSS Framework

CSS를 사용해서 만들어도 되지만 그렇게 되면 시간이 많이 들기 때문에

기능을 만드는데 초점을 두기 위하여 프레임워크를 사용하자

CSS프레임워크는 종류가 많은데 우리는 Ant Design을 사용해서 만들어보자

클라이언트 폴더에 설치해야한다

npm install antd --save

설치를 마치면 클라이언트 폴더의 index.js 파일에다가

import 'antd/dist/antd.css'; 를 추가시키자

Ant Design 사이트에 가면 이미 만들어진 것들의 코드가 있으니 한번씩 봐보자

📗Redux

리덕스는 상태 관리 라이브러리이다

리덕스의 내용들을 설명하려고 했는데 그림을 보면서 듣는게 훨씬

이해가 잘 될것 같아서 링크를 남기도록 하겠다

리덕스를 사용하기 위해서 설치해야 할 것들이 있다

npm install redux react-redux redux-promise redux-thunk --save

이렇게 4가지 dependency를 다운받도록 하자

뒤에 두가지는 미들웨어이다

리덕스의 과정중 store는 객체밖에 받지를 못한다

그러나 프로미스, function과 같은 것들을 사용해야 할 경우도 있기 때문에

두가지 미들웨어를 추가로 설치한 것이다

기본구조 (scaffolding)

클라이언트의 index.js에서 시작을 하는데 리덕스를 연결시켜줘야 한다

import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import { applyMiddleware, createStore } from 'redux';
import Reducer from './_reducers';

const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore)

원래는 createStore만 해서 스토어를 생성하는데 프로미스와 function도 받을 수 있게

미들웨어와 함께 생성한다고 생각하면 된다

그리고 우리가 src에 만든 폴더중 _reducer 라는 폴더 안에 index.js 파일을

만들고 아래의 코드를 넣자

import { combineReducers } from "redux";
//import user from './user_reducer';

const rootReducer = combineReducers({
    //user,
})

export default rootReducer;

주석처리한 부분은 현재는 없고 나중에 만들 파일이라서 그렇다

스토어는 여러 Reducer의 state를 관리하는데 combineReducer를 이용해서

하나로 합쳐주는 것이다

그리고 링크를 눌러서 들어가면 Redux를 편하게 사용할 수 있는 툴이 있는데

이것도 다운로드를 하자

그리고 src폴더의 index.js부분에서 리엑트 돔 렌더 부분을 아래와 같이 수정하자

ReactDOM.render(
  //<React.StrictMode>
  <Provider 
    store = { createStoreWithMiddleware(Reducer,
      window.__REDUX_DEVTOOLS_EXTENSION__ &&
      window.__REDUX_DEVTOOLS_EXTENSION__()
    )}
  >
    <App />
  </Provider>,
  //</React.StrictMode>,
  document.getElementById('root')
);

이렇게 하면 기본 구조 설정이 끝난 것이다

오늘은 세팅까지만 한 것이고 다음 포스트에서 reducer를 만들어보자