Library & Framework

Jest & React Testing Library (RTL)

1. Jest 를 활용한 JavaScript 테스트 각 진영마다 소프트웨어 테스트를 위해서 사용할 수 있는 라이브러리들이 개발되어 있는데, 그 중 자바스크립트 진영에서는 Jest, Mocha, chai 등의 테스트 라이브러리들이 대표적으로 사용되고 있다. 이중에서 Jest가 주간 약 1800만 다운로드의 압도적인 점유율을 가지고 있으며, CRA에서도 기본적으로 Jest를 포함해서 환경을 구성해주는 등 사실상 표준으로서 사용되고 있다. 1-1. Jest 사용법 Jest는 기본적으로 *.test.* 의 형태를 가진 파일을 테스트 파일로 인식하며, 해당 파일안에 있는 코드를 실행한다. 우리가 일반적으로 소프트웨어를 테스트 하는 과정은 아래와 같은 과정을 거친다. 특정한 동작을 수행한다. 동작을 수행한 결과가 ..

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 앱을 위한 예측 가능한 상태 컨테이너" 를 핵심 가치로 삼고 있다. 모든 상태를 관리하는 컨테이너로서의 역할을 수행 애플리케이션 내의 구성요소들은 컨테이너에 접근해서 상태를 읽어올 수 있기에 자바스크립..

관심사의 분리 & 리액트에서 관심사를 분리하는 법

1. 관심사의 분리 (Seperation Of Concerns) 관심사의 분리(Seperation Of Concerns) 는 좋은 코드를 짜기 위한 가장 기본적인 원칙이며, 더 좋은 애플리케이션을 만들기 위한 여러 디자인 패턴, 기법, 아키텍쳐 등은 결국 모두 이 SoC를 가장 기본적인 원칙으로 삼고 있다. 관심사 - 간단히 말해서 하나의 모듈이 수행하고자 하는 목적이다. 여기서 모듈은 함수, 클래스 등의 단위로 해석할 수 있다. 관심사의 분리 (SoC) - 각 모듈들이 한번에 여러 관심사를 처리하려고 하지 않고, 하나의 관심사만 처리하도록 분리하는 것 1-1. 관심사를 분리하는 이유 하나의 모듈에서 여러 기능을 할 수 있으면 어떻게 보면 효율적이고 좋을 것 같은데 왜 하나의 모듈은 하나의 관심사만 처리..