HoneyMoney Refactoring (버그 fix, 컴포넌트 최종 정리)

문제는 앞서 말했던 Profile 페이지에서 carousel에 대한 삭제 이벤트가 진행 될 때, 마지막 carousel 요소가 삭제될 때 자동으로 바뀌어야하는데, 흰 화면이 나타나는 문제다. 

으윽 화질구지네요

 

증상을 살펴보면 중간에 있는 요소를 삭제 했을 때는 문제 없지만, 마지막 요소를 삭제했을 때는 다른 카드 페이지로 넘어가지 않는다. 반응성이 깨진건가 싶어서 Front와 Back을 나누어서 진행해봤다. 내가 만든 페이지에서는 로딩이 걸리지만, 실제로 웹을 구성할 때, pinia를 이용하여 Local 스토리지를 이용한다면 가장 빠른 반응을 보여 줄 수 있다. 내가 만든 페이지는 Back으로 요청을 보내고, 다시 데이터를 axios를 통해 호출한 다음 흩뿌려주기 때문에 1초 이상 걸리는 경우다. 

원래 코드

수정 코드

 

당연히 web에 적용되는 속도는 바로 반응해주지만, 마지막 페이지는 그대로 빈칸을 출력했다. 따라서 반응성의 문제는 아닌 것으로 판단했다.

 

또, 담아둔 예금의 개수는 잘 줄어드는 것을 보면 데이터는 제대로 적용 되는 것 같다. 그렇다면 carousel 자체의 문제일까? 그렇다면 마지막 카드의 삭제 이벤트가 발생 했다면 화면에 출력하는 carousel 페이지를 v-model을 통해 index -1 시켜주면 왼쪽으로 당겨주는 효과를 보여주어 UX상으로 문제가 없지 않을까 싶었다. 

 

carousel 태그에 v-model을 통해 Slide를 변경

삭제 함수가 실행되는 부분에 해당 조건문을 추가하여 실행하도록 작성

 

이론상으로는 v-model을 통해 반응성을 받아 Slide의 번호(index)를 조정하여 카드 요소 중 마지막이 삭제 되었을 때, 카드 페이지가 한 칸 앞으로 당겨지길 바랬는데 예상처럼 작동하진 않았다. (console을 통해 데이터가 틀리지 않음은 확인)

 

삭제 이벤트에 따라 carousel만 랜더링이 안되는 것이 아닐까? 했지만

이미 컴포넌트 자체가 삭제될 때마다 v-if를 통해 강제 랜더링이 진행된다. 두번한다고 해서 달라질 것은 없다는 것.

 

다음 방법으로는 carousel에서 강제 랜더링을 할 때 profileDepositData가 아닌 독립적인 변수를 통해 변화를 감지하고 추가 랜더링 하는 방법을 생각했다.

carouselKey라는 변수를 할당해주고

 

삭제 이벤트가 발생하면 carouselKey에 변화를 주어 강제로 랜더링을 할 수 있게 적용시켜주었다.

 

 

해당방식의 가장 큰 문제는 carousel을 리렌더링 하면서 페이지가 가장 처음으로 돌아온 다는 것이다... 

 

결과적으로 2가지 방법을 합치면 가능하다.

v-carousel에 v-model을 걸어 변수를 활용하고, 삭제 이벤트가 발생하면 card page를 변경시켜준다.

v-model을 통해 변화를 감지하기 때문에 :key는 필요 없어진다.

 

간단한 방법을 돌고 돌아서 왔는데, 가장 깔끔한 방법인 것 같다.

 

심플 이스 베스트일까? 다양한 방면으로 생각하면서 어렵게 생각했는데, 가장 쉬운 방법이 해결법이었다. 그래도 산전수전? 하면서 경험해보는게 내 성격이고 배우는 방법이라고 생각해서 재미있는 시간이었다.

최종본

---

View는 총 14개, Component는 총 19개로 마무리 되었다. 나누자면 더 나눌 수 있지만, 이미 만들어진 페이지에서 나누면 데이터를 전달해주거나 호출해줘야하는 부가적인 코드를 작성해야하기 때문에 효율적이지 않는 부분은 굳이 진행하지 않았다. 그래도 UserProfileView를 5개로 나눈 것은 좋은 경험이었다.

초기 Components

최종 Component 정리

 

추가로 Component간 폴더를 나누어서 관리할 예정이었지만, 단일 Component가 많고 파일명으로 충분히 구분이 가능하다고 판단했기 때문에 나누진 않았다. 

 

가장 유익했던 부분은 Detail 페이지를 Refactoring하면서 재사용 가능한 Component를 만들어서 코드의 길이를 획기적으로 줄인 부분과 다양한 방법으로 버그를 고쳐본 경험이 좋았던 것 같다. 그리고 프로젝트를 진행하면서 또, 버그를 고쳐나가면서 가장 많이 썼던 ChatGPT는 꽤 좋은 선생님 역할을 해준 것 같아서 너무 좋았다. 그리고 어떤 키워드가 포함되고 얼마나 자세하게 오류를 말해주느냐에 따라 만족스러운 답변을 줄때와 바보같을 때가 있는 것이 신기하더라. 나중에는 내가 답답한 부분을 와다다 쓰는 것보다 인공지능 입장에서 어떻게 설명해주어야 잘 프롬프팅이 되는지 많이 고민하게 되었다. 

 

심각한 버그가 발견되지 않는한 프로젝트는 이렇게 막을 내릴 것 같다. 오랫동안 붙잡고 있었지만, 첫 프로젝트인 만큼 많은 애정이 들어가서 끝까지 해본 것 같다. 좋은 과정과 좋은 결과를 주었고, 좋은 피드백이된 좋은 시간이었다.

 

아! Fine Tuning관련해서 프로젝트를 추가로 다룰 예정이긴하다. 하지만, 프로젝트에는 적용시키진 않을 예정이다.