프론트엔드

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

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

1. 미들웨어란? 리덕스 미들웨어는 액션을 디스패치하면 리듀서에서 이를 처리하기 이전에 사전 작업들을 실행합니다. 미들웨어는 이 떄 액션과 리듀서사이의 중간자 역할을 합니다. 리듀서가 액션을 처리하기 전에 미들웨어는 아래의 작업들을 수행할 수 있습니다. 전달받은 액션을 콘솔에 기록 전달받은 액션 정보를 기반으로 액션을 완전히 취소 다른종류의 액션을 추가로 디스패치하기 1.1 미들웨어 만들기 src 디렉토리에 lib 디렉토리를 생성하고, 그 안에 loggerMiddleware.js 파일을 생성합니다. - lib/loggerMiddleware.js 미들웨어는 아래와 같은 구조를 가지고 있습니다. const loggerMiddleware = store => next => action => { //미들웨어 기본..