지옥의 Legacy CODE
아르바이트 업무 수행 중 JupyterHub에서 짜놓은 JQuery AJAX, 아르바이트 전임자가 짜놓은 JQuery, 아르바이트 전임자가 짜놓은 Fetch, 내가 짠 Fetch까지 해서 지옥의 LEGACY CODE를 유지보수하고 있다. 유지보수를 하면서 골치아픈 점을 천천히 정리해보고자 한다.
문제점
- JupyterHub가 짜놓은 AJAX는 Promise를 리턴한다.
- 전임자가 짜놓은 AJAX는 Promise를 리턴하지 않는다.
- JQuery ajax()의 option과 Fetch()의 option은 파라미터를 받는 방식이 다르다.
위의 세가지가 나를 너무 골치아프게 만들었다. 심지어 코드들이 워낙 스파게티라 손을 대기가 아주 곤란한 상태이다. 그래서 JQuery ajax()의 option 작성 방식과 Fetch()의 option 작성 방식을 정리해놓고 차이를 명확히 구분하고자 한다.
JQuery AJAX
JQuery.ajax([url, [settings]]) 의 형태로 정의되어 있다. url은 String이고 settings는 자바스크립트의 PlainObject이다. settings에 들어갈 수 있는 key는 다음과 같다.
JQuery 1.5 이상
accepts, async, beforeSend, cache, complete, contents, contentType, context, converters, crossDomain, data, dataFilter, dataType, error, global, headers, ifModified, isLocal, jsonp, jsonCallback, method, mimeType, password, process, Data, scriptAttrs, scriptCharset, statusCode, success, timeout, traditional, type, url, username, xhr, xhrFields
각 key들의 설명은 공식문서에 잘 설명이 되어있다. 이번 포스팅에서는 몇가지 key들만 정리해놓고자 한다.
settings properties
method
GET, POST, PUT 등 HTTP method를 정의한다.
data
PlainObject, String, Array 의 형태를 받을 수 있다. body에 들어가는 부분이다. GET 통신일 경우에는 URL에 붙어서 전송된다.
dataType
서버의 Response로부터 기대하는 값을 정의한다. 기본 값은 Intelligent Guess 방식이다. xml, json, jsonp, script, html, text을 정의할 수 있고 여러개를 지정할 수도 있다. ex) text xml
contentType
전송할 데이터의 유형을 정의한다. application/json, multipart/form-data, text/plain 같은 옵션이 존재한다. (이제 W3C XMLHttpRequest가 charset을 항상 UTF-8로 지정해준다고 한다.)
async
비동기식으로 처리 여부를 결정한다. default는 true이므로 비동기식으로 진행된다. 가끔 동기식 처리가 필요할 때 false로 바꿔보자
success(Anything data, String textStatus, jqXHR jqXHR)
요청이 성공했을 때 실행되는 함수이다.
error(jqXHR jqXHR, String textStatus, String errorThrown)
요청이 실패했을 때 실행되는 함수이다.
beforeSend(jqXHR, PlainObject settings)
ajax 통신을 시작하기 전 수행되는 작업을 정의하는 함수이다. 이것은 Ajax Event 형식이다. 만약 false를 return하면 ajax 통신이 취소된다.
complete(jqXHR jqXHR, String textStatus)
ajax 통신이 끝난 후 수행되는 작업을 정의하는 함수이다. success(), error()가 수행 된 후 항상 실행되도록 하는 함수이다.
예제코드
업무 중 Front에서 AJAX 요청을 보내고 API는 AJAX 요청을 받으면 linux os에서 Popen을 통해 어떠한 작업을 실행하는 로직을 작성한 경험이 있다. 그런데 문제는 Popen의 작업이 끝나기 전에 Front에서 다시 요청을 보내면 버그가 생기는 로직이었다. 이를 해결하기 위해 AJAX를 동기처리를 했는데 그에 대한 예제코드를 작성해봤다. 미래의 나에게 도움이 되기를...
.jpg)