August 26, 2021 https://velopert.com/3401
이번 강의에서 다룰 주제는 리덕스 미들웨어를 사용하여 외부 데이터를 연동하는 방법을 다뤄보겠습니다.
외부 데이터를 연동하기 위해서 리덕스, 그리고 리덕스 미들웨어들이 꼭 필요한것은 아닙니다. 리액트 컴포넌트와 내부 state 만을 사용하여 모든 것 들을 할 수 있어요. 하지만, 좋은 도구들과 함께하면 좋은 개발자경험 (Developer Experience)이 따라옵니다.
어플리케이션을 만듬에 있어서는, UX 도 매우 중요하지만, 이를 개발하는 개발자들의 정신건강을 위하여, 개발자경험 또한 놓칠 수 없습니다. 네트워크 요청의 상태 관리와 전달받은 데이터 상태 관리를 효율적이고 쉽게 할 수 있도록, 몇몇 방법을 배워보도록 하겠습니다.
리덕스를 사용 하면서 비동기 작업 (예: 네트워크 요청) 을 다룰 때는 미들웨어가 있어야 더욱 손쉽게 상태를 관리 할 수 있습니다. 우선, 미들웨어가 어떤 역할을 하는지, 그리고 어떻게 작동하는지 이해를 하면서 직접 미들웨어를 만들어보고, 다른 미들웨어들을 설치해서 사용하는 방법을 배워보겠습니다.
미들웨어는, 액션이 디스패치(dispatch) 되어서 리듀서에서 이를 처리하기전에 사전에 지정된 작업들을 설정합니다. 미들웨어를 액션과 리듀서 사이의 중간자라고 이해하시면 되겠습니다.
리듀서가 액션을 처리하기전에, 미들웨어가 할 수있는 작업들은 여러가지가 있는데요. 단순히 전달받은 액션을 콘솔에 기록을 할 수도 있고, 전달받은 액션에 기반하여 액션을 아예 취소시켜버리거나, 다른 종류의 액션들을 추가적으로 디스패치 할 수도 있습니다.
우리는 이 미들웨어를 한번 직접 작성을 해볼건데요. 그 작업을 시작하기전에 먼저 git 을 통하여 리덕스 스타터 킷 프로젝트를 클론하고, NPM 모듈들을 설치하세요. (이 프로젝트는 단순히 create-react-app 으로 만든 프로젝트에 리덕스를 설정한 프로젝트입니다. 프로젝트를 여러분이 직접 설정해도 됩니다.)
$ git clone
$https://github.com/vlpt-playground/redux-starter-kit.git
$ cd redux-starter-kit
$ yarn
저번 강의에서 배웠던 Ducks 구조가 적용되어있는 간단한 숫자 카운터 코드입니다. 이번에는 store 생성 로직을 따로 store.js 에서 구현하였습니다.
진행하기 전에, modules/ 내부 파일들과 App.js 코드를 한번 훑어보세요.
실제 프로젝트를 작업 할 때에는, 미들웨어를 직접 만들어서 사용하는 경우는 그렇게 많지 않습니다. 대부분의 경우엔, 다른 프로그래머들이 이미 만들어놓은 미들웨어들을 사용하면 되기 때문이죠. 하지만, 미들웨어가 어떻게 작동하는지 이해를 하려면 직접 만들어봐야합니다.
한번 간단한 미들웨어를 직접 작성해보고 나면, 미들웨어의 작동방식을 제대로 이해 할 수 있고, 또 만약에 여러분들이 원하는 미들웨어가 없을 땐 상황에 따라 직접 만들어서 사용하거나 기존 미들웨어들을 커스터마이징 할 수도 있겠죠.
우선, src/lib/ 디렉토리에, loggerMiddleware.js 파일을 생성하세요.
미들웨어를 만들 땐, 이렇게 시작합니다.