Prompt 기능으로 Callback과 Promise 비교하기

요즘 매일 아침 팀원들과 함께 분량을 정해 약 30분간 기획 강의를 듣는다. 듣고나면 팀장님이 사다리 타기로 한 명을 지정해 문제를 주시는데 오늘은 동료에게 강의 내용 대신 Javascript 문제를 내주셔서 함께 풀어보았다.

 

Q. 다음 버튼 A를 누르면 Prompt 창이 뜨고, 입력 받은 값이 하단의 <p> 태그에 들어간다.
B 버튼을 눌러 뜨는 모달 창이 동일한 동작을 하도록 코드를 작성하시오.

<button id="aa">값변경(prompt사용)</button>
<button id="bb">값변경(bootstrap modal사용)</button>

<div id="test">안녕하세요. Test 값입니다.</div>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <input type="text" class="prompt" id="modal_input" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">취소</button>
        <button type="button" id="modal_button_ok" class="btn btn-primary">확인</button>
      </div>
    </div>
  </div>
</div>

var myPrompt = function () {
  // 정답 작성
}

$(function () {
  $("#aa").click(function () {
    var a = prompt("값을 입력해주세요.");
    if (a) {
      $("#test").text(a);
    }
  });

  $("#bb").click(function () {
    myPrompt(function (v) {
      $("#test").text(v);
    });
  });
});

 

문제를 푸는데 메신저로 Promise, Callback이라고 힌트를 주셨다.

아래는 각각 Callback 함수와 Promise를 이용한 답이다.

 

// Callback 함수 이용
var myPromptCallback = function (o) {
  $("#modal_input").val("");
  var myModal = new bootstrap.Modal(document.getElementById('exampleModal'), {});
  myModal.show();

  document.getElementById('modal_button_ok').addEventListener("click", function () {
    o($("#modal_input").val());
    this.removeEventListener("click", arguments.callee);
    myModal.hide();
  });
}

// Promise 이용
var myPromptPromise = function () {
  $("#modal_input").val("");
  var myModal = new bootstrap.Modal(document.getElementById('exampleModal'), {});
  myModal.show();

  return new Promise(function (resolve, reject) {
    document.getElementById('modal_button_ok').addEventListener("click", function () {
      resolve($("#modal_input").val());
      this.removeEventListener("click", arguments.callee);
      myModal.hide();
    });
  });
}

$(function () {
  $("#aa").click(function () {
    var a = prompt("값을 입력해주세요.");
    if (a) { // 값이 입력된 경우에만 변경된다.
      $("#test").text(a);
    }
  });

  $("#bb").click(function () {
    myPromptCallback(function (v) {
      $("#test").text(v);
    });
  });

  $("#cc").click(function () {
    myPromptPromise().then(function (v) {
      $("#test").text(v);
    });
  });
});

 

간단한 로직이기 때문에 두 문법이 거의 유사한 방식인 것을 알 수 있다.

 

다만, Callback 처리를 다중으로 해야 할 경우 콜백을 인자로 넘겨야 하는 것이 문제가 될 수 있는데, Promise는 그럴 필요가 없어 특정 상황에서 조금 더 나은 방식이라고 한다.