[자바스크립트 완벽 가이드] 비동기 프로그래밍이란?

비동기적이란?

데이터가 들어오거나 어떤 이벤트가 일어날 때까지 계산을 멈추고 대기하는 일이 잦다는 뜻

 

• 웹 브라우저의 자바스크립트는 이벤트 주도적이다. 그 의미는 프로그램이 실제로 무언가를 실행하기 전에 사용자가 뭔가 클릭하거나 탭하기를(이벤트) 기다린다는 뜻.
• 자바스크립트를 사용하는 서버는 일반적으로 Network를 통해 클라이언트 요청이 들어온 후에야 작업을 시작한다.

 

콜백과 비동기 프로그래밍

• 비동기 프로그래밍은 콜백을 통해 이루워진다. 콜백이란 다른 함수에 전달하는 함수이다.
• 콜백을 전달받은 함수는 1) 어떤 조건을 만족하거나 2) 어떤 (비동기) 이벤트가 일어나면 제공한 함수를 호출(콜백)한다.
• 콜백 기반 비동기 프로그래밍의 예시: 타이머, 이벤트, 네트워크 이벤트, 노드의 콜백과 이벤트 등

 

예시

• 타이머 : setTimeout(checkForUpdates, 60000);
• setTimeout의 첫 번째 인자는 함수이고 두 번째 인자는 밀리초로 지정한 시간이다. 위 코드는 setTimeout을 호출하고 60,000초, 즉 1분이 지나면 chekForUpdates() 함수를 호출한다.
• setTimeout()은 인자는 전달하지 않고 지정된 콜백 함수를 한 번 호출하고서, 그 함수에 대해 잊어버린다. 한 번 호출하고 마는 함수 말고 정말로 업데이트를 체크하는 함수가 필요하다면 반복적으로 실행해야 한다. => 이 경우 setInterval() 사용

 

📌 이벤트

let okay = document.querySelector(#main button.okay);

// 사용자가 버튼을 클릭하면 호출될 콜백 함수를 등록합니다.
okay.addEventListener('click', 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.responseText);
    } else {
    	// 그렇지 않다면 콜백에 에러를 보고합니다.
        versionCallback(response.statusText, null);
    }
};
// 네트워크 에러가 생겼을 때 호출할 다른 콜백을 등록합니다.
	request.onerror = request.ontimeout = function(e) {
	versionCallback(e.type, null);
	};
}

• 클라이언트 사이드 자바스크립트 코드는 XMLHttpRequest 클래스와 콜백 함수를 사용해 HTTP 요청을 보내고 서버의 응답을 비동기적으로 처리할 수 있다.
• 여기서 정의한 getCurrentVersionNumber() 함수는 HTTP 요청을 보내고, 서버의 응답을 받거나 타임아웃 또는 기타 에러로 요청이 실패했을 때 호출할 이벤트 핸들러를 등록한다.
• 같은 객체, 같은 이벤트 타입에 다른 리스너를 추가로 등록하지 않을 것이라고 확신한다면 적절한 콜백 함수를 프로퍼티로 할당하는 편이 더 간편하다. => 위 예제에서는 onload, onerror, ontimeout 프로퍼티에 함수 할당

 

📌  노드의 콜백과 이벤트

• 서버 사이드 자바스크립트 환경인 노드는 비동기적으로 만들어져 있으며 많은 API가 콜백과 이벤트를 사용한다.
• 예시로 파일 콘텐츠를 읽는 기본 API도 비동기적이며 파일 콘텐츠를 읽으면 콜백 함수를 호출한다.

const fs = require("fs"); // fs 모듈은 파일 시스템 관련 API
let options = {			  // 프로그램에서 사용할 옵션 객체
	// 여기에 기본 옵션을 작성
};

// 설정 파일을 읽고 콜백 함수를 호출한다.
fs.readFile("config.json", "utf-8", (err, text) => {
	if (err) {
    	// 에러가 있으면 경고를 표시하고 계속 진행
        console.warn("Could not read config file:", err);
    } else {
    	// 에러가 없으면 파일 콘텐츠를 분석하고 옵션 객체에 할당
        Object.assign(options, JSON.parse(text));
    }
    
    // 어느 쪽이든 이제 프로그램을 실행할 수 있다.
    startProgram(options);
});

 

출처

최근 자바스크립트 강의에서 추천하는 이 책을 구매해봤다. 최신 7판이 나와 최신 문법을 보기에도 좋다. 두꺼운 책 양에 거리낌이 생길 수 있지만 틈틈히 공부하다 관련 개념을 찾는 식으로 공부하면 완독 가능할거라 생각한다! 생각보다 잘 읽히고 개념 정리하기 좋아 추천하는 이유를 알겠다 👍🏼