4th release

Author: velopert

SUMMARY.md

@@ -51,4 +51,29 @@
   - [2. 파라미터와 쿼리](./react-router/02-params-and-query.md)
   - [3. 서브라우트](./react-router/03-subroutes.md)
   - [4. 리액트 라우터 부가기능](./react-router/04-extra.md)
-  - [5. useReactRouter Hook 사용하기](./react-router/05-use-router-hook.md)
+  - [5. useReactRouter Hook 사용하기](./react-router/05-use-router-hook.md)
+- [6장. 리덕스](./redux/README.md)
+  - [1. 리덕스에서 사용되는 키워드 숙지하기](./redux/01-keywords.md)
+  - [2. 리덕스의 3가지 규칙](./redux/02-rules.md)
+  - [3. 리덕스 사용 할 준비하기](./redux/03-prepare.md)
+  - [4. 리덕스 모듈 만들기](./redux/04-make-modules.md)
+  - [5. 카운터 구현하기](./redux/05-counter.md)
+  - [6. 리덕스 개발자도구 적용하기](./redux/06-redux-devtools.md)
+  - [7. 할 일 목록 구현하기](./redux/07-implement-todos.md)
+  - [8. useSelector 최적화](./redux/08-optimize-useSelector.md)
+  - [9. connect 함수](./redux/09-connect.md)
+  - [정리](./redux/CONCLUSION.md)
+- [7장. 리덕스 미들웨어](./redux-middleware/README.md)
+  - [1. 리덕스 프로젝트 준비하기](./redux-middleware/01-prepare.md)
+  - [2. 미들웨어 만들어보고 이해하기](./redux-middleware/02-make-middleware.md)
+  - [3. redux-logger 사용 및 미들웨어와 DevTools 함께 사용하기](./redux-middleware/03-logger-and-devtools.md)
+  - [4. redux-thunk](./redux-middleware/04-redux-thunk.md)
+  - [5. redux-thunk로 프로미스 다루기](./redux-middleware/05-redux-thunk-with-promise.md)
+  - [6. API 재로딩 문제 해결하기](./redux-middleware/06-fix-reloading.md)
+  - [7. thunk에서 라우터 연동하기](./redux-middleware/07-router-with-thunk.md)
+  - [8. json-server](./redux-middleware/08-json-server.md)
+  - [9. CORS 와 Webpack DevServer Proxy](./redux-middleware/09-cors-and-proxy.md)
+  - [10. redux-saga](./redux-middleware/10-redux-saga.md)
+  - [11. redux-saga 로 프로미스 다루기](./redux-middleware/11-redux-saga-with-promise.md)
+  - [12. saga에서 라우터 연동하기](./redux-middleware/12-redux-saga-with-router.md)
+  - [정리](./redux-middleware/CONCLUSION.md)

integrate-api/01-basic.md

@@ -136,7 +136,7 @@ function Users() {
         // loading 상태를 true 로 바꿉니다.
         setLoading(true);
         const response = await axios.get(
-          'https://jsonplaceholder.typicode.com/users/showmeerror'
+          'https://jsonplaceholder.typicode.com/users'
         );
         setUsers(response.data); // 데이터는 response.data 안에 들어있습니다.
       } catch (e) {

react-router/02-params-and-query.md

@@ -133,7 +133,9 @@ import React from 'react';
 import qs from 'qs';
 
 const About = ({ location }) => {
-  const query = qs.parse(location.search.substr(1)); // substr 은 맨 앞의 "?" 문자열을 없애줍니다.
+  const query = qs.parse(location.search, {
+    ignoreQueryPrefix: true
+  });
   const detail = query.detail === 'true'; // 쿼리의 파싱결과값은 문자열입니다.
 
   return (

react-router/04-extra.md

@@ -10,39 +10,31 @@
 
 #### src/HistorySample.js
 ```javascript
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 
-class HistorySample extends Component {
-  // 뒤로가기
-  handleGoBack = () => {
-    this.props.history.goBack();
+function HistorySample({ history }) {
+  const goBack = () => {
+    history.goBack();
   };
 
-  // 홈으로 이동
-  handleGoHome = () => {
-    this.props.history.push('/home');
+  const goHome = () => {
+    history.push('/');
   };
 
-  componentDidMount() {
-    // 이걸 설정하고 나면 페이지에 변화가 생기려고 할 때 마다 정말 나갈거냐고 질문
-    this.unblock = this.props.history.block('정말 떠나실건가요?');
-  }
-
-  componentWillUnmount() {
-    // 컴포넌트가 언마운트 되면, 그만 물음
-    if (this.unblock) {
-      this.unblock();
-    }
-  }
-
-  render() {
-    return (
-      <div>
-        <button onClick={this.handleGoBack}>뒤로</button>
-        <button onClick={this.handleGoHome}>홈으로</button>
-      </div>
-    );
-  }
+  useEffect(() => {
+    console.log(history);
+    const unblock = history.block('정말 떠나실건가요?');
+    return () => {
+      unblock();
+    };
+  }, [history]);
+
+  return (
+    <div>
+      <button onClick={goBack}>뒤로가기</button>
+      <button onClick={goHome}>홈으로</button>
+    </div>
+  );
 }
 
 export default HistorySample;

redux-middleware/01-prepare.md

@@ -0,0 +1,167 @@
+## 1. 리덕스 프로젝트 준비하기
+
+리덕스 미들웨어를 공부해보기 전에, 리덕스 프로젝트를 먼저 새로 생성해주도록 하겠습니다.
+
+다음 명령어를 사용하여 새로운 프로젝트를 준비해주세요.
+
+```bash
+$ npx create-react-app learn-redux-middleware
+```
+
+> 이 섹션의 코드는 [여기](https://codesandbox.io/s/vzui1)서 확인 가능합니다.
+
+그리고 해당 디렉터리에서 redux와 react-redux를 설치해주세요.
+
+```bash
+$ cd learn-redux-middleware
+$ yarn add redux react-redux
+```
+
+이제, 카운터 예제를 만들어보도록 하겠습니다.
+
+### 리덕스 모듈 준비
+
+우리는 액션 타입, 액션 생성함수, 리듀서를 한 파일에 작성하는 Ducks 패턴을 사용하도록 하겠습니다. src 디렉터리에 modules 디렉터리를 만들고, 그 안에 counter.js 라는 파일을 생성해서 다음과 같이 작성해주세요.
+
+원래 Ducks 패턴을 따르는 리덕스 모듈에서는 액션 이름에 `'counter/INCREASE'` 이런식으로 앞부분에 접두어를 두지만, 이번에는 액션이름이 중복되는 일이 없으니, 편의상 생략하도록 하겠습니다.
+
+#### modules/counter.js
+```javascript
+// 액션 타입
+const INCREASE = 'INCREASE';
+const DECREASE = 'DECREASE';
+
+// 액션 생성 함수
+export const increase = () => ({ type: INCREASE });
+export const decrease = () => ({ type: DECREASE });
+
+// 초깃값 (상태가 객체가 아니라 그냥 숫자여도 상관 없습니다.)
+const initialState = 0;
+
+export default function counter(state = initialState, action) {
+  switch (action.type) {
+    case INCREASE:
+      return state + 1;
+    case DECREASE:
+      return state - 1;
+    default:
+      return state;
+  }
+}
+```
+
+그 다음에는 루트 리듀서를 만들어주세요. 물론 지금은 서브리듀서가 하나밖에 없는 상황이지만, 나중에 몇개 더 만들 것입니다.
+
+#### modules/index.js
+```javascript
+import { combineReducers } from 'redux';
+import counter from './counter';
+
+const rootReducer = combineReducers({ counter });
+
+export default rootReducer;
+```
+
+
+### 프로젝트에 리덕스 적용
+
+프로젝트에 리덕스를 적용해주세요. 프로젝트에 리덕스를 적용 할 때에는 src 디렉터리의 index.js 에서 루트리듀서를 불러와서 이를 통해 새로운 스토어를 만들고 Provider 를 사용해서 프로젝트에 적용을 합니다.
+
+#### index.js
+```javascript
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+import rootReducer from './modules';
+
+const store = createStore(rootReducer);
+
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('root')
+);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
+```
+
+
+### 프리젠테이셔널 컴포넌트 준비
+
+그 다음, 프리젠테이셔널 컴포넌트 Counter 를 준비해주겠습니다. components 디렉터리에 Counter.js 파일을 만드세요. 해당 컴포넌트에서는 number, onIncrease, onDecrease를 props로 받아옵니다.
+
+#### components/Counter.js
+```javascript
+import React from 'react';
+
+function Counter({ number, onIncrease, onDecrease }) {
+  return (
+    <div>
+      <h1>{number}</h1>
+      <button onClick={onIncrease}>+1</button>
+      <button onClick={onDecrease}>-1</button>
+    </div>
+  );
+}
+
+export default Counter;
+```
+
+### 컨테이너 만들기
+
+그리고 컨테이너도 만들어줍시다. 
+
+#### containers/CounterContainer.js
+```javascript
+import React from 'react';
+import Counter from '../components/Counter';
+import { useSelector, useDispatch } from 'react-redux';
+import { increase, decrease } from '../modules/counter';
+
+function CounterContainer() {
+  const number = useSelector(state => state.counter);
+  const dispatch = useDispatch();
+
+  const onIncrease = () => {
+    dispatch(increase());
+  };
+  const onDecrease = () => {
+    dispatch(decrease());
+  };
+
+  return (
+    <Counter number={number} onIncrease={onIncrease} onDecrease={onDecrease} />
+  );
+}
+
+export default CounterContainer;
+```
+
+이제 App 에서 CounterContainer를 렌더링을 하고, `yarn start` 를 해서 개발 서버를 구동해보세요.
+
+#### App.js
+```javascript
+import React from 'react';
+import CounterContainer from './containers/CounterContainer';
+
+function App() {
+  return <CounterContainer />;
+}
+
+export default App;
+```
+
+
+이제 카운터가 작동하는지 확인해보세요.
+
+![](https://i.imgur.com/MTeKPV9.png)
+
+이제 리덕스 미들웨어를 직접 만들어볼 준비가 끝났습니다.