3KB 규모의 ngStato 도입을 통한 NgRx 보일러플레이트 제거 및 생산성 극대화

NgRx killed my productivity. So I built a replacement in 3KB.

Henchiri2026년 4월 13일10분intermediate

AI 요약

Context

NgRx의 Action, Reducer, Effect, Selector로 분절된 아키텍처로 인한 과도한 Boilerplate 발생. 단순 기능 추가 시에도 다수의 파일 수정과 복잡한 RxJS 파이프라인 설정이 강제되는 개발 생산성 저하 문제 직면.

Store, Computed, Actions를 단일 객체로 통합한 중앙 집중식 상태 관리 구조 설계
RxJS 연산자 의존성을 제거하고 async/await 기반의 JavaScript 표준 문법으로 비동기 로직 단순화
exclusive, queued, retryable, optimistic 등 선언적 Concurrency Primitives를 통한 실행 제어 최적화
의존성 변경 시에만 재계산되는 자동 Memoization 기반의 Computed State 구현
TestBed 및 MockStore 설정을 제거한 동작 중심의 간결한 테스트 환경 구축
프레임워크 내장형 Time-travel DevTools를 통한 상태 추적 가시성 확보

실천 포인트

1. 비동기 제어 시 switchMap/concatMap의 대안으로 선언적 Concurrency Primitive 검토

2. 상태 변경 로직과 파생 상태(Computed)의 정의를 한 곳에 모아 인지 부하 감소

3. 테스트 코드 작성 시 설정(Ceremony)보다 동작(Behavior) 검증에 집중하는 구조 채택

태그