Redux4 Redux-saga 리덕스 사가는 리덕스의 미들웨어 개념을 이용하여 스토어에서 상태관리 중간에 비동기 로직을 넣을 수 있도록 하는 방법이다. 리덕스에 대해 이해하고 있다면 쉽게 리덕스 사가를 이해하고 적용할 수 있다. 우선 리덕스를 설치해보자 npm install --save redux-saga 우선 configureStore.js 라는 파일을 만든다. 스토어를 만들기 위해 리덕스 사가에 있는 함수이자 사가 미들웨어를 만드는 createSagaMiddleware() 함수를 이용한다. createSagaMiddleware() 함수를 sagaMiddleware로 정의하고 applyMiddleware() 함수를 통해 함수를 인자로 받아 리덕스 미들웨어를 추가하고, run()함수로 rootSaga를 실행해준다. import { c.. 2020. 10. 8. [4주Project] 프로젝트 전체 회고 드디어 4주간의 긴 프로젝트가 마무리 되었다. 한달여간의 프로젝트 기간이었지만 잘 구현된 부분도 있고, 아쉽게 구현하지 못한 부분도 있고 시원섭섭하였다. 4주간 프로젝트를 진행 하면서 바빠지다 보니 블로그 작성이 밀리다 결국 마무리 회고로 작성하게 되었다. 이번 마무리 회고에서는 간략하게 어떤 서비스를 개발하였는지 작성하려고 한다. 프로젝트 명 : TOM(T-label Open Market) 더보기 화훼시장에는 수 많은 도소매 업자들이 있습니다. 도소매 업자들에게 판매채널을 하나더 열어 주고 소비자들도 하나의 꽃집에서 꽃을 주문하는게 아니라 여러 꽃집에서 다양한 화훼의 품종을 보며 살 수 있고, 그 화훼에 대한 설명도 자세히 알려주는 화훼를 전문적으로 다루는 오픈마켓 서비스입니다. 스택 아키텍쳐 Fron.. 2020. 8. 26. [Redux] 리액트 - 리덕스 적용 이전 게시물에서 리덕스 개념에 대해서 간단히 언급한 적이 있다. 실제 프로젝트를 진행하면서 리액트에 리덕스를 사용함으로 인해 간단한 사용법을 정리하게 되었다. 리덕스는 어플리케이션 - 액션 - 리듀서 - 스토어 - 어플리케이션 으로 처리된다. 여기서 스토어라는 단일저장소를 이용하여 필요에 따라서 사용할 수 있게 상태값과 함수를 가져다 사용할 수 있다. Action 액션타입(action type) state의 변화를 액션값으로 정의해준다. export const CHANGE_ACTION_EXAM = 'CHANGE_ACTION_EXAM'; 액션 생성자(action creator) 액션을 만들어주는 함수인 액션생성자를 통해 파라미터를 받아와 액션객체 형태로 만들어 준다. export const setActio.. 2020. 7. 2. [Redux]리덕스 시작하기 redux Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다. 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와준다. 다시말해 React에서 부족한 상태를 관리하기 위한 도구로 Redux를 사용한다. npm install --save redux Redux는 위와 같이 설치할 수 있다. Redux는 3가지 특징이 있다. 1. 여러 state를 하나의 store에 저장할 수 있다. 서버로부터 가져온 상태는 시리얼라이즈되거나(serialized) 수화되어(hydrated) 전달되며 클라이언트에서 추가적인 코딩 없이도 사용할 수 있다. 또한 하나의 상태 트리만을 가지고 있기 때문에 디버깅에도 용이하다. 2. State는 읽기 .. 2020. 5. 30. 이전 1 다음
