동기(Synchronous) & 비동기(Asynchronous)

데이터를 처리하는 방식

=> 동기, 비동기 처리

 

동기와 비동기

● 동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다.

   즉 A작업이 모두 진행 될 때까지 B작업은 대기해야한다.

● 비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있다. 즉 A작업이 시작하면 동시에 B작업이 실행된다. A 작업은 결과값이 나오는 대로 출력된다.

 

동기적 처리(Synchronous)

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

 

위와 같은 코드를 작성하고 실행해 보면 예상되는 결과는 1st, 2nd, 3rd일 것이다.

'1st'
'2nd'
'3rd'

예상했던 것처럼 1st, 2nd, 3rd가 차례대로 찍히는 것을 알 수 있다.

이처럼 코드가 위에서부터 아래로 내려오면서 하나가 끝나면 다음 코드가 실행되는 방식을 동기적 처리라고 한다.

 

비동기적 처리(Asynchronous)

비동기적 처리는 어떤 것을 의미하는지 코드로 직접 보면

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

setTimeout() 메소드를 사용했다.

setTimeout() 메소드의 첫 번째 인자는 콜백함수를 사용하였고, 두 번째 인자는 지연시간이다.

두 번째 인자가 0이기 때문에 바로 실행될 것이라 예상했고,

1st, 2nd, 3rd가 찍힐 것이라 예상하였다.

'1st'
null
'3rd'
'2nd'

하지만 결과값은 1st, 3rd, 2nd가 찍혔다.

이는 setTimeout() 메소드가 비동기적 API이기 때문이다.

 

위의 코드를 컴퓨터의 입장에서 해석해보면 다음과 같다.

● 첫 번째 줄에서 console.log("1st");를 만나고 콘솔에 1st를 찍는다.

● 두 번째 줄에서 setTimeout() 메소드를 만나서 해당 메소드가 비동기적 메소드이기 때문에 이를 처리하는 다른 프로그램에 맡긴다.

● 그러고 나서 곧바로 console.log("3rd")를 콘솔에 찍는다.

● setTimeout() 메소드를 처리하는 프로그램은 비동기적 API를 제외한 모든 코드가 실행된 이후 결과를 코놀에 찍는다.

 

비동기적 코드의 실행 결과는 동기적 코드가 전부 실행되고 나서 값을 반환한다.

 

동기는 디자인이 비동기보다 간단하고 직관적일 수 이지만 결과가 주어질 때까지 아무것도 하지 못하고 대기해야 한다는 문제가 있다. 비동기는 동기보다 복잡하지만 결과가 주어지는데 시간이 걸려도 그 시간동안 다른 작업을 할 수 있어서 보다 효율적일 수 있다.

 

 

---

출처

동기, 비동기 처리 (velog.io)

동기, 비동기 처리

동기와 비동기의 개념과 차이 (tistory.com)