6개월 간의 React 프로젝트에서 mobx를 사용한 삽질기.

초창기 입사 전 redux의 코드 공격을 받아내며 사용하다 입사 후 참으로 힙해 보였던 Mobx를 사용한다는 사실에 기뻤다.

 

허나 곧 현실을 마주하고 말았는데...

 

진행 순으로 순서를 매겨보겠음.

 

초기

1. 기존 레거시가 redux-thunk와 mobx가 짬뽕되어 초기껀 redux, 그 후에껀 mobx로 작성 중이였음. 일부 개발됨, 추가로 구축해야 하는 것들이 쌓여 있음.

-> 심지어  하나 있던 프론트엔드 개발자가 내가 온 다음날에 퇴사라고 선언. 본인 충격과 공포. 문서도 없음.

-> 새로 뽑힌 프론트엔드는 3, 서로 기존 프로젝트를 알지도 못하는 셋이서 개발 시작.

 

2. global 스토어에 각종 데이터들이 대량으로 박히며 코드가 길어지기 시작, 서로간에 의사소통 부재로 인한 중복 코드들 발생.

-> 본인: 글로벌이 말도안되게 길어지는 것을 보고 UI 상태는 넣지 말자고 얘기함.

-> 허나 서로간의 다른 숙련도와 생각의 차이로 인한 카오스코드 형성

 

3. 애자일 스프린트 회고에서 위에 대한 얘기가 나오며 풀리퀘, 코드 리뷰 도입하게 됨

-> 처음엔 굉장히 어색했으나 서서히 적응함.

-> 서로 조금씩 친해지며 페어프로그래밍을 하게 됨. 특히 기존 레거시 코드를 수정하는 하기 싫은 일은 페어프로그래밍으로 하면 조금 더 재밌게 할 수 있었음.

 

4. 상태관리에서 PageStore 제안.

-> 페이지 단위로 상태를 관리하는 스토어를 둠. 이를 적용해서 했으나 여전히 문제가 있었음.

 

중기(종결 또는 진행중)

1. Typescript 도입. 

-> mobx가 typescript와 잘 어울린다는 것을 어필하였음.

-> 기존 CRA1로 되어있던 것을 CRA3로 옮김. 특히나 기존 코드가 eject 되어 요것저것을 건드려놔서 성가신 일이였음.

-> 허나 기능적으로 빠르게 앱을 따라잡아야 해서 바쁨으로 인해 @ts-nocheck가 매 상단마다 박힘.

 

1-1. typescript 관련 약속들을 함

-> type을 각자 선언하고 export 하는 문제를 해결하기 위해, type export는 특정 폴더에서만 하도록 약속함.

-> 조금씩 공통 타입을 작성.

 

2. mobx 훅의 도입.(mobx-react-lite)

-> 최대한 UI 등의 정보는 Mobx의 localStore를 통해 특정 컴포넌트에서 사용하도록 약속.

-> mobx-react 6v 부터 mobx-react-lite 기본 포함.

 

3. Model 의 생성

-> 각 도메인의 단위가 될 Model 들을 서서히 작성하기로 합의

 

후기 (진행중 또는 예정)

1. DDD의 개발 방법론 따르려고 함.(ddd)

-> DDD와 mobx는 굉~~~~장히 잘어울린다고 생각함. 둘 다 객체지향 패턴을 따르며 DDD는 객체지향의 정수.

-> 제안 후 모든 팀원들에게 긍정적인 피드백을 받음.

-> Domain은 기존부터 혼자서 하나하나 만들며 하고 있었음. 허나 기존의 결합된 코드에서 사용하려다 보니 꽤 힘들었다...

-> Service(Store) 단에서 Domain을 중심으로 사용하게끔 바꿔야 함.

-> 현재의 암울한 상황에 맞게, 그리고 SideEffect 덩어리인 프론트단에 맞게 Domain만 일단 적용시키는게 최대의 목표. Service 값 전달 형식은 나중에...

 

2. Mobx의 Inject는 정말이지...

-> inject 때문에 코드가 읽기 힘들어짐 + Typescript 와의 연계에 큰 불편함이 있음.

-> 기존에 있던 클래스 스토어를 전부 함수형 컴포넌트로 바꾼 후 React.Context와 함께 useContext, useStore() 방식으로 사용하려고 함.(https://mobx-react.js.org/recipes-context)

 

3. HOC의 난독성 때문에 Render Props로 작성.

-> Render Props는 Custom Hook과도 찰떡 궁합. (https://kentcdodds.com/blog/react-hooks-whats-going-to-happen-to-render-props)

 

4. mobx-util 좀 활용하자 !! 

-> fromPromise, createViewModel 등 편하고 좋은 기능들이 많다.

 

 

 

스토어, 기능, Style, 컴포넌트 간에 분리 후 Mixin을 통한 개발이 현재의 꿈

-> 기능 (Custom Hook, Service 메서드)

-> Style (Emotion css Composition)

-> 컴포넌트 구조 (React Component Composition: 구조만, RenderProps: Hook 결합, Store 부모단에서 결합시.)

-> 상태관리 Service(Mobx + Domain(Model) + Typescript) 찰떡궁합 3형제

 

 

 

 

하지만 다음 프로젝트는 redux-observable를 사용하고 싶다 ㅎ,.ㅎ;;

mobx는 너무나도 달고(Sugar) 마법(Magic)이다.

 

사실상 현재 마법사의 삶을 살고 있다.