HoneyMoney Refactoring (error & bug fix) (3)
사실 이틀이면 끝날 줄 알았다.. 누군들 알았겠는가 프로젝트의 코드가 잘못된 것이 많았다는 것을!
그래도 이렇게 리뷰하면서 고칠 수 있는 것도 행운인 것 같다. 다른 사람이 참고할 때 '얘네 야매네?' 라고 생각되는 것보다 훨씬 기분 좋다.
저번 시간에 발생된 버그 및 오류는 총 두가지며, 마무리 한다음 Detail Page Refactoring을 끝내려 한다. (물론 다른거 할거 많음!)
앞서 Detail 페이지에 대한 Refactoring은
List에서 불러오는 Detail (335 lines => 125 lines)
Map에서 불러오는 Detail (284 lines => 136 lines)
Recommend에서 불러오는 Detail (559 lines => 224 lines)
Profile Page는 Detail 페이지의 요소가 다르고 삭제 버튼이 따로 존재하기 때문에 진행하지 않았다. 처음부터 코드 짰으면 했을듯.
잘못된 데이터 활용 (상품 명을 사용하지 말자...)
아니... 상품 데이터에 줄바꿈이 무슨일인가..? 심지어 프로젝트 끝나고 알아낸게 더 웃기다.. 100개의 데이터중 10개정도만 줄바꿈이 들어가있는 이름이 있더라.
상품명 조회에서 상품코드로 바꾸는 것은 어렵지 않다. 다만, Back 코드를 건들여야할 뿐!
고치러 가보자..
데이터를 바꿔주었으니 views.py도 처리하는 부분을 바꿔주어야 한다. 기존에는 name을 통해 데이터를 찾기 때문인데, 이를 code로 교체해주어야 한다.
끝인줄알겠으나 아직 남았다. 왜냐면 Front 영역에서 Click 이벤트 시에 name을 전달해주고 있기 때문에 code를 전달 하는 방식으로 바꿔줘야한다.
이렇게 문제가 되는 부분은 처리하게 되었다. (Map은 이미 했으니 생략)
강제 스크롤 하단 고정
저번에 고친 gif를 보면 Map에서 상세페이지를 dialog할 때, 강제로 card의 하단부터 보여주는 문제와 dialog시 배경이 과하게 검정색으로 변하는 문제가 발생했다.
이 부분은 profile페이지에서도 동일하게 발생하는데, 응급처치로 스크롤을 강제 상단 고정을 하고 싶었으나 여러가지 버그가 동시에 발생하더라. 당황스러운 것은 Detail 페이지를 띄우는 것은 전체 List에서 클릭하는 것과 동일한데, Profile과 Map 페이지에서만 해당 반응이 일어난다.
강제로 하단 스크롤이 되는 부분은 후에 처리하기로 하고 다이얼로그의 화면 어두어짐은 v-dialog가 제대로 실행되고 있지 않음을 추리할 수 있었다.
왜 왼쪽처럼 설계했었을까? 그 이유는... Vuetify를 많이 안해봤으니까!!! 라고 하긴 어렵고, 설계하면서 기본적인 위치가 click이벤트가 발생하는 위치와 동일해야 한다고 생각한 나는 v-card 안에 위치시켜버린 것이다. 이 때문에 v-dialog가 실행 될 때 버그를 일으킨 것으로 예상된다. 그렇게 Map에서의 dialog는 해결되었다.
마지막 Profile에서의 dialog를 해결해야 한다. 해당페이지는 무려 770 lines을 기록하고 있다...
근데 앞서 Map에서 배운것과 같이 v-dialog의 위치가 v-carousel 과 동일 위치에 있는것을 확인했다. 그러면 위치를 조정해주면 쉽게 해결되겠지??
세상은 쉽지 않다.
Profile에서 Detail 페이지 dialog 실행 함수는 각 carousel card 버튼 마다 렌더링 되어있기 때문이다. (애초에 이렇게 짜서 문제인 것 같다) carousel 자체가 v-for 를 돌면서 형성되기 때문에 carousel 밖으로 빼게된다면 데이터를 제대로 못불러오는 문제가 발생된 것이다.
내가 생각한 해결 방법은 결국 다른 페이지와 동일하게 Detail을 누르는 순간 상품 코드를 넘겨주어 store에 저장시킨 후 해당 데이터를 흩뿌려 팝업 시키는 방법이다.
지금까지 해결한 모든 문제를 복습하는 느낌이었다. 결론은 해결...! (사실 삭제 로직에서 버그가 있다)
아직 여러 문제가 남아있지만, 다음 ProfilePage의 컴포넌트를 나누면서 한번에 해결해보자.