14-1. JavaScript 비동기의 개념과 타임아웃

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초 후) 둘

- 일반적으로 타임아웃, 네트워크 요청 등 시간이 걸리는 작업에 사용

- 당장 할 수 있는 것들을 먼저 다 하고, 시간이 걸리는 작업은 뒤로 넘기기