📌 목차
자바스크립트 완벽가이드 13장 비동기 자바스크립트에 대한 간략적인 요약글 입니다.
- 🌱 콜백과 비동기 프로그래밍
- 타이머
- 이벤트
- 네트워크 이벤트
- 노드의 콜백과 이벤트
-
🌱 프로미스
- 프로미스의 사용
- 프로미스의 에러처리
- 프로미스 체인
- 프로미스 해석
- 프로미스와 에러
- catch와 finally
- 병렬 프로미스
- 프로미스 생성
- 다른 프로미스에 기반한 프로미스
- 동기적인 값을 기반으로 하는 프로미스
- 처음부터 만드는 프로미스
- 프로미스 시퀀스
-
🌱 async와 await
- await 표현식
- async 함수
- 여러개의 프로미스 대기
- 세부사항
-
🌱 비동기 순회
- for/await 루프
- 비동기 이터레이터
- 비동기 제너레이터
- 비동기 이터레이터 구현
📌 콜백과 비동기 프로그래밍
비동기 적이란 말은 데이터가 들어오거나 어떤 이벤트가 일어날 때까지 계산을 멈추고 대기하는 일이 잦다는 뜻입니다.
웹 브라우저의 자바스크립트 프로그램은 일반적으로 이벤트 주도적입니다.
즉, 프로그램이 실제로 무언가를 실행하기 전에 사용자가 뭔가 클릭하거나 탭하기를 기다린다는 뜻입니다.
자바스크립트에서는 이런 형태의 비동기 프로그래밍이 필요할 때가 많으며, 콜백과 promise, async와 await과 같이 비동기적인 코드를 다루는 강력한 기능을 제공하면서도 정작 그 코어에는 비동기적인 부분이 전혀 없습니다.
자바스크립트에서 가장 기본적인 비동기 프로그래밍은 콜백을 통해 이루어집니다.
- 콜백 (callback) : 다른 함수에 전달하는 함수
클라이언트 사이드 자바스크립트와 노드에서 사용하는 콜백 기반 비동기 프로그래밍의 대표적인 유형은 아래와 같습니다.
- 타이머
- 이벤트
- 네트워크 이벤트
- 노드의 콜백과 이벤트
🔗 타이머
🌱 setTimeout()
const printHi = () => console.log('hi');
// setTimeout으로 타이머 설정 - 3s 뒤에 printHi 함수를 실행
setTimeout(printHi, 3000);일정 시간이 지나면 코드를 실행하는 것도 단순한 비동기 프로그램 유형 중 하나입니다.
setTimeout() 은 콜백 함수를 등록하고 호출할 비동기 조건을 지정하기 위해 호출하는 함수입니다.
🌱 setInterval() 과 clearInterval()
인자는 전달하지 않고 지정된 콜백 함수를 한 번 호출하고서, 그 함수에 대해 잊어버리기 때문에 만약 반복적으로 콜백 함수를 실행해야 하는 경우에는 setInterval()을 사용합니다.
const printHi = () => console.log('hi');
// 3s 마다 반복적으로 printHi 함수를 실행
const updateInterval = setInterval(printHi, 3000);
// setInterval의 종료 조건 설정 - clearInterval에 반환하는 값을 넘겨 중단시킴
const stopInterval = () => clearInterval(updateInterval);
// 반복 종료
stopInterval();🔗 이벤트
클라이언트 사이드 자바스크립트 프로그램은 거의 대부분 이벤트 주도적입니다.
이벤트 주도 자바스크립트 프로그램은 지정된 컨텍스트에 지정된 타입의 이벤트를 처리할 콜백 함수를 등록하고, 웹 브라우저는 지정된 이벤트가 일어날 때마다 함수를 호출합니다.
🌱 addEventListener()
이러한 콜백 함수를 이벤트 핸들러, 이벤트 리스너라고 부르며 addEventListener()를 통해 등록합니다.
// CSS 선택자에 일치하는 HTML <button> 요소를 나타내는 객체를 웹 브라우저에 요청
const btn = document.querySelector('#btn');
const printHi = () => console.log('hi');
// 사용자가 버튼을 클릭하면 호출될 콜백 함수를 등록
btn.addEventListener('click', printHi);document.querySelector()를 호출하면 웹 페이지에서 지정된 요소를 하나 찾아 그를 참조하는 객체를 반환합니다.
addEventListener()의 첫번째 인자는 주시할 이벤트를 지정하는 문자열입니다.
사용자가 이벤트를 실행하면 두번째 인자에 있는 콜백함수를 호출하게 됩니다.
🔗 네트워크 이벤트
네크워크 요청 역시 자바스크립트 프로그래밍의 대표적인 비동기 유형 중 하나입니다.
🌱 XMLHttpRequest 클래스와 콜백함수
- onload, onerror, ontimeout 프로퍼티
// getCurrentVersionNuber함수는 HTTP 요청을 보내고,
//서버의 응답을 받거나 타임아웃 또는 기타 에러로 요청이 실패했을 때 호출할 이벤트 핸들러를 등록합니다.
function getCurrentVersionNuber(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);
versionCallback(null, currentVersion);
} else { // 그렇지 않으면 콜백에 에러를 보고합니다.
versionCallback(response.statusText, null);
}
}
// 네트워크 에러가 생겼을 때 호출할 다른 콜백을 등록합니다.
request.onerror = request.ontimeout = function(e) {
versionCallback(e.type, null);
}
}클라이언트 사이드 자바스크립트 코드는 XMLHttpRequest 클래스와 콜백함수를 사용해 HTTP 요청을 보내고 서버의 응답을 비동기적으로 처리할 수 있습니다.
대부분의 웹 API는 이벤트를 발생시키는 객체에서 addEventListener()를 호출하는 방식으로 이벤트 핸들러를 정의하며, 콜백 함수와 함께 주시할 이벤트를 전달하지만 더 일반적으로 객체의 프로퍼티에 이벤트 리스너를 직접 할당하는 방식으로도 등록할 수 있습니다.
- 관습적으로 이런 형태의 이벤트 리스너 프로퍼티 이름은 항상
on으로 시작합니다.
위 코드의 함수는 비동기로 요청을 보내기 때문에 현재 버전 번호를 동기적으로 반환할 수 없습니다.
대신 호출자는 결과를 받거나 에러가 일어나면 호출될 콜백 함수를 전달합니다.
🔗 노드의 콜백과 이벤트
서버 사이드 자바스크립트 환경인 노드는 비동기적으로 만들어져 있으며 많은 API가 콜백과 이벤트를 사용합니다.
- 일반적으로 파일 콘텐츠를 읽는 기본 API도 비동기적이며 파일 콘텐츠를 읽으면 콜백 함수를 호출합니다.
🌱 fs.readFile()
// fs 모듈은 파일 시스템 관련 API입니다.
const fs = require('fs');
let options = {
// 프로그램에 사용할 옵션 객체이며, 기본 옵션을 이곳에 작성합니다.
}
// 설정 파일을 읽고 콜백함수를 호출합니다.
