동기와 비동기

Syncronous & Asychronous

 

1. 일반적인 맥락에서의 동기(Sync)

영상을 보다가 자막이 영상보다 빠르거나 늦게 출력되는 경우, '싱크(Sync)가 안 맞는다' 라는 말을 사용한다. 이는 비동기(Asychronous)를 의미한다.

 

이때의 싱크는 Sync를 의미하는데, sysnchronous의 줄임말로서, '동기'혹은 '동시에 일어나는, 한 가지 동, 기다릴 기)' 이라는 의미를 가지고 있다.

 

2. 프로그래밍에서의 동기(Sync)와 비동기(Async)

동기, Synchronous

 

이전 작업이 다 수행되지 않을 경우, 다음 작업은 수행되지 않을 경우, 다음 작업은 수행하지 못하는 상태가 된다.

이를 (Blocking) 이라고 한다.

 

ex) 로그인 버튼 클릭 시 화면이 새로고침 되면서 로그인 화면으로 전환 되어야 할 때 로그인 화면으로 이동하는 동안 사용자는 해당 화면이 나올 때 까지 다른 동작을 할 수 없게 된다.

 

비동기, Asynchronous

 

이전 작업의 수행 여부에 상관없이 다음 작업은 개별로 수행(Non-Blocking)

 

비동기 방식은 처리 순서가 보장되지 않는 대신 동기 방식에 비해 결과 하면이 나오는 시간 동안 다른 작업을 할 수 있다는 장점이 있다.

 

 

 

 

// 코드로 보는 동기 비동기

 

동기적 비동기적
페이지를 새로고침하냐 안 하냐에 따라 나눈다,

call stack, task queue 이때 task queue는 비동기적으로 작동할 때 예를들어 API인 setTimeout 안에 first 함수가 있다면 callback에서 바로 task queue로 들어간다.

ex) function first() { console.log('first() called'); }
function second() { setTimeout(() => console.log('second() called'), 1000); }
function third() { console.log('third() called'); }

first();
second();
third();

//
//현재 실행 중인 작업이 아직 종료되지 않은 상태라고 해도, 다음 작업을 곧바로 수행할 수 있는 방식


function first() {
    console.log('first() called');
}

function second() {
    console.log('second() called');
}

setTimeout(first, 3 * 1000);
second();

//
function first() {
    console.log('first() called');
}

function someLongWork() {
    console.log('오래 걸리는 작업 수행 중...');
}

function second() {
    console.log('second() called');
}

first();
someLongWork();
second();

 

실습 링크

https://www.jsv9000.app/