자바스크립트 완벽 가이드 책 내용 일부를 발췌 정리한 내용입니다.

비동기 자바스크립트

웹 브라우저의 자바스크립트 프로그램은 일반적으로 이벤트 주도적입니다. 즉, 프로그램이 실제로 무언가를 실행하기 전에 사용자가 뭔가 클릭하거나 탭하기를 기다린다는 뜻입니다. 비동기적이라는 말은 데이터가 들어오거나 어떤 이벤트가 일어날 때까지 계산을 멈추고 대기하는 일이 잦다는 뜻입니다. 자바스크립트에는 이런 비동기 프로그래밍이 필요할 때가 많습니다. ES6에서 도입한 프라미스는 비동기 동작의 아직 사용할 수 없는 결과를 나타내는 객체입니다. 키워드 async 와 await 는 프라미스 기반 코드를 마치 동기적인 코드처럼 작성할 수 있게 해서 비동기 프로그래밍을 단순화하는 새 문법을 제공합니다.

콜백과 비동기 프로그래밍

자바스크립트에서 가장 기본적인 비동기 프로그램은 콜백을 통해 이뤄집니다. 콜백은 다른 함수에 전달하는 함수입니다. 콜백을 전달받은 함수는 어떤 조건을 만족하거나 어떤 (비동기) 이벤트가 일어나면 우리가 제공한 함수를 호출(콜백) 합니다. 전달한 콜백 함수를 호출할 때는 조건이나 이벤트에 대한 정보를 제공하며 때때로 함수 인자를 통해 세부 사항을 추가로 제공하기도 합니다.

타이머

일정 시간이 지나고 코드를 실행하는 것도 단순한 비동기 프로그램 유형중 하나입니다.

setTimeout(checkForUpdates, 60000);

setTimeout() 의 첫 번째 인자는 함수이고 두 번째 인자는 밀리초로 지정한 시간입니다. 위 코드는 setTimeout() 을 호출하고 60,000 밀리초, 즉 1분이 지나면 checkForUpdates() 함수를 호출합니다. checkForUpdates() 는 우리가 프로그램에서 정의한 콜백 함수이며 setTimeout()은 콜백 함수를 등록하고 호출할 비동기 조건을 지정하기 위해 호출하는 함수입니다.

이벤트

클라이언트 사이드 자바스크립트 프로그램은 거의 대부분 이벤트 주도적입니다. 이들은 미리 지정된 계산을 실행하기보다는 사용자가 뭔가 하길 기다렸다가 그 행동에 반응합니다. 웹 브라우저는 사용자가 키를 누르고, 마우스를 움직이고, 마우스 버튼을 클릭하고, 터치스크린을 터치할 때 이벤트를 일으킵니다. 이벤트 주도 자바스크립트 프로그램은 지정된 컨텍스트에 지정된 타입의 이벤트를 처리할 콜백 함수를 등록하고, 웹 브라우저는 지정된 이벤트가 일어날 때마다 함수를 호출합니다. 이런 콜백 함수를 이벤트 핸들러, 이벤트 리스너라고 부르며 addEventLister()를 통해 등록합니다.

let okay = document.querySelector('#confirmUpdateDialog');

okay.addEventListener('click', applyUpdate);

위 예제의 applyUpdate() 는 어딘가에 만들어 둔 가상의 콜백 함수 입니다. document.querySelector()를 호출하면 웹 페이지에서 지정된 요소를 하나 찾아 그를 참조하는 객체를 반환합ㄴ디ㅏ. 이 요소에서 addEventListener() 를 호출해 콜백을 등록합니다. addEventLister() 의 첫 번째 인자는 주시할 이벤트를 지정하는 문자열입니다. 사용자가 해당 요소를 클릭하면 브라우저는 applyUpdate() 콜백 함수를 호출하고 클릭 시간이나 마우스 좌표 같은 세부 사항이 포함된 객체를 전달합니다.

네트워크 이벤트

네트워크 요청 역시 자바스크립트 프로그래밍의 대표적인 비동기 유형 중 하나입니다. 브라우저에서 실행되는 자바스크립트는 다음과 같은 코드로 웹 서버에서 데이터를 가져올 수 있습니다.

function getCurrentVersionNumber(versionCallback) { // 콜백을 인자로 받음
    
    // 백엔드 API 에 HTTP 요청
    let request = new XMLHttpRequest();
    request.open("GET", "http://www.example.com/api/version");
    request.send();

    // 응답 받을 때 호출할 콜백 등록
    request.onload = function() {
        if(request.status === 200) {
            // HTTP 상태가 OK 면 버전 번호를 가져와 콜백 호출
            let currentVersion = parseFloat(request.resposeText);
            versionCallback(null, cerrentVersion);
        } else {
            // 그렇지 않다면 콜백에 에러 보고
            versionCallback(response.statusText, null);
        }
    }
    // 네트워크 에러가 생겼을 때 호출할 다른 콜백 등록
    request.onerror = request.ontimeout = function(e) {
        versionCallback(e.type, null) 
    }
}

클라이언트 사이드 자바스크립트 코드는 XMLHttpRequest 클래스와 콜백 함수를 사용해 HTTP 요청을 보내고 서버의 응답을 비동기적으로 처리할 수 있습니다. 여기서 정의한 getCurrentVersionNumber() 함수는 HTTP 요청을 보내고, 서버의 응답을 받거나 타임아웃 또는 기타 에러로 요청이 실패했을 때 호출할 이벤트 핸들러를 등록합니다.
위 코드는 addEventListener() 를 호출하지 않고 객체 프로퍼트에 이벤트 리스너를 직접 할당했습니다. 여기서는 onload, onerror, ontimeout 프로퍼티에 함수를 할당했습니다.