콜백 지옥 벗어나기

두번 쨰 프로젝트로 맡은 SM 업무에서 수정할 일이 있어 소스 코드를 보니 밑에 와 같이 나왔다.
아무래도 오래된 프로젝트이고, 초급 개발자 분들이 지나갔던 만큼 하드 코딩으로 된 부분도 많았고, 다른 클래스를 갔다가 또 거기서 다른 클래스를 가는 결합도과 굉장히 큰 프로세스 되어 있었다.

* 현재 프로젝트는 자바를 연결해서 하는것은 거의 없었고 mybatis.xml 파일에 직접 찾아 SQL을 쓰는 프로젝트라고 알아주셨으면 좋겠다. 거의 모든 작업은 프론트에서 진행되며, 회사 내부망에서만 사이트가 허용하는 프로젝트입니다.

소스가 너무 길고 depth가 깊어 뭐가 뭔지 알기 힘들었다.
수정은 할 수 있었지만 소스를 파악하는 시간이 많이 걸렸다.
혹시나 잘못 수정하게 되면 기존의 잘 작동되었던게 안될까봐 겁이 많이 났다.
결론은 소스를 보자마자 집에 가고 싶었다.

ajax 를 호출 후 제가 운영하는 사이트와 다른 곳에 보내는 소스 코드였다.
여기서, 추가되는 작업이 다른 사이트에서 무언가 DB에러가 있어 에러 응답값을 줄 경우 우리쪽에 저장을 하지 않고, 처음 호출 했던 곳에 다시 전송하는 기능을 추가하는 것을 해야 했다.

기존 소스 어딘가에 실패되었다고 다른 사이트에게 알려주는 값을 주면 되었다.
$.ajax를 추가적으로 넣으면 되지만, 만약에 여기서 저 소스에 다른 기능이나 예외처리, 다른 기능 등이 추가 되면 유지보수 하기 힘들어 수정을 하게 되었다.

위와 같은 현상을 콜백 지옥이라고 불리는 신입들이 처음으로 많이 겪는 문제였다.
요즘은 ES6 의 기능이 추가되면서 then 이난 Promise 같은 기능을 이용하면 편하겠지만, 지금 프로젝트는 인터넷 익스플로러 까지 지원을 하여야 하기 떄문에 그 점은 생각하는 곳에서 빼버렸다.

$.simpleAjax = function (url) {
	var result = {};

 	$.ajax({
    	url: url,
        method: "GET",
        async: false,
        success: function (data) {
            result.status = "ok";
            result.data = data;
        },
     });

    return result;
 };

 // 공장 서버에 호출
function call_factory() {
  return $.simpleAjax(“http://localhost:3000/cars”);
}

// 부모 사이트에 데이터 보내기
function call_parent() {
   return $.simpleAjax(“http://localhost:3000/cars”);
}

var firstData = call_factory();
var secondData;
if(firstData.status ==‘ok’) 
    secondData = call_parent();

// 리턴 데이터가 제대로 돌아오지 않으면 공장 서버 다시 호출
if (!data) {
	call_factory();
}

이런식으로 수정하여 유지보수를 진행하였습니다.

기본이 되는 $.ajax 를 하나로 묶어 재사용에 사용을 하였으며, 함수 내용을 보지 않아도 이런식으로 진행 되겠구나 라고 진행되게 소스 코드를 수정 했던 적이 있다.

이것이 발판이 되어 10년이 된 프로젝트의 레거시들 까지 수정 작업을 하게 되었다.