자바스크립트 입문 2주차 회고

자바스크립트에서 HTTP 요청과 콜백함수: 비동기 프로그래밍의 핵심 개념

HTTP란 무엇인가?

HTTP란 Hypertext Transfer Protocol의 약자로, 인터넷에서 데이터를 주고받을 때 사용되는 통신 규약이다. 이를 사용하면 클라이언트와 서버 간에 요청(request)과 응답(response)을 주고 받을 수 있다.

HTTP는 웹 브라우저와 웹 서버 간의 통신에서 가장 많이 사용됩니다. 브라우저는 HTTP를 사용하여 웹 페이지나 이미지, 동영상 등의 데이터를 서버에서 요청하고, 서버는 이에 대한 응답을 보내줍니다.

HTTP는 기본적으로 텍스트 기반의 프로토콜이지만, 최근에는 바이너리 기반의 프로토콜인 HTTP/2가 등장하여 성능 개선에 기여하고 있습니다.

콜백함수

콜백함수(callback function)란, 다른 함수의 인자로 전달되어, 필요한 시점에 호출되는 함수입니다.

자바스크립트에서는 함수도 객체로 취급되므로 함수를 인자로 전달할 수 있습니다. 이때 전달된 함수가 콜백함수가 됩니다.

콜백함수는 비동기적인 프로그래밍에서 많이 사용됩니다. 예를 들어, 비동기적인 함수에서 작업이 완료된 후에 어떤 동작을 실행하고 싶을 때 콜백함수를 사용합니다. 이때, 비동기 함수는 작업을 실행한 후, 콜백함수를 호출하여 결과를 전달합니다.

비동기 프로그래밍의 핵심 개념

자바스크립트에서 HTTP 요청을 처리하는 것은 매우 중요합니다. 이를 통해 서버와 통신하고 데이터를 받아오거나 전송할 수 있습니다. 하지만 HTTP 요청은 비동기적으로 처리되므로 콜백함수를 사용하여 요청 완료 후에 실행할 작업을 지정해야 합니다.

콜백함수는 함수를 다른 함수의 인자로 전달하고, 전달된 함수가 실행 완료되면 다시 호출되는 함수입니다. 이를 통해 비동기적으로 실행되는 코드의 순서를 조정할 수 있습니다.

아래 코드는 이전에 토이프로젝트를 진행하며 작성한 코드로 간단한 회원가입을 수행하는 함수입니다.

function register() {
  // 서버에 입력된 회원 정보를 전달하는 함수
  if (validateregister()) {
    // 비밀번호 체크 true의 경우에만 API 호출
    $.ajax({
      type: "POST",
      url: "/api/register",
      data: {
        id_give: $("#userid").val(),
        pw_give: $("#userpw").val(),
        nickname_give: $("#usernick").val(),
      },
      success: function (response) {
        // 회원가입 성공시 로그인 화면으로 이동
        if (response["result"] == "success") {
          alert("회원가입이 완료되었습니다.");
          window.location.href = "/login";
        }
      },
    });
  }
}

‘success’ 콜백함수는 요청이 성공적으로 완료되면 실행됩니다. 응답 데이터는 response 매개변수로 전달되며, 이를 기반으로 회원가입 성공 여부를 판단합니다.

AJAX(Asynchronous JavaScript and XML)는 비동기적으로 서버와 통신할 수 있는 기술로, 웹 페이지의 일부를 새로고침 없이 업데이트하거나, 서버로부터 데이터를 받아와 화면에 표시할 수 있습니다.

$.ajax()함수가 호출되면, 해당 함수는 비동기적으로 서버와 통신하여 데이터를 전송하고, 서버로부터 응답을 받을 때까지 기다리지 않습니다. 대신에, 코드 실행은 계속 진행되고, 응답이 도착하면 success 함수가 실행됩니다. 따라서 이 코드는 비동기 처리 방식으로 동작합니다.

HTTP와 콜백함수를 사용하는 것은 비동기 프로그래밍의 핵심 개념 중 하나입니다. 비동기식 처리의 경우 작업이 순차적으로 처리되지 않고 작업이 완료되지 않은 상태에서 다음 작업을 수행할 수 있습니다. 이러한 방식은 작업 간의 순서가 중요하지 않은 경우에 사용됩니다.

예를 들어 회원가입을 하기 위해서 ID와 PW, 이름을 입력 받아야할 때, 반드시 ID, PW, 이름 순으로 입력받지 않아도 됩니다. 다른 작업을 먼저 수행하며 입력을 기다려도 되기 때문에 이러한 경우 비동기식 처리가 유리합니다.

그와 반대로 접속한 순서대로 번호표를 나눠주어야하는 프로그램이 있다고 한다면 이는 순서대로 처리하고 다음 명령을 기다려야합니다. 이 경우에는 동기식 처리가 필요합니다.