-
14-1. JavaScript 비동기의 개념과 타임아웃JavaScript 2023. 4. 10. 12:09
I. 동기 (Synchronous) vs 비동기 (Asynchronous)
// 동기 짜장면_배달(); 짜장면_먹기_동기식(); 다음_장소로(); // 비동기 짜장면_배달(); 짜장면_먹기_비동기식(); 다음_장소로();
예를 들어, 위와 같은 코드가 있다고 가정해보자.
동기 방식은,
1. 짜장면 배달
2. 주문자가 짜장면 먹기 (배달부는 다 먹을때까지 기다림)
3. 다 먹으면 배달부가 빈 그릇을 들고 다음 장소로 이동
이런식으로 순서대로 실행하는 것을 볼 수 있다.
이 때, 배달부는 주문자가 짜장면을 다 먹을때까지 아무것도 할 수 없다.
하지만 비동기 방식은,
1. 짜장면 배달
2. 다음 장소로 이동
3. 주문자가 짜장면 다 먹는 시간에 맞춰서 빈 그릇
이렇게 꼭 순서대로 실행되는 것은 아니다.
비동기 방식으로 프로그래밍을 하면 순서대로 일을 처리하는 것보다
더 효율적으로 프로그래밍을 할 수 있게 된다.
1. setTimeout 함수
- 첫 번째 인자로 넣은 콜백 함수를 두 번째 인자로 넣은 수 만큼의 밀리초 후 실행
- Web API, Node.js 등 자바스크립트 환경의 기능 (언어의 기능이 아님)
- 자바스크립트 코드는 본래 싱글스레드로 실
setTimeout(() => { console.log('타임아웃!'); }, 1000);
2. 비동기 (asynchronous) 코드
- 동기 코드와 달리, 코드가 순서대로 실행되지 않음
console.log('하나'); setTimeout(() => { console.log('둘'); }, 1000); // 💡 0으로 바꿔 다시 실행해 볼 것 console.log('셋'); // 하나 // 셋 // (1초 후) 둘
- 일반적으로 타임아웃, 네트워크 요청 등 시간이 걸리는 작업에 사용
- 당장 할 수 있는 것들을 먼저 다 하고, 시간이 걸리는 작업은 뒤로 넘기기
'JavaScript' 카테고리의 다른 글
14-3. 프로미스(promise)의 병렬 진행 (0) 2023.04.10 14-2. JavaScript 프로미스(promise) (0) 2023.04.10 13-2. JavaScript 프로토타입과 상속 (0) 2023.04.10 13-1. JavaScript 프로토타입(prototype)의 개념 (0) 2023.04.09 12-3. JavaScript this의 정적 바인딩 (0) 2023.04.09