동기(Sync)와 비동기(Async)에 대한 개념
일반적으로 "동기로 실행된다"라고 함은, 먼저 실행된 코드의 결과가 나올 때까지 대기하는 것을 말합니다.
- 놀이기구를 생각하면 쉽습니다.
정원이 30명인 놀이기구가 있다고 가정합니다.
놀이기구를 한번 태우는데 약 5분이 걸린다고 가정하면 놀이기구를 막 태우기 시작한 시점에서는 대기자 모두 놀이기구에 탑승했던 사람들이 다 내리기 전까지는 탑승을 할 수 없습니다.
이것은 놀이기구 탑승/하차가 동기적으로 관리된다고 볼 수 있습니다.
일반적으로 "비동기로 실행된다" 라고 함은, 실행된 순서와 관계 없이 결과가 나오는 것을 말합니다.
- 맛집을 생각하면 쉽습니다.
정원이 최대 30명인 맛집이 있다고 가정합니다.
입장 순서는 선착순이고 퇴장 순서는 다 먹은 사람이 바로 나올 수 있습니다. 다 먹은 사람이 나오면 나온 사람 수만큼 다시 입장할 수 있습니다. 사람마다 먹는 시간은 모두 다릅니다.
이것은 입/퇴장이 비동기적으로 처리된다고 볼 수 있습니다.
Blocking Model & Non-Blocking Model
- Blocking Model이란, 코드의 실행이 끝나기 전까지 실행 제어권을 다른 곳에 넘기지 않아 다른 작업을 하지 못하고 대기하는 것을 말합니다.
- Non-Blocking Model이란, 코드의 실행이 끝나지 않아도 실행 제어권을 다른곳에 넘겨 다음 코드가 실행될 수 있는 것을 말합니다.
- 자바스크립트는 Async + Non-Blocking Model을 채용하여 현재 실행 중인 코드의 실행이 끝나지 않아도 다음 코드를 호출합니다.
- 결론적으로 자바스크립트는 각 명령들이 순서대로 실행될 수 있게 구현되어 있지만, Non-Blocking Model에 의해 동기적 명령이 아닌 모든 함수는 비동기적으로 실행됩니다.
동기, 비동기의 차이
- 제어권을 넘기면(Non-blocking) 다른 코드도 실행될 수 있으므로 비동기 처리가 가능하지만
- 제어권을 넘기지 않으면(Blocking) 비동기 처리가 가능한 환경이어도 비동기 처리가 불가능합니다.
예시 ( setTimeout은 특정 시간 뒤에 함수를 실행해주는 역할입니다.)
function first() {
console.log('First');
}
setTimeout(first, 1000); // 1000ms(1초) 뒤에 first 함수를 실행해준다.
console.log('Middle');
console.log('Last');
// Print: Middle
// Last
// First
- 예시 코드는 아래의 순서대로 실행됩니다.
- setTimeout(first, 1000) : 1초 뒤에 first() 함수 → console.log(’First’); 가 실행되도록 명령합니다.
- console.log('Middle'); : ‘Middle’ 문자열이 출력됩니다.
- console.log('Last'); : ‘Last’ 문자열이 출력됩니다.
- 1초가 지난 뒤 ‘First’ 문자열이 출력됩니다.
- 만약 자바스크립트가 Blocking Model이었다면 위 예시 코드는 1초를 기다린 이후에 first() 함수를 먼저 실행하여 'First'를 출력한 뒤, 'Middle', 'Last' 순서로 출력했을 것입니다.
'Language > Javascript' 카테고리의 다른 글
비동기 함수 (Async Function) (0) | 2022.12.12 |
---|---|
프로미스(Promise) (0) | 2022.12.12 |
JavaScript란? (0) | 2022.12.12 |
Javascript 기본문법 (0) | 2022.11.21 |
[혼공스] Ch.09 클래스 (0) | 2022.11.04 |