const arr = [];
for (let i = 0; i < 1000; i++) {
arr.push(i);
}
console.log(arr);
for (let i = 1000; i < 2000; i++) {
arr.push(i);
}
console.log(arr);
const arr = [];
for (let i = 0; i < 1000; i++) {
arr.push(i);
// 1000번 반복하면서 실행할 더더더더더 복잡한 코드
}
console.log(arr);
for (let i = 1000; i < 2000; i++) {
arr.push(i);
// 여기도 진짜~~~ 복잡한 수한 계산식들..
}
console.log(arr);
참고) 전형적인 동기의 blocking 예제
const arr = [];
for (let i = 0; i < 1000; i++) {
arr.push(i);
// 1000번 반복하면서 실행할 더더더더더 복잡한 코드
}
**alert("안녕하세요");** // 확인 누를 때까지 console 코드로 넘어가지 않음
****console.log(arr);
// 화면 그리기 1
axios.get(url)
.then(response => {
// api 호출하고 응답받으면 실행
})
// 화면 그리기 2
// 다른 로직~~
🙋🏻♀️ [비동기 처리가 필요한 이유]
자바스크립트 엔진은 한 번에 하나의 task만 실행할 수 있는 Single Thread. Single Thread는 한 번에 하나의 task만 실행할 수 있기 때문에 처리에 시간이 걸리는 task를 실행하는 경우 Blocking(작업 중단)이 발생한다.
Blocking 되면 사용자가 다음 task가 실행될 때까지 기다려야 되겠죠? 🤢
🙆🏻♂️ [여기에서 바로 콜백함수가 등장]
비동기를 처리하기 위해 전통적으로 콜백패턴을 사용합니다.