동기와 비동기

동기(Synchronous)와 비동기(Asynchronous)는 개념적으로 많이 접해보았지만

프로젝트를 진행하면서 '비동기(또는 동기)적으로 처리'라고 하는 부분이 나올 때마다

흠칫하는 나 자신을 보면서 정리를 하면 좋겠다는 생각을 했다.

 

동기, 비동기 처리라는 개념은 언어를 불문하고 적용되는 개념이다.

 

가장 흔히 설명에 사용되는 경우는 마트에서 결제를 할 때,

계산대가 한 곳에 맛있으면 사람들은 한 명의 결제가 끝나기 전까지 대기상태에 있어야 한다.

하지만 계산대가 여러 개 있다면 늦게 도착한 사람이라도 계산이 먼저 끝날 수 있고,

여러 개의 계산을 동시에 진행할 수 있다.

 

동기(Syncronous)

 

동기적 처리는 하나의 요청을 보낸 후, 결과를 받고 나서 다음 요청을 보내는 방식이다.

모든 과정이 순차적으로 진행되고, 하나의 요청이 처리 중일 때 다른 작업은 대기 상태에 있다.

console.log("1st");
 
console.log("2nd");
 
console.log("3rd");

 

다음과 같은 코드가 있다고 하면

결과는 순차적으로 "1st 2nd 3rd" 순서로 출력된다.

이것은 동기적으로 처리된 결과이다.

 

 

비동기(Asyncronous)

 

비동기적 처리는 반대로 요청을 보내고 결과를 받기 전까지 대기하지 않고,

다른 요청들을 처리할 수 있는 방식이다.

console.log("1st");
 
setTimeout(()=>{
  console.log("2nd");
}, 0)
 
console.log("3rd");

다음과 같은 코드에서는

비동기적 API인 setTimeout() 메서드로 인해 "1st 3rd 2nd"의 결과가 나타난다.