컴퓨터 처럼 생각하기. 프론트 엔드 함수 실행시 디버깅 포인트 찾기[20221208-TIL]

 

 오늘은 간단하게 끝날줄 알았던 수정과 단체 삭제 기능을 구현하고 얼른 디자인으로 넘어가려고 했다.

 그런데 역시 예상한대로 오류가 나서 오늘 하루를 다 잡아먹었다.

 자주 실수하는 부분들을 모두 노션에 정리해놓았는데 그래도 빼먹는 부분이 많았다.

왜 자꾸 당연하면서도 중요한 것을 실수하나?

 조금 비유를 하자면 우리는 어떤 액션을 취할때 액션 이후의 움직임을 잘 생각하지 않는 것 같다.

 운전이 미숙할 때엔 앞바퀴의 움직임만 생각하고 차 몸통이 어떻게 될지 생각않다가 차를 긁는다. 또 밥을 먹을때에는 

 식사를 하기 위해 숟가락을 열심히 뜬 기억만 있지 따로 숟가락을 내려놓는다던지 이후의 행동을 정의해두진 않는다.

 그것 처럼 최근의 모든 오류들도 그러했다.

 가장 자주하는 디버깅 포인트

 1. apiService를 이용한 모든 함수에 async await를 붙여주어여한다. 당연한데 잘 까먹는다.

 2. store에서 dispatcher 함수를 통해 가공한 객체는 가공후 다시 원래상태로 돌려주어야한다.

 3. CRUD 에서 create, update, delete를 통해 가공한 객체는 가공후 fetch 함수를 다시 사용해서 read 해와야한다.

 

오늘 난 오류는 뭘까?

 오늘 난 오류는 선택한 객체들의 아이디들을 모아서 백엔드에 전달하는데 아이디들을 전달하고 삭제후 이 아이디들을 담아놓은 컨테이너를 초기화

 해주지 않아서 지운 아이디들이 컨테이너에 남아있어 다음 요소를 삭제할때 이것을 삭제하지 못하고 아이디에 해당하는 객체를 찾을 수 없다고 계속 오류가 떴다.

 

 결론

 이런 디버깅 포인트들을 기록하고 모아서 숟가락으로 밥을 뜨면 식탁에 자연스럽게 내려두듯 그런 좋은 습관을 기르자.