[10주차] 5. 리액트 Redux Middleware(2)

리액트

리덕스 미들웨어

사용자 경험 개선

• 유틸함수 사용하는 이유 : 리액트와 리덕스를 함께 사용하게 될 때 api 연동하게 되는 경우 비슷한 코드를 자주 작성하게 되기 때문이다.

redux-thunk에서의 react history

• Thunk에서 특정 경로로 이동하고 싶을 때 사용
• import {createBrowswerHistory} from ‘history’;

JSON server

• rest api를 json 파일로 호출 가능
• 연습 용이여서 실무에서 사용하면 안됨
• json 파일 기반으로 서버 열기(port 4000으로)
  npx json-server json파일경로 --port 4000
• 개발 공부하거나 간단한 프로토 타입 만들 때 사용하면 유용

CORS와 webpack DevServer Proxy

CORS

• axios 같은 클라이언트로 api를 호출하게 될 때 기본적으로 브라우저에서 띄우고 있는 페이지의 도메인과 호출하는 api의 도메인이 다르다면 브라우저에서 해당 api에 대한 결과물을 조회할 수 없게 된다. 이런 상황에서는 CORS를 설정해줘야 하지만 JSON server에서는 이미 설정되어 있다
• 백엔드 api 직접 구성하는 경우 Access-Control-Allow-Origin : 개발서버주소 or * 이렇게 작성해서 개발서버에서도 들어오는 것을 허용하는 것을 설정해줘야 함

webpack DevServer Proxy

• 단순이 도메인이 다르거나 포트가 다르면 프록시 설정으로 해결 가능
• package.json에서 “proxy” : “api서버가 제공되고 있는 주소”
• 리액트 앱에서 백엔드 api 사용하는 경우 백엔드 쪽에서 따로 CORS 처리하지 않고 proxy 기능 활용하면 더 편하게 개발을 진행 할 수 있다.

redux-saga

• yarn add redux-saga
• redux-thunk 다음으로 가장 많이 사용되는 비동기 작업 관련 미들웨어
• redux-thunk의 경우 함수를 디스패치 할 수 있게 해주는 미들웨어이고 redux-saga의 경우 액션을 모니터링 하고 있다가 특정 액션이 발생하면 특정 작업을 하게 하는 미들웨어
• redux-thunk로 구현하기 힘든 작업 구현 가능
• 비동기 작업을 진행할 때 기존 요청 취소 가능
• 특정 액션이 발생했을 대 이에 따라 다른 액션을 디스패치하거나 자바스크립트 코드 실행 가능(순수액션객체를 사용하면서 작업 가능)
• 웹소켓을 사용하는 경우 Channel이라는 기능을 사용하여 더욱 효율적으로 코드 관리 가능
• 비동기 작업 실패했을 때 재시도 하는 기능 구현 가능
• 다양하고 까다로운 비동기 작업 처리 가능
• redux-saga는 generator에 기반한 미들웨어

Generator 문법

• 자바스크립트의 generator 문법 사용
• 함수의 흐름을 특정 구간에 멈춰놓았다가 다시 실행 가능
  • 멈출 때는 yield 사용
  • 다시 실행할 때는 next 사용
• 결과값을 여러 번 내보낼 수 있음
  • yield를 통해서 결과값을 여러 번 호출하고 next를 통해서 그 결과값을 내보낼 수 있다
• suspend : generator가 잠시 멈춰 있다.
• generator.next() : generator 실행

redux-saga Effect

• put은 dispatch와 비슷(redux-saga 미들웨어가 액션을 디스패치하도록 명령)
• takeEvery : 모든 것이 처리되면 두번재 인수인 saga함수을 처리하겠다
• takeLatest : 가장 마지막에 들어온 것만 처리
• delay(ms) : 괄호안에 넣은 ms만큼 기다림

routeSaga 만드는 법

• import {all} from ‘redux-saga/effects’
• export function* rootSaga() {
  yield all([만들어둔 saga()들(쉼표로 구분)]);
  }

적용법

• index. js에서 작성
• import createSagaMiddleware from ‘redux-saga’;
• const sagaMiddleware = createSagaMiddleware();
• applyMiddleware 괄호 안에 sagaMiddleware 작성(thunk와의 순서는 상관 없음)
• sagaMiddleware.run(rootSaga함수자체)

select Effect

• 현재 상태 조회하기
• select(state = > 조회할 것)