회사에서 생긴일 - 화면에서 호출되는 함수 출력해서 디버깅하기

최근에 내가 작업하는 화면은 공룡사료 구입으로 발생된 비용을 입력, 검증, 관리하는 화면으로,

화면 앞단의 복잡도가 상상을 초월한다.
(backEnd 영역은 훨씬 더 복잡하겠지만 내가 참견할 영역은 아니고...)

그리고 사육사가 보다 편하게 사료값 입력을 할 수 있도록 ux를 개선하는 것이 내가 맡은 일이다.
(각 공룡별 사료는 정해져있고, 2depth로 구성된 selectbox를 화면에 추가하여 쉽게 사료종류를 선택하기 위함)



그러나 업무 프로세스가 너무 복잡하다보니 뭘 잘못 건드렸다간 돌이킬 수 없는 사고가 터질 수도 있다.

예를들어 초식공룡사업부 뽀로로양육팀은 사료 구매시에 초능력을 통해 구매할 수 없도록(둘리양육팀은 가능) 막아놨는데

업무 프로세스를 수정하는 과정에서 초능력을 통해 구매할 수 없도록 막는 로직을 스킵하게 된다면
나중에 이를 알아차리는게 굉장히 어려워진다.
(코드가 개판이라 별도의 validcheck 함수가 없는 상황이라면 더더욱)




그래서 난 쉽게 업무 프로세스를 파악하고 함수의 호출 순서를 확인하고자 했다.
매번 break point를 잡고 한줄씩 실행하는것은 부적합하다.
비동기 함수가 워낙 많기때문이다.

내가 생각한 방법은
화면에서 특정 업무 실행 시 실행되는 함수들이 호출될때마다 각 함수의 이름을 console에 출력하는 것이다.

그럼 콘솔창을 보고 특정 업무 실행시 함수가 어떤 순서로 실행되는지 한눈에 볼 수 있고, ctrl + F 버튼으로 함수 위치를 찾아볼 수 있다.
각 log의 호출지점을 개발자도구에서 선택하여 break point도 쉽게 찾을 수 있다

문제는 각 함수 호출 시에 해당 콘솔을 어떻게 띄우냐이다.
우선, 각 함수는 user라는 object에 전부 들어있다.
이때 내가 처음 구상한 것은 user object를 순회하면서
각 함수들을 아래와 같이 래핑하는것이다.

근데 코드를 실행해보니 일단 실행은 되는데,
안타깝게도 각 함수들의 매개변수를 가져올 수 없었다.


각 함수들을 toString으로 가져와 파싱하여 매개변수를 얻어오는 방법도 시도해봤는데
매개변수의 이름은 가져와도 실제로 호출할때 넘겨받은 매개변수 값은 가져올 수 없었다.

결국 피로해진 나는 걍 포기하고 다른 업무를 시작.

커피 한잔 때리고 산책 20분 때리고 주식 창 보고 숨을 고르고 나서 문득 모니터를 보다보니 생각난 아이디어

그것은 [정규식]이다.

걍 함수고 나발이고
잘 짠 정규식으로 각 함수 아래에 console.log를 추가해주면 된다.
디버깅 다 하고나선?
걍 ctrl+Z 한번 눌러주면된다.

요약 : 모로가도 서울만 가면 성공이다.