들어가며
오늘은 집에 손님이 왔다. 손님에게 물만 줄 수는 없는것이다. 음식을 대접해야지. 파스타와 감바스, 바지락 술찜으로 정했다.
파스타부터 준비해보자. 물을 올리고 소금을 뿌리고, 끓기 시작하면 면을 넣는다. 11분을 기다리고, 면이 다 삶아졌다. 팬을 달구고 소스를 부어 데운 다음 면과 같이 덖는다. 파스타 완성.
이제 감바스를 해야겠다. 팬에 오일을 두르고 마늘을 넣고,
…
이렇게 해서는 누군갈 대접할 수 없다. 감바스를 하는 사이에 파스타는 불어버릴 것이고, 아직 술찜은 시작도 하지 않았다.
요리를 해봤거나 일머리가 있는 사람들은 알 것이다. 바지락 술찜 먼저 불에 올려 놓고, 면 삶는 시간에 소스를 데우면서 감바스도 같이 하면 시간을 효율적으로 쓸 수 있다. 음식도 한번에 나올 것이다.
비동기/동기란 이런 종류의 이야기이다.
Asynchronous vs. Synchronous
https://developpaper.com/javascript-asynchronous-programming-callback-promise-generator/
순서대로 하나씩 요리한다고 해보자. 위의 그림과 같이 모든 음식이 끝나는 데에는 시간이 걸릴 것이다. 시간이 누적 지연되니까. Synchronous 동기적이라고 한다.
그러나 파스타 면을 삶고 다른 것을 하는 것과 같이 동시에 여러 요리를 할수도 있다. 시간이 덜 걸릴 것이다. parallelization 병렬화되었다고 하고, Asynchronous 비동기적이라고 한다.
이제 프로그래밍 관점으로 돌아가보자.
What is asynchronous programming
함수(메소드)가 API로부터 데이터를 가져오는데에는 시간이 걸린다. 이러한 일이 완료될 때 까지 멈추어 기다리는 프로그래밍 방식을 synchronous programming 동기식 프로그래밍이라고 한다.
반대의 경우 즉, 어떤 일이 완료되기를 기다리지 않고 다음 코드를 실행해 나가는 프로그래밍을 asynchronous programming 비동기 프로그래밍이라고 한다.
비동기 프로그래밍은 응답, 호출 시간의 지연을 활용하기 위해 고안되었다.
비동기 프로그래밍을 사용하지 않으면 애플리케이션 화면을 로드하는 데 오랜 시간이 걸릴 것이다. 다음과 같은 상황이 가능하다.
- 사용자가 로그인을 할 때, 데이터베이스에서 사용자 데이터가 모두 반환되는 것을 기다린다.
- UX 측면에서, 사용자는 새로운 화면을 마주할 때마다 데이터가 로드되는 것을 기다릴 것이다.
비동기 프로그래밍은 프로세스들이 백그라운드에서 실행되도록 하여 사용자가 애플리케이션에서 다른 기능을 처리할 수 있도록 한다. 결과적으로 UX를 강화된다.
https://web.archive.org/web/20201117004053/https://dist-prog-book.com/chapter/2/futures.html
조금 더 자세히 이야기해보자. 데이터를 데이터베이스에 전송하는 데 시간이 걸릴 수 있다. 비동기 프로그래밍을 한다면, 사용자는 메소드를 실행하면서 다른 화면으로 이동할 수도 있는 것이다.
인스타그램에서 사진을 업로드 하고 불러오는 와중에도, 사용자는 로딩이 끝날 때 까지 화면에서 기다릴 필요가 없다. 사용자는 사진이 로드되는 와중에도 앱을 계속 사용하거나 끌 수도 있는 것이다.
프로세스/스레드를 blocking 차단(ex. 앱 탐색 및 활용) 하지 않고 다른 작업을 수행할 수 있는 것이다.
How asynchronous programing works
비동기 프로그래밍이 어떻게 이루어지는지 쉽게 이해하기 위해 동기 방식과 비교해보자. 현실의 예시로.
Synchronous programming
동기 프로그래밍은 제약된 순서를 따른다. 코드가 동기 프로그램에서 실행되면 로직의 각 단계를 따른다. 순서대로 수행하며 다음 작업을 진행하기 전 현재 작업이 완료 될 때까지 기다린다.
동기 프로그래밍으로 케이크를 구워보자.
- 계량한다.
- 밀가루, 달걀, 설탕을 함께 섞는다.
- 오븐을 가열하고 반죽을 굽는다.
- 먹는다.
몇가지 과정이 생략되었지만, 괜찮다. 반죽이 구워지기 전에 계량하고, 반죽을 해야한다. 그리고 케이크를 구워야 한다. 한 사람이 모든 작업을 수행하기 때문에 다음 작업을 하기 전에 한 작업을 완전히 완료해야 한다.
동기 프로그래밍은 one-track 방식이다. 각 단계를 차근차근 절차적으로 따르는 것이다.
Asynchronous programming
여러 사람이 함께하여 비동기식으로 케이크를 구우면 어떨까? 누군가 성분을 계량할때 다른 누군가는 반죽을 굽는것이다. 비동기 프로그래밍은 다수의 프로세스들이 같이 시작하고, 작업할 수 있게한다. 그리고 작업이 끝나면, 결과물을 순서대로 넣는 것이다.
케이크 반죽을 마치기 전에 오븐을 예열하는 것은, 비동기 프로그래밍에서 OK, 허용된다. 동기 프로그래밍에선 절대 있을수 없는 일이다. 반죽이 끝나기 전에 오븐을 예열할 수 없다. 반죽이 끝나면 알고리즘에 업데이트를 전송하고, 다시 와서 반죽으로 다음 과정을 진행하는 것이다. 이제 케이크 반죽이 준비되면, 적정 온도로 가열된 오븐에 넣을 수 있다.
안타깝지만 비동기 프로그래밍은 케이크를 먹는 데는 도움이 되지 않는다. 하지만 케이크를 더 빨리 받을 수 있을 것이다. 빵을 먹기 위해선 빵이 먼저 있어야 한다.
Common use cases?
비동기 프로그래밍, 메소드를 사용하는 가장 일반적인 케이스는 API를 요청할 때이다. 네트워크 시간과 반환이 불확실하기 때문에, 비동기 메소드는 “웹 사이트로부터 데이터를 가져오고(or Rest API), 가져오면, 내 script에 데이터를 넣고 fetch해라.” 라고 하는 것이다.
Async function은 다음과 같이 사용된다.
API의 상호작용
Application UX의 지연
비동기 프로그래밍을 사용하면 작업을 지연할 수 있다.
때론 UX 디자인 측면에서 의도적으로 작업을 지연해야 하는 경우도 있다. 컴퓨터는 놀라운 속도로 작업을 처리할 수 있고, 이로 인해 실행 응답이 너무 빠르다면 사용자에게 방해가 될 수도 있기 때문이다.
Is asynchronous always right?
그렇지는 않다. 비동기 프로그램은 복잡성을 높이고 코드 가독성을 해치는 경향이 있다.
Good for: 시간이 걸리는 작업, 높은 반복성
Bad for: 단순성
REFERENCE
Explained: Asynchronous vs. Synchronous Programming (mendix.com)
JavaScript asynchronous programming: callback, promise, generator | Develop Paper
Asynchronous vs. Synchronous Programming: When to Use What (outsystems.com)
Asynchronous Programming: A Beginner’s Guide – BMC Software | Blogs
비동기 프로그래밍 | JavaScript로 만나는 세상 (helloworldjavascript.net)
