(3.1) Implementing React_ Redux & HTTP.
영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고
안녕하세요? 웹개발 하는 영어쨈 죠니 입니다.
이번엔 지난 포스팅에서 마지막에 잠시 언급한 대로 Redux를 다룰 예정입니다.
Implement Redux
- Redux store 추가
- route reducer들 만들기
-- 에러
-- 메세지(react alert)(pop-up error message)(서버사이드 또는 클라이언트 사이드에서 만든 메세지가 뜨도록 하는 것)
- But!!!!! Redux에 대해서는 너무 자세히 탐구하진 않습니다. 활용 및 응용을 통해 인증(Authentication)을 만드는 것이 목적입니다.
Yeah, Let's Go! It's Double or Nothing!
(1) RemoteDev DevTools (크롬 앱 설치 및 적용)
- 크롬 앱스토어에서 개발자모드로 사용이 가능한 툴 입니다. 설치해 주세요.
-- 링크 바로가기
- 확장프로그램이 설치된 것을 보실 수 있습니다.
- 그러면 크롬 개발자모드를 실행합니다.
- 개발자모드에서도 위와 같이 Redux 메뉴를 확인할 수 있습니다.
- 아직 아무런 작업도 해 주지 않았기 때문에 위와 같은 에러 화면이 출력됩니다.
(2) Redux와 React-redux 설치하기
- 다음 명령어를 통해 리덕스와 리액트-리덕스를 설치합니다.
$ npm i redux react-redux redux-thunk redux-devtools-extension(2.1) React-redux는 왜 필요한 거에요?
- Redux와 React는 서로 완전히 분리되어 있습니다. 단지, 리액트와 함께 사용하는 것이 매우 보편화 되어 있는 것은 사실입니다.
- 그래서 필요한 것이 React-redux 패키지 인데, 리액트와 리덕스를 함께 엮는 용도로 사용됩니다.
(2.2) redux-thunk 는 왜 쓰는 건가요?
- redux-thunk는 미들웨어로 쓰입니다.
- 여러분이 Asynchronous Request(비동기 요청)을 할 수 있습니다.
(2.3) redux-devtools-extension
- 작업 및 구현시에 절차에 따라 모든 것들을 구성하는 것 대신 이 redux-devtools-extension을 쓰면 작업 시간을 단축시킬 수 있습니다.
(3) 실행
다음의 명령어를 다시 실행해 주세요.(가상환경이라는 것을 잊지 말아주세요!!!)
- 가상환경으로 어떻게 들어가더라...?????
- (1) Basic REST API 극 초반부에 있습니다.(주의! 가상환경에서 작업시에는 설치한 것들이 모두 해당 가상 영역 안에 있으므로 평상 모드로 빠져나올 경우엔 그 동안 설치했던 것을 사용하지 못하므로 다시 가상 영역으로 갑시당!)
$ npm run dev결과
(4) /leadmanager/frontend/src/store.js 파일 생성 및 작성하기
// store.js
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'
import rootReducer from './reducers';
const initialState = {};
const middleware = [thunk];
const store = createStore(
rootReducer,
initialState,
composeWithDevTools(applyMiddleware(...middleware))
);
export default store;
(5) /leadmanager/frontend/src/reducer/index.js 파일 생성 및 작성
- store.js의 10번째 줄의 store를 사용하는 방법 입니다.(rootReducer를 먼저 만들고...)
- 만든다고 해서 거창한 것은 아닙니다. 그저 지금까지 해 왔던 그대로 합니다.
- src 폴더 내에 reducer 폴더를 만들고 그 안에 index.js 파일을 만들어 작성합니다.
- 이 reducer는 기본적으로 모든 다른 reducer들이 만나는 곳 입니다.
// /leadmanager/frontend/src/reducer/index.js
import { combineReducers } from 'redux';
export default combineReducers({});(6) /src/components/App.js에 react-redux 추가
- 우리는 react-redux 로부터 store와 provider 기능이 필요합니다.
- 앞서 언급했듯이 React-redux는 그 두 가지를 integrate(통합하다)즉, 통합시키기 위한 것 입니다.
// App.js
import ...
import { Provider } from 'react-redux';
import store from '../store';
class App extends Component {
render(){
return(
<Provider store={store}>
...
</Provider>
);
}
}수정 및 결과
- 위와 같이 Provider와 store를 가져오고, return쪽 코드는 <Provider></Provider>로 감싸 주세요.
- 결과는 오른쪽 개발자모드 콘솔 화면과 같습니다.
- 아직 Reducer를 하나도 만들지 않아 오류가 뜹니다.
(7) 크롬 개발자모드 Redux 작업 환경 동작 확인
- 이전 작업들을 문제 없이 진행했다면 위와 같은 결과를 볼 수 있습니다.
(8) index.js 작성 진행
// /leadmanager/frontend/src/reducer/index.js
import { combineReducers } from 'redux';
import leads from './leads';
export default combineReducers({
leads
});
(9) /reducers/leads.js 파일 생성 및 작성
- 작성할 내용은 get leads, add leads, delete leads와 같은 것들이 되겠습니다.
// leads.js
import { GET_LEADS } from '../actions/types.js';
(10) /src/actions/types.js 파일 생성 및 작성하기
- type들은 기본적으로 Constant(정수)들 입니다.
// /src/actions/types.js
export const GET_LEADS = "GET_LEADS";(11) /reducers/leads.js 파일 생성 및 작성 재진행
// leads.js
import { GET_LEADS } from '../actions/types.js';
const initialState = {
leads: []
};
export default function(state = initialState, action) {
switch(action.type) {
case GET_LEADS:
return {
...state,
leads: action.payload
};
default:
return state;
}
}
(12) /src/actions/leads.js 파일 생성
- 이 파일엔 모든 HTTP 요청에 관한 내용을 작성할 것 입니다.
(13) Axios 설치
- 다음의 명령어를 통해 axios를 설치해 주세요.
$ npm i axios결과
- 그리고 다시 서버를 실행시켜 주세요.
$ npm run dev
우선 여기까지 하고 스압이 너무 심해서 다음 포스팅으로 넘길게요!!
다음 포스팅의 시작 내용은
(14) /src/actions/leads.js 파일 작성
입니다!!! 잠시 후에 봐욤!
Stay tuned for the next episode of Web development by the English teacher JOHNNYCLUB!!!
