Situation
기존 legacy 에서는 가독성, 유지보수성을 떨어트리는 여러 문제들이 있었다.
기술부채가 쌓이고 쌓여서 누구도 감히 건들 수 없는 상태였다.
이에 가독성이 떨어져 기능 하나 추가할 때 마다 code 를 읽는 데 많은 시간이 소모되었다.
유지보수를 힘들게 하는 문제의 원인은 아래와 같았다.
- 생명주기 method 에서 복잡한 비즈니스 로직으로 가독성을 떨어트림
- 비즈니스 로직을 별도로 분리하지 않고 React Component 에서 모든 걸 관리
- React Component 별로 책임을 분리하지 않음
- 하나의 함수에서 너무 많은 일을 처리하여 if 문으로 떡칠을 해놓음
Task
새롭게 만드는 송금 과정 기능에는 가독성과 유지보수성을 높이기
Action & Result
- 관심사 별로 컴포넌트를 분리
- 비즈니스 로직과 View 를 분리
- 컴포넌트안에서 생명주기 method 사용 지양, 대신 custom hook 사용
- 국가별 공통으로 사용가능한 컴포넌트는 별도 분리
- 특정 국가에만 있어야 하는 컴포넌트들은 공통 컴포넌트 사용을 지양하고 별도 분리