고난도 레거시 코드에서 살아남는 방법

부트 캠프를 마치고 첫 번째로 들어간 회사에서 한 웹앱을 유지보수하게 됐다.

배운적 없는 php와 jquery가 대부분의 지면을 차지했다.

그래도 jquery는 자바스크립트를 약식으로 쓴 모양과 비슷해서 이해하기 어렵지 않았다.

보통 처음 오면 그렇듯 코드를 보며 어떻게 돌아가는지 파악하는 시간을 가졌다.

그러나 말로만 들었던 콜백 지옥을 만나게 됐다.

비동기 요청에 요청에 요청에 꼬리를 무는 콜백 함수가 많았고

그럴 필요가 없는 곳에서까지도 함수 뒤쪽에 또다른 함수가 호출되는 형태의 코드가 대부분이었다.

타고 타고 들어가다 보면 이게 뭘하는 함수였지라며 길을 잃고 만다.

글을 쓰는 지금 시점에서 보더라도 봤던 코드 중에 가독성 쪽으로는 최고 난이도였다.

일하다 못 버티고 떠난 인턴들이 한 둘 아니라고 했던 말이 이해됐다.

그래도 좋은 지향을 가진 회사라 들어왔기 때문에 실력 발휘를 해야 했다.

정리를 하는 것 말고는 답이 없다고 생각했던 것 같다.

맥에서 제공하는 마인드 맵 어플(mind node)을 이용해서 각 함수가 어떤 역할을 하는지 어떤 함수를 또 호출하는지 그림을 그렸다.

그나마 위처럼 정리하니 앱의 로직이 어떻게 흘러가는지 파악할 수 있었다.

파악한 것을 토대로 함수들을 콜백 지옥에서 하나씩 끌어올렸다.

Promise

대부분 로직이 비동기였기 때문에 Promise가 빛을 발했다.

Promise로 콜백 함수들의 끝나는 시점을 컨트롤 하게 되니

사방팔방에서 호출되던 함수들을 한 곳에서 호출할 수 있어 한 눈에 보기도 좋고 이해하기 쉬웠다.

IE까지 대응 해야해서 폴리필도 필요했고 살 떨려서 async, await 문법까지 쓰지는 못했지만

then, then, then만으로도 만족스러운 결과를 가져왔고

코드 가독성을 높여 유지보수 시간을 덜 들게 했다.

아무리 어려운 코드라도 하나씩 하나씩 정리하면 답이 나온다는 것을 알게 된 소중한 경험이었다.