Async 비동기와 동기

susu.J·2020년 7월 18일
0

Synchronous 동기vs ASynchronous비동기


코드가 위에서부터 아래로 순차적으로 실행되므로 콘솔에 찍힐 것으로 예상되는 결과는 차례대로 일것이다 .1st 2nd 3rd ...

그럼 실제로 실행시켜 위의 코드가 우리가 기대했던대로 작동하는지를 보면 .. ?

차례대로 찍히는 것을 알 수 있다.
이처럼 코드가 위에서부터 아래로 내려오며 하나가 끝나면 다음코드가 실행되는 방식을 동기적 처리라고 한다.

비동기적 처리(Asynchronous)


코드의 세번째 줄에서 setTimeout()메소드를 사용했다.
setTimeout()메소드의 첫번째 인자는 콜백함수, 두번째 인자는 지연시간이다.
(콜백함수에 대해서는 아래에서 자세히 알아보도록 하겠다.)
두번째 인자가 0으로 지정되었으므로 곧바로 실행될거라 예측할수있다.

따라서 위의 코드의 실행결과는 1st, 2nd 3rd가 순서대로 콘솔에 찍힐 것이라고 예상할것이다.
그럼 실제로 찍히는지 확인해보자

이번에는 콜솔에 차례대로가 아니라 1st, 3rd, 2nd가 찍혔다 .

왜냐?
setTimeout()메소드가 비동기적 API이기 때문이다.
위의 Async_test.js코드를 실행하는 과정을 컴퓨터 입장에서 설명하면 다음과같다.

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

  1. 세번째 줄에서 setTimeout()메소드를 만난다. 해당 메소드가 비동기적 메소드임을 파악하고, 이를 비동기를 처리하는 다른 프로그램에게 위임한다.

  2. 위임하고 난뒤에, 곧바로 다음코드(7번째 줄)을 실행하여 3rd를 콘솔에 찍는다.

    4.setTimeout()메소드를 위임받아 처리한 프로그램은 "비동기적 api를 제외한 모든 코드가 실행된 이후"에, 결과를 콘솔에 2nd를 찍는다.

    위와 같은 과정을통해 코드가 실행되기 때문에 setTimeout()메소드의 두번째 인자가 0이어도(시간 지연없이 바로 실행된다 하더라도)콘솔에는 1st 3rd 2nd가 찍히는것임.

비동기적 처리의 효용

비동기적처리가 필요한 이유는 무엇일까?

제이쿼리의 ajax통신과 같이 원하는 데이터를 서버로 부터 ㅏㅂㄷ아오는 방식을 취하는 어플리케이션을 만들었다고 가정해보다 .

서버로부터 데이터를 받아와서 해당 데이터를 처리해야 하므로, 데이터를 받아오는 코드는 전체 코드중의 최상단에 위치해야할 것이다. 그런데 만약 비동기적 처리를 하지 않고 동기적 처리를 하는 앱이라면 어떨까? 서버로부터 데이터를 받아오는 코드의 실행이 완전히 끝난 뒤에 이후의 코드를 처리할 것이다...
받아오는 데이터의 크기가 작고 갯수가 적다면 크게 사오간없을 수도 있지만, 만약 받아오는 데이터의 크기가 크고 많다면 어떨까?

모든 데이터의 수신을 완료한 다음에야 나머지 코드를 실행 할 수 있으므로 데이터를 받아오는 동안에 프로그램은 사실상 멈춰있는 것과 다름없다. 언제 끝날지도 모르는 요청때문에 나머지 코드를 실행시키지도 못하고 사용자를 기다리게 하는 아주 불친절한 프로그램이 될것이다.

https://pro-self-studier.tistory.com/89

profile
on the move 👉🏼 https://sjeong82.tistory.com/

0개의 댓글