[Assignment 9 회고록] 페이워크 - TS 기반 전역상태 관리

🔗 Github

🔗 배포 링크

---

과제를 끝내고 회고 내용

🔰 json을 배포하고 싶다면?

• json-server을 설치하고, scripts에 명령어를 추가하여 개발을 진행했다.
• 그런데, 배포를 하려고 보니 netlify에서 동작하지 않는 문제가 생겼다.

// package.json
"scripts": {
    ...
    "server": "npx json-server ./server/data.json --port 4000",
    "dev" :"concurrently \"npm run server\" \"npm run start\""
 },

// server/data.json
{
    "todos": [{
            "id": 1,
            "content": "타입스크립트 공부하기",
            "isCheck": true,
            "createdAt":"2012-04-30T02:15:12.356Z",
            "color": "red"
        },
        {
            "id": 2,
            "content": "Redux-Saga 공부하기",
            "isCheck": false,
            "createdAt": "2012-04-30T02:15:12.356Z",
            "color": "orange"
        }
        ...
    ]
}

• (해결) heroku에서 json-server 부분만 따로 배포하여 진행하였다. > Heroku 참고 링크

// utils/constants.js
export const BASE_URL = 'http://paywork-todo.herokuapp.com/';

🔰 Redux-Saga 비동기 액션 처리

• > Redux-Saga 수업내용 정리 <

• Redux-Saga 관련해서는 수업에도 들었고, 몇 번 사용해서 개발을 진행해봐서 비동기 처리나 generate문법을 알고 있었다. 그런데 TS 환경에서는 처음 사용해봐서 타입을 지정하는게 꽤나 어려웠다.

🔰 @keyframes를 통한 애니메이션

• > @keyframes 참고 링크 <
• 투두리스트를 추가하거나 상태가 변경된 경우 바로 확인할 수 있도록 @keyframes 이벤트를 만들었다.
  
• (참고) transition VS animation 차이
  • transition: 요소의 상태가 변해야 애니메이션을 실행한다.
  • animation: 요소의 모양과 동작을 키프레임 단위로 변경할 수 있다.
    키프레임 동작은 재생 횟수, 재생 방향등 여러 애니메이션 속성으로 제어할 수 있다.

---

과제 내용

• 다지인 자유 & TodoList 구현
  - TypeScript 기반
  - Redux + Redux-Saga를 통한 전역 상태 관리 및 비동기 처리
• 실제 API 서버는 없으므로 서버 URL이 있다는 가정하에 진행

---

구현 내용

🔰 Redux-Saga + TypeScript

• saga 함수를 axios Async 함수마다 따로 만들다 보니, 파일이 전체적으로 너무 길어졌다.
  ➡ 호출하는 API만 다를뿐, 같은 기능을 수행하므로 하나의 함수로 만들어서 관리하고 싶어졌다.
• 아래의 함수처럼 sagaAsyncTodo 함수를 생성했다.
  ➡ props로 type, ApiFunc, action을 받는다.
  ➡ ApiFunc를 any 타입에서 적절한 타입으로 수정이 필요하다.

/* saga 실행 시, api 함수 비동기 호출 함수 */
function* sagaAsyncTodo(type: string, ApiFunc: any, action?: TodosAction) {
  const [SUCCESS, FAILURE] = [`${type}_SUCCESS`, `${type}_FAILURE`];
  try {
    const response: {
      msg: string;
      result: TodoType[] | number;
      content?: string;
    } =
      action && action.payload
        ? yield call(ApiFunc, action.payload)
        : yield call(ApiFunc);

    yield put({ type: SUCCESS, payload: response });
  } catch (error) {
    yield put({
      type: FAILURE,
      payload: ERROR_MESSAGE[type],
    });
  }
}

/* Saga 액션 감지 */
export function* watchTodos() {
  yield takeEvery(GET_TODOS, () => sagaAsyncTodo(GET_TODOS, api.getTodoAll));
  yield takeEvery(ADD_TODO, (action: TodosAction) =>
    sagaAsyncTodo(ADD_TODO, api.addTodoAPI, action),
  );
  yield takeEvery(TOGGLE_TODO, (action: TodosAction) =>
    sagaAsyncTodo(TOGGLE_TODO, api.toggleTodoAPI, action),
  );
  yield takeEvery(DELETE_TODO, (action: TodosAction) =>
    sagaAsyncTodo(DELETE_TODO, api.deleteTodoAPI, action),
  );
  yield takeEvery(UPDATE_TODO, (action: TodosAction) =>
    sagaAsyncTodo(UPDATE_TODO, api.updateTodoAPI, action),
  );
}