분류 전체보기

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

1. redux-saga 이번에는 redux-saga 를 통해 비동기 작업을 관리하는 방법을 알아보려고 합니다. 이 미들웨어는 redux-thunk 다음으로 많이 사용되는 비동기 작업 미들웨어입니다. redux-thunk는 함수 형태의 액션을 디스패치하여 미들웨어에서 해당 함수에 스토어의 dispatch와 getState를 파라미터로 넣어서 사용하는 구조를 가지고 있습니다. 그래서 구현한 thunk 함수 내부에서 원하는 API를 요청하고, 다른 액션의 디스패치하거나 핸져 상태를 조회하기도 했습니다. 대부분의 경우에서는 이전 redux-thunk에서 이런 기능들을 충분히 구현할 수 있습니다. 이번에 다루는 redux-saga는 좀 더 까다롭고 복잡한 상황에서 유용하게 쓸 수 있는 미들웨어입니다. 아래왁 같..

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

1. 비동기 작업을 처리하는 미들웨어 사용 1.1.5 리펙토링 API를 요청해야 할떄마다 17줄이 넘는 thunk 함수를 작성하는 일과 로딩상태를 리듀서에서 관리하는 작업은 코드가 길어지고 번거로운 일입니다. 그렇기에 이번에는 반복되는 코드의 양을 줄여서 리펙토링을 진행 하겠습니다. - lib/createRequestThunk.js export default function createRequestThunk(type, request){ // 성공 및 실패 액션타입 정의 const SUCCESS = `${type}_SUCESS` const FAILURE = `${type}_FAILURE` return parms => async dispatch => { dispatch({ type }) //시작 try { ..

[프론트엔드] 리덕스 미들웨어를 통한 비동기 작업 관리[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 다음으로 많이 사용되는 비동기 작업 미들웨어 라이브러리입니다. 특정 액션이 디스패치되었을 떄 정해진 로직에 따라 다른 액션을 디스패치..