Dooray 웹앱이 커지면서 유지보수가 어려워지고, 이를 해결하기 위해 많은 고민들을 했습니다.
왜 이러한 결정들이 내려졌고, 그로인해 어떻게 바뀌었는지에 대한 경험들을 공유해 볼까 합니다. ^_^

대상

웹앱이 복잡해져 어떻게 정리할지 고민하시는 분

다루는 내용

왜?
- 오랫동안 개발하다보니 히스토리를 추적하기 힘든 코드가 많아짐
- AngularJS라는 지원 종료된 라이브러리 사용 중
- Vue로 점진적 전환 시도하지만 문제점들 발생
- React로 전환 시작
컴포넌트 정리
- 스토리북을 활용한 값들의 정리
- 공통 컴포넌트 정리 시에는 팀원 전체 참여하여 제작
- 각 서비스와 연관된 컴포넌트도 스토리북으로 공유
- 컨테이너 프리젠테이셔널 패턴 적용
- 컨테이너 자식으로 1개의 컴포넌트만 가지며 memo 적용 가능 포인트로 사용
데이터 정리하기
- 상태는 대부분 스토어에 저장
- 영역에 국한된 상태와 서비스와 연관된 상태인 도메인으로 구분
- 역할에 따라 UI 스토어와 데이터 스토어로 구분
- 리덕스 사가를 통하여 흐름 제어
테스트는 어떻게 할까?
- 프리젠테이셔널 컴포넌트는 스토리북으로 테스트
- 컨테이너는 상호작용 테스트
- 스토어는 액션에 대한 동작을 통합테스트

화살표는 의존성 방향