20 비동기 처리와 콜백, 실습
# 비동기 처리와 콜백, 실습
## 미션
비동기 처리와 콜백, 그 개념과 사용법을 익히시오.
## 실습
### 00:37 기본 파일 생성
html
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Asynchonous & Callback</title>
<!-- custom -->
<link rel="stylesheet" href="async-callback.css">
<!-- bootstrap 5.2 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<Script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></Script>
</head>
<body class="container">
<h1 id="heading">비동기 처리와 콜백</h1>
<article id="practice-1">
<h2>집안일 하기</h2>
<p>자취생 홍팍. 밀린 빨래와 점심 식사를 준비하려 한다. 이를 동기적으로 또는 비동기적으로 처리할 때, 소요되는 시간 차이를 분석하시오.</p>
<ul class="list-group">
<li class="list-group-item">1. 세탁기 돌리기(60분)</li>
<li class="list-group-item">2. 재료 손질(15분)</li>
<li class="list-group-item">3. 요리하기(20분)</li>
<li class="list-group-item">4. 식사하기(15분)</li>
<li class="list-group-item">5. 설겆이하기(10분)</li>
</ul>
</article>
</body>
</html>
```
css
```
/*
* CSS 관련 구글링
* 👉 site:developer.mozilla.org {연관_키워드}
*/
body {
padding-top: 1rem;
}
article {
padding-top: 1rem;
padding-bottom: 1rem;
}
```
js
```
// JavaScript 관련 구글링
// 👉 site:developer.mozilla.org {연관_키워드}
'use strict';
```
### 01:41 동기적 처리, 결과가 올 때까지 대기
```
// 1. 동기 함수(synchronous function)
// - 순차적으로 수행되는 함수
// - 결과물을 받아야만, 다음을 진행할 수 있음
// - 👍 장점: 실행 흐름 파악, 쉬움
// - 👎 단점: 대기시간 누적으로, 처리지연 증가
// 동기적 시간 지연 함수(수행이 끝날때까지, 해당 함수에 머무름)
function sleep(ms) {
// 깨어날 시간
const wakeUpTime = Date.now() + ms;
// 깨어날 시간까지 대기
while (Date.now() < wakeUpTime) {
// do nothing..
}
}
// 집안일 동기적 처리하기
function synchronousSample() {
// 집안일 하기(세탁-재료손질-요리-식사-설겆이)
sleep(6000); // 6.0초 대기(편의상 10분 => 1초로 간주)
console.log("세탁기 돌리기(60분)");
sleep(1500); // 1.5초 대기
console.log("재료 손질(15분)");
sleep(2000); // 2.0초 대기
console.log("요리하기(20분)");
sleep(1500); // 1.5초 대기
console.log("식사하기(15분)");
sleep(1000); // 1.0초 대기
console.log("설겆이하기(10분)");
}
synchronousSample();
```
### 07:55 비동기 처리, 결과를 기다리지 않고 다음으로
```
// 2. 비동기 함수(asynchronous function)
// - 비순차적으로 수행되는 함수
// - 결과물을 받지 않고, 다음을 진행
// - 주로 외부 자원(서버, DB, API, ..) 네트워크 요청 시, 사용
// - 👍 장점: 요청 결과를 기다리지 않고, 다른 작업이 가능(시간단축)
// - 👎 단점: 실행 흐름 파악이 어려울 수 있음
// - 예: setTimeout(), fetch(), ...
// 집안일 비동기로 처리(편의상 10분 => 1초로 간주)
function asynchronousSample() {
// 시작시간 측정
const start = Date.now();
// 세탁
setTimeout(function() {
console.log("세탁기 돌리기(60분)");
}, 6000);
// 식사를 위한 일련의 작업
setTimeout(function() {
console.log("재료 손질(15분)");
}, 1500);
setTimeout(function() {
console.log("요리하기(20분)");
}, 2000);
setTimeout(function() {
console.log("식사하기(15분)");
}, 1500);
setTimeout(function() {
console.log("설겆이하기(10분)");
}, 1000);
// 총 수행시간 확인
const end = Date.now();
console.log(`총 수행시간: ${(end - start) / 100}분`);
}
asynchronousSample();
```
### 17:14 콜백 함수, 비동기 처리에 순서주기
```
// 3. 콜백(callback: do next..)
// - 함수를 파라미터로 받아, 함수 호출의 하는 기법
// - 비동기 함수의 연속성을 위해, 주로 사용
// - 예1: setTimeout(callback, delay)
// - 예2: addEventListener(event, callback)
// 집안일을 위한 콜백 함수
function housework(task, delay, doNext) {
// setTimeout(지연시간_후_동작시킬_함수, 밀리초_지연시간);
setTimeout(function() {
console.log(task);
doNext(); // 콜백 수행: 파라미터로 전달된 함수를 호출
}, delay);
}
// 콜백 함수를 적용하여, 비동기 함수의 연속성(종속성) 부여
function callbackSample() {
// 세탁기를 돌리고, 콜백으로 소요시간 측정
const startA = Date.now();
housework("세탁기 돌리기(60분)", 6000, function() {
console.log(`세탁 완료까지: ${(Date.now() - startA) / 100}분`);
});
// 식사를 위한 일련의 작업 후, 콜백으로 소요시간 측정
const startB = Date.now();
housework("재료 손질(15분)", 1500, function() {
housework("요리하기(20분)", 2000, function() {
housework("식사하기(15분)", 1500, function() {
housework("설겆이하기(10분)", 1000, function() {
console.log(`재료 손질부터 ~ 설겆이 완료까지: ${(Date.now() - startB) / 100}분`);
});
});
});
});
}
callbackSample();
```
## 구글링 훈련 🔥
- 자바스크립트 Date.now
- 자바스크립트 setTimeout
- 자바스크립트 동기 vs 비동기
- 자바스크립트 callback