Dooray 정리 배경
이번 세션에서 다룰 내용을 소개한다. 왜 Dooray가 괴물같이 변했는지 설명한 뒤 이를 정리한 과정을 컴포넌트와 데이터 파트로 나누고, 마지막으로 테스트 방법까지 다루겠다는 발표 구성을 안내한다.
지원 종료된 AngularJS를 아직 쓰는 이유로 점진적 Vue 전환을 소개하지만, 유지보수와 우선순위에 밀려 3년간 8개 중 2개만 전환된 현실을 짚는다. 공통 컴포넌트 이중 관리와 서로 다른 라이프사이클 충돌 문제를 드러낸다.
디자인 개편을 계기로 기존 코드 수정이 아닌 제로베이스에서 React로 다시 쌓아 올린 결정을 설명한다. 명시적 함수 호출, 정확한 타입 추론, 풍부한 레퍼런스를 이유로 들고 기능 개발을 잠시 멈추고 리뉴얼을 시작한다.
위키 화면을 공통 요소와 서비스 요소로 쪼개고 LNB를 예로 색·타이포그래피·그림자를 변수화해 스토리북으로 공유한다. 기본 컴포넌트를 디자이너와 먼저 정리해 중복 컴포넌트 발생을 줄인 방법을 다룬다.
상태를 책임지는 컨테이너와 화면을 그리는 프리젠터로 역할을 나눠 빅컴포넌트 문제를 완화한다. 함수형 컴포넌트에서 `React.memo`를 컨테이너 하위 단일 컴포넌트에 두어 불필요한 리렌더를 막는 배치 전략을 설명한다.
상태를 컨테이너에 둘 때와 스토어에 둘 때의 장단점을 비교한다. 컨테이너는 추가가 쉽지만 외부 참조·비동기 처리가 어렵고 컨테이너 소멸 시 에러가 나며, 스토어(리덕스)는 참조·비동기·계산 로직 위치가 자유롭다는 점을 짚는다.
성격이 다른 상태를 위해 영역 상태를 담는 UI 스토어와 도메인 정보를 담는 데이터 스토어로 분리한다. 데이터 파편화 방지, 이미 보유한 데이터로 로딩 화면 개선, 메모와 결합한 리렌더 최소화 이점을 설명한다.
액션 로직을 스토어로 모으며 커진 복잡도를 Redux Saga로 제어한다. takeEvery·takeLeading·takeLatest로 더블 클릭 같은 흐름을 제어하고, 비동기 코드를 동기처럼 작성하는 사가의 이점을 예로 든다.