rustandbone Developer

JavaScript_Ajax, JSDoc

25 Jul 2023

테킷 멋쟁이사자처럼 JavaScript

인트로

자바스크립트 수업을 시작하면서 회고조와 함께 야무쌤의 인터넷 수강 계획까지 짰다. 일주일에 6일을 수강하는 계획이었는데, 하루하루 하다보니 수업과 싱크가 아주 잘 맞았다. 대부분 복습이나 예습 같은 느낌으로 수업과 강의가 잘 어우려졌다.
주말에 Ajax 강의 듣고, 어제는 CRUD 등 들었는데, 오늘 Ajax 들어가면서 복습 느낌으로 수업을 들을 수 있었다. 2시간 짜리 강의를 6시간 동안 풀어서 한 줄 한 줄 정성 다해 설명해주신 느낌.
왜 Ajax를 쓰고, get, post 메소드를 만들고, 결국 promise가 등장하게 되었는지까지 이해가 될 수 있었다.

Ajax

export function xhr({
  method = "GET",
  url = "",
  onSuccess = null,
  onFail = null,
  body = null,
  headers = {
    "Content-Type": "application/json",
    "Access-Control-Allow-Origin": "*",
  },
} = {}) {
  const xhr = new XMLHttpRequest();
  xhr.open(method, url);

  Object.entries(headers).forEach(([key, value]) => {
    xhr.setRequestHeader(key, value);
  });

  xhr.addEventListener("readystatechange", () => {
    const { status, readyState, response } = xhr;
    if (readyState === 4) {
      if (status >= 200 && status < 400) {
        onSuccess(JSON.parse(response));
      } else {
        onFail("실패");
      }
    }
  });

  xhr.send(JSON.stringify(body));
}
  • Ajax 진행 순서
    • open
    • setRequestHeader
    • readystatechange
    • send

xhr 함수에 일일이 매개변수 값으로 넣는 것부터 해서 객체를 전달해서 구조 분해 할당을 사용하는 것으로 점점 업그레이드했다.
CRUD 별로 메소드까지 만들어 필요한 매개변수만 전달했을 때, 각 기능이 수행되도록 완성했다.
get, delete 같은 경우 정보를 받아오기만 하면 되니까 send에 null을 넣어주면 되고, post, put은 보내주는 정보로 서버의 내용을 추가 및 수정해야 하니까 body에 내용을 담아 send해야 한다.

xhr.get = (url, onSuccess, onFail) => {
  xhr({
    url,
    onSuccess,
    onFail,
  });
};

xhr.post = (url, body, onSuccess, onFail) => {
  xhr({
    method: "POST",
    url,
    body,
    onSuccess,
    onFail,
  });
};

xhr.put = (url, body, onSuccess, onFail) => {
  xhr({
    method: "PUT",
    url,
    body,
    onSuccess,
    onFail,
  });
};

xhr.delete = (url, onSuccess, onFail) => {
  xhr({
    method: "DELETE",
    url,
    onSuccess,
    onFail,
  });
};

JSDoc

/**
 *
 * @param {string} url 서버와 통신할 주소
 * @param {function} onSuccess 서버와 통신 성공 시 실행될 콜백 함수
 * @param {function} onFail 서버와 통신 실패 시 실행될 콜백 함수
 * @return server data
 */
xhr.get = (url, onSuccess, onFail) => {
  xhr({
    url,
    onSuccess,
    onFail,
  });
};

자바스크립트의 큰 약점으로 전달인자로 들어가는 타입을 고정할 수 없다는 것이 있다. 그래서 타입스크립트 사용이 거의 필수적이라고 할 수 있는데, JSDoc으로 어떤 인자가 들어와야 하는지 명시 및 권고를 해줄 수 있다.
get 메소드의 경우 매개변수만 보아서는 string을 넣어야 하는지, function을 넣어야 하는지 알 수 없다. 분명 내가 그것을 의도했음에도 말이다.
/** */ 을 사용해서 JSDoc으로 각 파라미터의 타입을 정해줄 수 있으며, 그 함수를 사용할 때 어떤 타입을 넣어야 하는지 안내 및 권고가 가능하다.

Related posts