[JS] jQuery Ajax callback 함수에서 전역 변수에 값 대입하기

오늘 이것저것을 하던 중 Ajax의 결괏값을 변수에 대입하려고 하였는데 아무리 변수에 대입을 해도 원하는 결과가 나오지 않았다.

 

var useYn;

$.ajax({
  url: 'http://localhost:8080/example',
  dataType: "json",
  type: "POST",
  data: { userSeq: $('#userSeq').val() },
  success: function (result) {
    useYn = result;
  },
});

 

이런 식으로 사용자의 시퀀스로 DB에 사용 여부를 조회한 다음 true, false를 useYn에 대입해주려고 하였다. 

그런데 계속 원하는 결과가 나오지 않았고 디버그를 해보니 useYn의 값이 계속해서 undefined 였다.

 

그냥 넣으면 넣는 대로 들어가지 왜 안 들어가는 것인가...

 

그래서 jQuery.ajax() 문서를 보니 ajax는 기본적으로 비동기식으로 작동하기 때문에 전역 변수에 값을 대입하기 위해서는 동기식으로 동작하게 해주어야 했다.

 

ajax를 동기식으로 동작하게 하기 위해서는 async 옵션을 변경해주면 되는데, 기본적으로는 비동기식이기 때문에 true로 설정되어 있다. 때문에 내가 작성한 코드에서는 값을 읽어오기 전에 다른 작업이 먼저 끝나 원하는 결과를 내지 않는 것이었다.

 

그런 것이다. 한참 promise와 async, await로 씨름을 한 적이 있으면서도 아직도 깨닫지 못하고 이런 문제로 몇십 분을 날린 거다.

 

그래서 해결 방법은 간단했다. 그냥 ajax 호출 부분에 async:false 이 단 한 줄만 추가해주면 해결되는 문제였다.

 

var useYn;

$.ajax({
  url: 'http://localhost:8080/example',
  dataType: "json",
  type: "POST",
  data: { userSeq: $('#userSeq').val() },
  async:false,
  success: function (result) {
    useYn = result;
  },
});

 

이렇게 말이다.

 

고작 저 한 줄 때문에...

 

이제부터 어떤 문제가 발생하면 왜 그런지 해당 부분이 어떻게 동작하는지 먼저 생각한 다음 수정에 들어가야겠다. 

 

이 문제로 거의 30분을 날린 걸 생각하면 오늘 하루가 너무 아깝다.