Middleware

[프론트엔드] 리덕스 미들웨어를 통한 비동기 작업 관리[10]

1. redux-saga 1. 4 코드 리펙토링 이번에는 반복되는 코드를 함수화하여 리펙토링을 진행 하겠습니다. 이전에 thunk 함수를 위해 만든 createRequestThunk 함수처럼 createRequestSaga를 만들겠습니다. - lib/createRequestSaga.js import { call, put } from "redux-saga/effects"; import { startLoading, finishLoading } from "../modules/loading"; export default function createRequestSaga(type, request) { const SUCCESS = `${type}_SUCCESS`; const FAILURE = `${type}_FAIL..

[프론트엔드] 리덕스 미들웨어를 통한 비동기 작업 관리[9]

1. redux-saga 1. 3 API 요청 상태 관리하기 이번에는 redux-saga를 사용하여 API 요청을 해 보겠습니다. 기존에 thunk로 관리하던 액션 생성 함수를 제거하고, saga를 사용하여 처리합니다. sample 리덕스 모듈을 아래와 같이 수정합니다. - modules/sample.js import { createAction, handleActions } from "redux-actions"; import { call, put, takeLatest } from "redux-saga/effects"; import * as api from "../lib/api"; import { startLoading, finishLoading } from "./loading"; // 액션 타입을 선언합..

[프론트엔드] 리덕스 미들웨어를 통한 비동기 작업 관리[5]

1. 비동기 작업을 처리하는 미들웨어 사용 1.1.4 웹 요청 비동기 작업 처리하기 이번에는 thunk의 속성을 활용하기 웹 요청 비동기 작업을 처리하는 방법을 알아보겠습니다. 웹 요청을 욘습하기 위하여 JSONPlaceholder 에서 제공하는 가짜 API를 사용해 보겠습니다. - 사용 API #포스트 읽기(:id는 1~100사이 숫자) GET htts://jsonplaceholder.typicode.com/posts/:id #모든 사용자의 정보 불러오기 GET htts://jsonplaceholder.typicode.com/users API를 호출할 때는 promise 기반 라이브러리인 axios를 사용합니다. axios를 설치해 주세요. yarn add axios API를 모두 함수화해서 처리 하겠..

[프론트엔드] 리덕스 미들웨어를 통한 비동기 작업 관리[4]

1. 비동기 작업을 처리하는 미들웨어 사용 이전 시간에는 리덕스 미들웨어의 동작구조를 알아보았습니다. 이번에는 오픈소스 커뮤니티에 공개된 미들웨어 라이브러를 사용하여 리덕스 프로젝트에서 비동기 처리작업을 더욱 효율적으로 관리해 보겠습니다. 비동기 작업을 처리할 떄 도움을 주는 미들웨어는 다양한 종류가 있습니다. 이번에 사용할 미들웨어는 다음과 같습니다. redux-thunk : 비동기 작업을 처리할 떄 가장 많이 사용되는 미들웨어 라이브러리 입니다. 객체가 아닌 함수 형태의 액션을 디스패치 할 수 있도록 도와주는 역할을 합니다. reudx-saga : redux-thunk 다음으로 많이 사용되는 비동기 작업 미들웨어 라이브러리입니다. 특정 액션이 디스패치되었을 떄 정해진 로직에 따라 다른 액션을 디스패치..