1. Asynchronous 비동기

이번에 포스팅할 주제는 비동기에 대해서 포스팅해보도록 하겠다. 반응형 프로그래밍을 설명하기 위해서는 비동기에 대한 내용은 필수적이고, 내 블로그에 곳곳에 보면 비동기에 관련된 글이 있지만, 프로그래밍을 위한 글이라 자세하게 작성하지 않아서 이번에 제대로 작성하도록 하겠다.

 

5억년버튼이 비동기와 비슷하지 않을까?

1. Asynchronous 비동기
   1. 비동기란
   2. 비동기와 스레드

 

---

1. Asynchronous 비동기

 

Asynchronous 비동기의 사전적 의미는, "not occurring at the same time", 동시에 발생하지 않는 이라는 뜻이다. 

일반적으로 우리가 프로그래밍을 한다면, 순차적(Synchronous)으로 진행이 된다.

 

print(1)
print(2)
print(3)
print(4)

 

예를 들어 위와 같은 코드가 있다고 하자. 실행을 하면 1부터 4까지 순서대로 출력이 된다. 이렇게 우리가 프로그래밍을 하면 코드가 순서대로 프로그래밍이 된다. 하지만 우리는 절대 순서대로 진행만 되는 걸 원하지 않는다.

예를 들어 우리가 카카오톡으로 사진을 전송 후 글을 보낸다고 가정하자. 그러면 수도 코드(pseudo code)는 아래와 같다.

sendPicture(picture_url)
sendText(text)

 

이렇게 코드를 작성하게 된다면, 작동은 할 것이지만 아마 유저들은 다 떠날 것이다. 왜냐하면 코드가 순서대로 작동을 해서 사진이 다 보내지는 동안 아무것도 할 수 없기 때문이다. 이걸 작업중단, Blocking 되었다고 한다.

이러한 문제를 해결하기 위해서는 사진을 전송하는 함수를 타이머를 맞춘 후, 메시지를 전송하게 된다면 좋은 프로그램이 만들어질 것이다. 바로 여기서 일을 맡기는 것이 비동기라고 생각하면 좋다.

 

1. Asynchronous 비동기

앞에서 간단하게 설명을 했지만 자세하게 알아보자.

비동기는 동기(Synchronous)와 작동하는 방식이 다르다. 아래 사진을 보며 이해하자.

 

출처 : https://www.freecodecamp.org/news/synchronous-vs-asynchronous-in-javascript/

 

사진을 보면 단번에 이해하기 쉬울 것이다. 동기는 순차적으로 진행되지만, 비동기는 그렇지않다. 여기서 예리한 사람들은 '순서대로 진행되지 않으면 순서가 뒤죽박죽 될 수 있나?'라고 생각할 수 있다. 맞다! 순서는 정해져 있지 않다. 

 

print(1)
print(2) //비동기
print(3) //비동기
print(4)

 

위에서 보았던 다음과 같은 코드가 있다고 하자. 만약 2와 3이 비동기로 진행이 된다고하면 나올 수 있는 상황은 여러 가지이다.

• 1 2 3 4
• 1 3 2 4
• 1 2 4 3
• 1 3 4 2
• 1 4 2 3
• 1 4 3 2

왜냐하면 2와 3이 언제 끝나는지 알 수 없기 때문이다. 따라서 이런 경우를 제어하기 위해서 우리는 callback함수를 사용하게 된다. 비동기로 작동하고 있는 함수를 실행할 때 callback함수를 주고, 끝나게 되면 callback함수가 호출이 되어 비동기가 끝났다는 것을 알려주는 것이다. 물론 Dart언어처럼 await를 이용하여 비동기를 기다리는 경우도 가능하지만, callback을 사용하는 것이 일반적이다.

 

여기서 과도한 callback으로 코드의 가독성이 떨어지는 callback hell이 발생한다. callback hell 해결을 할 수 있는것이 Reactive Programming이다.

 

2. 비동기(Asynchronous)와 스레드(Thread)

비동기와 스레드. 이 두 개는 비슷하게 느껴질 수 있으나, 다르다.  

 

우리가 카페에서 일을 한다고 가정해보자. 손님이 아이스 아메리카노를 주문하였다. 그러면 우리는 아이스아메리카노를 만들어야 한다. 아이스 아메리카노의 레시피가 다음과 같다고 하자.

1. 컵에 얼음 담기
2. 원두 그라인딩 하기
3. 탬핑 후 에스프레소 추출
4. 컵에 생수 채우기
5. 컵에 에스프레소 샷 넣기
6. 빨대 꽂고 마무리

이렇게 5단계로 이루어진다고 한다면, 우리는 1번부터 5번까지 과정을 거치며 음료를 만들게 된다. 이 상황이 작업자가 한 명이므로 싱글 스레드(Single Thread)이다. 우리는 컵에 얼음을 담고 원두 그라인딩을 했다. 그러면 에스프레소 추출까지 약 20초 정도 걸리므로 그동안 컵에 생수를 채울 수 있다. 그래서 에스프레소가 추출되는 동안 우리는 컵에 생수를 채우고 에스프레소 추출이 끝난다면 컵에 샷을 넣으면 된다. 이게 바로 비동기식 처리법이다. 

 

5가지 단계에서 나를 포함한 5명의 사람이 분업으로 한 가지 일들을 맡는다면, 멀티스레드(Multi Thread)이고, 하나의 프로세스에 5개의 스레드가 있게 되는 것이다. 이 5개의 스레드들은 대화를 하며 음료를 제작할 것이다.

 

 

다음 포스팅에서는 Reactive Programming에 대해서 작성해보도록 하겠다.

 

---

오류, 지적사항 그리고 궁금한 것은 댓글 부탁드립니다.