Engineering_S/W & H/W

  이전에 작성한 글들은 동기화 action입니다. action이 되면 바로 state에 반영되어서 적용이 되었습니다. 하지만 비동기인 상황에서는 대기시간이 걸립니다. 예로들어 API를 이용하여 데이터를 fetch하는 경우 입니다. 통신 상태에 따라 시간이 불규칙적으로 걸릴수 있기 때문입니다.  이번에는 axios 또는 fetch을 이용하여 코드를 짜보도록 하겠습니다. 일단 fetch을 하여 최종적으로 redux storage에 저장하는 것이 목적입니다. 그러기 위해서는 가장먼저 state를 설계해야 합니다. 내용과 구조는 아래와 같습니다. loading : API를 통해서 데이터를 다운로드 받고 있는 중일때 true, 완료 혹은 error는 false data : fetch(혹은 axios)를 통해 받은 데이터를 저장(여기서는 유저정보) error: fetch도중 에러가 발생시 error메세지 저장 State = {      loading : true,       data : [ ],      error: '' } 이제 action.type을 결정해야 합니다. 여기서 설정할수있는 action은 3가지 입니다. 내용은 아래와 같습니다. FETCH_USERS_REQUEST : users 리스트를 fetch합니다. FETCH_USERS_SUCCESS : fetch가 성공적으로 마무리 됬습니다. FETCH_USERS_FAILURE : fetch도중 error가 발생. 이제 reducer를 설정해야 하는데 위의 action을 이용하여 설정할수 있습니다. action.type FETCH_USERS_REQUEST   - loading : true FETCH_USERS_SUCCESS - loading : false - users : data (해당 API를 통해 다운) FETCH_USERS_FAILURE - loading : false - err : ...

이 글을 작성하면서 express의 middleware와 기능적인 면에서 비슷하다는 것을 알았습니다. 아래 링크를 참고해 주시기 바랍니다. 링크 : node.js Express Middleware 사용법 Redux의 middleware장점 1. 커스텀 기능을 확장할수 있는 방법 2. dispatching와 action사이에 제 3자 extension 접점을 제공하고 reducer에 도달한다. 3.  logging, 에러 리포트 등등 middleware에 사용이 가능하다. 일단 이번 예제에서는 Logger를 middleware에 사용하겠다.  Redux에 사용할 logger npm 사이트 https://www.npmjs.com/package/redux-logger 위 사진처럼 redux-logger를 설치한다. // 로거를 생성하기 위한 require const reduxLogger = require ( 'redux-logger' ); const logger = reduxLogger . createLogger (); 이전에 사용한 코드 맨 위쪽에 가서 위 2줄을 추가해 준다. 이렇게 하면 logger의 설정은 마무리가 됬다. // middleware추가하기 const applyMiddleware = redux . applyMiddleware ; 이제 middleware를 추가하기 위해서 위 코드를 작성해 줍니다. // 1. app의 state를 갖고 있는다. (인자로 reducer) // createStore를 이용하여 storage를 생성 // 다른 reducer가 합쳐진 rootReducer를 인자로 갖습니다. // createStore의 두번째 인자로 middleware가 추가 됬고 middleware의 인자는 logger이다. const storage = createStore ( rootReducer , applyMiddleware ( logger )); 저번 글의 마지막에서 2개의 reducer를 combineRe...

 저번에 장난감가게를 비유로 간단한 Redux를 만들어 봤습니다. 이제 이 사장은 쿠기(cookie)를 팔려고 계획중입니다. 그래서 기존 직원을 교육시켜 쿠키도 팔수 있도록 훈련을 시켰습니다. 훈련이 완료된후 판매을 시작했습니다. 이 그림에서 보연 알다싶이 직원이 이제 2가지 행동(action)을 하는것을 알수 있습니다. 이 점을 기억하시고 코드를 살펴봐 주시기 바랍니다. // Action const BUY_TOY = 'BUY_TOY' ; // type을 설정한다(문자열) const BUY_COOKIE = 'BUY_COOKIE' ; // type을 설정한다(문자열) function buyToy (){ // 고객이 장난감을 살때 return { type : BUY_TOY , info : 'First step of redux action' }; }; function buyCookie (){ // 고객이 쿠키를 살때 return { type : BUY_COOKIE , info : 'First step of redux action' }; }; 저번에 1개의 function만 있었다면 이번에는 buyCookie가 추가됬습니다. 이 action은 고객이 쿠키를 살때 사용할 function입니다. // 초기 state상태 const initialState = { numOfToy : 10 , // 초기에 장난감이 10개 numOfCookie : 15 } 당연히 초기상태에 이제 쿠키의 갯수(15개)가 state에 추가됬습니다. 이제 initialState에는 초기 장난감과 쿠기의 갯수가 각각 저장되어 있습니다. const reducer = ( state = initialState , action ) =...

이제 장난감 가게가 아래의 사진과 같이 있다고 하겠습니다. initialState : 'Alex 장난감 판매점'에서 10개의 장난감을 팔려고 합니다. reducer : 가게에는 1명의 직원이 장난감을 팔고 있습니다. action.type : 고객이 장난감을 달라고 요청합니다. dispatch : 직원이 응답을 합니다. storage : Alex 장난감 판매점의 가게 이제 직원이 고객한테 장난감을 주면(action) 선반의 장난감은 -1이 됩니다. 위 그림과 내용을 기억하면서 아래 코드를 확인해 주시기 바랍니다.  Action  1. 유일하게 storage와 상호작용할수 있는 방법이다. 2. redux storage에 정보를 전달할수 있다. 3. JavaScript 객체이다. 4. 키로 'type'가 존재하며 value값에 의해 action의 행동이 정해진다 5. 'type'의 value값의 속성은 보통 문자열이다. const BUY_TOY = 'BUY_TOY' ; // type을 설정한다(문자열) function buyToy (){ return { type : BUY_TOY , info : 'First step of redux action' } } Reducer (이전 state, action) => 새로운 state // Reducer // (previousState, action) => newState // 초기 state상태 const initialState = { numOfToy : 10 // 초기에 장난감이 10개 } const reducer = ( state = initialState , action ) => { switch ( action . type ){ // action의 타입을 확인하여 case를 실행 case BUY...