Library & Framework/Redux

Redux MiddleWare 깊이 있게 살펴보자!

미들웨어가 없다면? 미들웨어는 리덕스를 이용하는데 필수적인 요소는 아니다. 다만 미들웨어를 통해서 리덕스를 좀 더 편리하게 사용할 수 있다. 기술의 필요성을 직관적으로 이해하려면 해당 기술이 없었을 때를 상상하거나, 실제 구현해보면 좋다고 한다. 실제 미들웨어가 없이 아래의 동작을 구현해보자. Dispatch된 Action을 로깅한다. Action이 Reducer로 전달되어서 처리된 후, state를 로깅한다. Solution 1. Logging Manually const increaseAction = increaseCounter(); console.log("dispatching", increaseAction); store.dispatch(increaseAction); console.log("next s..

Redux-Saga

1. Redux-Saga 를 사용하는 이유 간단한 비동기 통신들 같은 경우에는 Redux-Thunk 정도로도 충분하지만 규모가 어느정도 커진 애플리케이션의 경우 테스트의 용이성 병렬 처리 유지보수성 등의 이유로 Redux-Saga를 로직을 처리하기 위한 미들웨어로 주로 사용 리덕스 사가는 제네레이터 함수를 기반으로 동작하는 라이브러리다. 또한 선언적인 방식으로 동작하기에 개발자가 코드를 읽고 이해하기 편하며, 테스트 코드를 작성하기 좋다. 2. 리덕스 사가의 활용법 1) 사가를 활용하기 위해서 미들웨어에 사가를 등록하기 사가를 이해하기 위해서는 리덕스에 별도의 스레드를 만든다는 개념으로 접근하는 것이 좋다. 스레드는 “특정한 일을 처리하는 하나의 공간”정도로 이해하자. 사가는 리덕스 내에 별도의 사가 스..

Redux Middleware / DevTools

1. Middleware 란? 미들웨어는 “프레임워크의 요청과 응답 사이에 추가할 수 있는 코드” 라고 생각할 수 있다. 일반적으로 express, koa와 같은 서버 프레임워크단에서 미들웨어란 개념을 많이 사용하는데 흔히 미들웨어에서 CORS 관련 설정, 로깅 등의 목적으로 활용한다고 한다. 미들웨어의 가장 큰 특징은 “연결" 할 수 있다는 점이다. 각각의 미들웨어는 서로 독립적이며, 프레임워크 안에 여러개의 미들웨어를 추가해서 연결할 수 있다. 이로 인해 개발자는 미들웨어를 기반으로 일련의 흐름을 작성하듯이 프로그램을 설계할 수 있게 된다. 이런 특징으로 인해 JavaScript를 이용한 서버 프레임워크 중 가장 유명한 express 같은 경우에는 기본적인 핵심 기능만 포함하고 있으며 그 외의 코드들..

Redux

1. About Redux Flux 패턴에 대해 알고 있다면 그것은 라이브러리나, 프레임워크가 아닌 디자인 패턴이다. 즉 Flux 아키텍쳐를 사용하기 위해서는 개발자들이 직접 이 아키텍쳐에 맞게 코드로 구현해야 한다는 뜻이다. 초창기에는 Flux 패턴을 각자의 방법대로 구현한 여러가지 라이브러리들이 생겼지만, 현재 Flux 패턴을 근간으로 하는 라이브러리의 표준은 Redux로 정립되었다. Redux는 Flux, CQRS, Event Sourcing의 개념을 사용해서 만든 라이브러리로서 “JavaScript 앱을 위한 예측 가능한 상태 컨테이너" 를 핵심 가치로 삼고 있다. 모든 상태를 관리하는 컨테이너로서의 역할을 수행 애플리케이션 내의 구성요소들은 컨테이너에 접근해서 상태를 읽어올 수 있기에 자바스크립..