어중간한 레거시 코드가 진짜 어지럽네요

신입이라 로그인쪽 개선하려고 실 서비스에서도 그대로 쓰이는 중인

php 백엔드랑 vue 프론트인 레거시 코드 보는데

열심히 읽고 상사님께 도움 받아 구조, 상황 파악해서 제시 받은 문제 상황의 디버깅도 성공했으니

이제 로그인 구조 개편이나 리팩토링 시도해보라는 업무를 받았습니다.

그래서 으흐흐 드디어 나두 코드 쓴다~ 하고 보는데

일단 로그인 체크랑 로그인 지연 체크하는 API 를 통합하고 싶어서

사용처를 알아보니 프론트 컴포넌트에서 여러군데에서 호출하더군요.

가서 보니까 vue 코드라 막 html + script + css 한바닥에 다 써져있는건 별 문제가 안 되는데

@ 어노테이션이랑 Java 의 메서드 참조마냥 :: ? 로 되어 있었나 하튼 이게 막 html 코드에 섞여 있고

버튼을 클릭했을 때 어떤 action 이 순서대로 발생하는지 감도 안 오고

대충 보니 그 파일 내에서 공유하는 전역 변수 같은거 생성은 여기서 하고, 내용 수정은 저기서 하고,

그러다 보니까 로그인 지연 체크 API 를 호출해서 boolean 값 받아 보고 이후 진행하는 메서드에서

로그인 부분이랑은 관련 없지만 코드가 스파게티에 테스팅 1도 안 되어 있어서

실 서비스에서도 똑같이 사소한 에러가 발생하는 상황인데

디버깅해보려고 해도 대체 얘는 어디서 파라미터를 전달 받은거고

왜 여기서 객체를 수정하는건지 흐름을 모르겠으니 답도 없네요.

차라리 아예 완전 레거시라 뭐 JQuery 로 되어 있다거나 하면

분량은 더 늘어나도 결국 한줄 한줄 읽어나가다 보면 될텐데

이건 애매하게 레거시라 Vue 로 되어 있긴한데

좀 다뤄봤던 리액트처럼 흐름 파악도 안 되고 어지럽습니다.

Vue 가 리액트 단점 개선하겠다고 나온거 아닌가요 ㅋㅋ ㅠㅠ