Stack Building

"액션과 리듀서 사이의 중간자" 사용처 비동기 작업 (ex. 네트워크) 콜백 지옥 비동기적으로 해야할 일이 많아지면, 코드의 구조는 자연스레 깊어질 것이고 그러면 코드를 읽기 힘들어진다. 하는 일 액션이 디스패치(dispatch) 되어서 리듀서에서 이를 처리하기전에 사전에 지정된 작업들을 설정 PromiseMiddleware (사용 예제: 예제 코드 분석) (1) promise - ES6에서 비동기 처리를 다루기 위해 사용되는 객체 (2) redux-promise-middleware promise가 payload로 전달되면 요청이 시작, 성공, 실패 할 때 액션의 뒷부분에 _PENDING(시작), _FULFILLED(성공), _REJECTED(실패)를 반환한다. ※ 이 글은 velopert님 블로그의 이..

출처: 권동섭 교수님 github 검색창에 도시 이름을 영문으로 입력하면 해당 도시의 기온, 습도 등을 그래프로 보여주고, 그 아래에 평균치를 보여주며 도시 위치를 구글맵으로 보여주는 웹사이트다. 이번 프로젝트는 미세먼지 정보를 보여주는 웹사이트 프론트를 만드는 것이라서 유사한 기능을 하고 있는 예제를 분석해 보기로 했다. 아래 분석에서 node_modules 폴더는 단순한 모듈 모음이고, css는 꾸며주는 기능이므로 제외했다. public은 기본 리액트 템플릿과 똑같다. manifest.json은 웹이 안드로이드 홈에 올라갈 때 메타데이터로 쓰인다. src 안에는 actions, components, containers, reducers 폴더가 있다. actions는 액션, reducers는 리듀서를 ..

리덕스에 대해 자세히 기술한 이 페이지를 참고하여 공부 목적으로 요약 정리함 등장 배경 - 너무 많은 상태 관리 - 복잡한 코드 - 변화와 비동기(asynchronous, 위임, *)의 혼용 => 상태 변화가 일어나는 시점에 제약, 상태 변화 예측 가능하게 3가지 원칙 - 모든 state(상태)는 하나의 store 안에 하나의 객체 트리 구조로 저장 - state를 변화시키는 방법은 action 객체의 전달 외에 없다. (store.dispatch) - action에 의해 상태 트리가 어떻게 변화되는지 순수 함수로 작성해야 한다. 이 순수 함수가 바로 reducer다. 이전 state를 변경하는 것이 아니라 새로운 state 객체를 생성, 반환 action - "무언가 일어난다" 기술 (간단한 소식들이라..