HoneyMoney Refactoring (ProfilePage)
현재 UserProfileView.vue의 코드 길이는 무려 770lines에 달한다. 구성요소를 모두 한 페이지에서 전개했기 때문인데, 아래 Profile Page를 보면 구성요소가 무려 5가지가 있다.
1. 프로필 정보
2. Edit 버튼 및 dialog를 통한 정보 수정
3. 사용자 금융 정보
4. 꿀통에 담은 예금
5. 꿀통에 담은 적금
근데 만들어진 페이지를 Refactoring 하니 불편한점이 조금 있더라. 예를들어 vue 에서 direct로 axios 요청을 보내는 경우가 많은데(1회용) 직접 분류해주어야한다. 물론 처음부터 코드를 나눠서 잘 짰으면 이런 일이 없을 것이고 유지보수도 더 편했을 것이다..
먼저 carousel을 통해 접근 가능한 Detail 페이지를 재활용 해주어야 하는데, 실제 팝업되는 데이터는 일반 Detail 페이지와 다르게 표현해줄 예정이다. 꿀통에 담는 액션이 너무 많이 사용 되었고, 삭제 버튼은 card에서 따로 존재하기 때문이다.
Detail 페이지 같은 경우는 앞서 해왔던 것의 반복이므로 생략. 이제 carousel 기준으로 나누어보자.
이제야 Store의 유용성을 알 것 같다. Component간 데이터 이동을 줄이기 위해서 Store에서 관리하는 것을 이론적으론 알고 있었으나, 현실은 구현하기에 급급하여 설계를 제대로 하지 못한 것 같다. Refactoring 해보길 잘한 것 같다.
1. UserProfileView에서 carousel(ProfileUserDepositComponent)과 dialog(ProfileUserDepositDetailComponent)의 컴포넌트를 따로 출력
= > dialog를 다루는 변수가 View에 있기 때문에 가독성은 조금 향상되지만 emit을 통해 dialog 변수를 전달
2. carousel(ProfileUserDepositComponent)의 컴포넌트에 dialog를 위치
= > Component가 깊어지면서 가독성은 조금 떨어질 수 있으나, 코드가 비교적 간단
2번 방식이 내 프로젝트의 구성과 유사하다고 판단했기 때문에 분리해보려 한다. 즉, ProfileUserDepositComponent 내부에서 ProfileUserDepositDetailComponent을 출력하는 방식을 이용할 것이다.
이 과정만 거쳐줬을 뿐인데 770lines = > 271lines 로 감소되었다.
아쉬운 점은 은행 사진을 매칭시켜주는 함수와 데이터가 많이 필요한 편이라 Component로 합쳐주고 싶었지만, v-bind 요소로는 사용이 불가능하기 때문에 따로 시도하지는 않았다. (v-slot을 이용하면 가능하긴 하다)
이제 프로필 정보, Edit, 금융정보(Chip) Component를 나누어보자
총 3개의 컴포넌트를 분류해주었고, 결과적으로 UserProfileView는 아래와 같이 다이어트 되었다.
최종 UserProfileView 770lines = > 112lines
물론 컴포넌트 내부 코드 길이까지하면 적지 않겠지만, 나누고 나니 스크롤 길이가 굉장히 짧아서 코드를 보는데 피곤함이 줄어들었고, 주석까지 추가해두면 여러가지 컴포넌트여도 이동하는데 문제없었다.
이제 자잘한 Component를 나눠주는 작업만 하고 난 뒤, 삭제 로직의 버그만 고치면 프로젝트는 마무리 될 것 같다. 내일 내로 마무리해야지!