JavaScript - 동기(Sync)와 비동기(Async)

Updated 2021/05/14

자바스크립트는 싱글 스레드 프로그래밍 언어로 단일 호출 스택이 있어 한 번에 하나의 일만 처리할 수 있다.

그러므로 자바스크립트는 동기 방식으로 진행이 된다. 하나의 호출 스택만 있어 함수를 순서대로 줄세우고 하나씩 처리한다.

 

 

- 동기는 요청 후 응답을 받아야 다음 동작을 실행하는 방식
- 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식

 

자바스크립트에서 비동기가 필요한 이유

웹 페이지를 로딩할때, 우선 웹 페이지의 기본 레이아웃을 보여주고 보여줄 수 있는 것만 우선 보여주는 것이 더 바람직할 것이다. 사용자가 지루하지 않도록 먼저 떡밥을 던저주는 것이다. 

 

자바스크립트에서 비동기방식을 사용하는 방법

• 비동기적 callback 함수 사용
• ES6 Promise
• ES8 async await

 

동기와 비동기의 차이

동기식 처리 모델은 직렬적으로 함수를 수행한다.

즉, 함수를 줄세워놓고 순서대로 실행한다. 앞사람 볼일이 끝나야 그 다음사람이 볼일을 보듯이

요청 - 응답 - 실행 의 작업이 100% 완료 되어야 다음 task 가 실행된다.

 

예를 들어 서버에 데이터를 요청하면 데이터가 응답될 때 까지 이 후 태스크들은 블로킹(Blocking, 작업 중단) 된다.

 

 

비동기식 처리 모델은 병렬적으로 함수를 수행한다.

즉, 함수가 아직 볼일보는 중인데도 그 다음 함수는 대기하지 않고 자기나름의 태스크를 실행한다.

요청 만 보내고 응답 - 실행까지 동시에 이루어 지지 않는다. 

 

예를 들어 서버에 데이터를 요청하면 응답될 때까지 대기하지 않고(Non-Blocking) 즉시 다음 태스크를 수행한다.

 

 

아래 코드에서 function1 을 먼저 호출해보았다.

function function1() { // "나 먼저 수행해볼까?"
    console.log('function1');
    function2(); // function 2로 가즈아
} 

function function2() { // "윗사람 끝나고 내차례 왔다!"
    setTimeout(function () { // 어라 요건 바로 비동기함수?
        console.log('function2'); // 지정대기시간 후에 동작해야하는군..ㄱㄷ..
    }, 0);
    function3();  
}

function function3() { // "위에 애는 뭐 하는 중이래 난 그냥 실행!"
    console.log('function3'); 
}

// 호출 순서는 다음과 같다
function1
function3
function2

 

 

ref : m.blog.naver.com/PostView.nhn?blogId=dktmrorl&logNo=221676686676&proxyReferer=http:%2F%2F210.117.121.213%2F#