자바스크립트 동기, 비동기 (기초)

 

 

 

Callback함수, Promise, async/await는 자바스크립트를 학습하고 사용하다 보면 자주 접하게 되는 용어이다.

 

학습했던 초기에는 각각의 개념들이 연관이 있다는 것을 인지하지도 못했었다. 필자처럼 따로따로 지식을 학습하다 도대체 이걸 왜 하고 있는 것인지 헤매는 사람들을 위해 Callback함수, Promise, async/await를 정리하고자 했다.

 

하지만 지식을 정리하다 보니 자바스크립트의 동기, 비동기를 선행하는 것이 옳다고 판단하여 해당 글을 작성한다. 

 

깊게 이해하고자 한다면 해당 글이 아닌 다른 글을 학습하길 바랍니다.

Callstack, Memory Heap, Queue, Event Loop, Web APIs, 싱글스레드, 멀티스레드, block, non-block I/O 등의 용어들을 학습하면 깊은 이해에 도움이 됩니다.

 

 

 

---

 

 

 

⚡︎ 자바스크립트의 작동 방식

자바스크립트는 기본적으로 싱글스레드 기반의 언어이다.

한 번에 하나의 작업만 처리하는 방식으로 동작한다는 말이다. (동기적으로 동작한다)

 

<한 번에 하나의 작업 처리, 동기적 처리>
예를 들어, 다소 이상한 식당의 일 처리를 살펴보자

- A팀과 B팀이 따로 식당에 들어와 음식을 주문하는 상황을 가정해 보자
1. 종업원이 A팀의 주문을 받는다. (B팀은 주문을 위해 대기를 한다.)
2. A팀의 주문을 받은 종업원이 주방에 들어가서 요리를 한다.
3. 요리를 마친 종업원은 A팀에게 요리를 가져다준다.
4. 종업원은 A팀이 식사가 끝날 때까지 기다린다.
5. 종업원은 A팀의 식사가 끝나면, 결제를 하고 식기들을 설거지한다.
6. 종업원이 B팀의 주문을 받는다.
7. B팀의 주문을 받은 종업원이 주방에 들어가서 요리를 한다.
8. 요리를 마친 종업원은 B팀에게 요리를 가져다준다.
9. 종업원은 B팀이 식사가 끝날 때까지 기다린다.
10. 종업원은 B팀의 식사가 끝나면, 결제를 하고 식기들을 설거지한다.

 

 

위 글을 읽어보았다면 비효율적이라는 문제점이 보일 것이다.

이러한 비효율을 피하기 위해서 식당에서는 동시에 작업을 수행할 수 있도록, 여러 명의 종업원을 고용하여 식당을 운영할 것이다.
(주문받는 종업원, 요리사, 서빙을 하는 종업원, 청소를 하는 종업원 등)

 

 

 

개발로 돌아와 자바스크립트의 동기적인 처리로 인한 문제점을 보완(?)하고자

브라우저를 비롯한 자바스크립트가 실행되는 런타임 환경에서는 비동기적으로 실행될 수 있도록 만들어준다. 즉, 별도의 요청이나 실행 대기, 보류 등과 관련된 코드들을 비동기적으로 처리할 수 있게 해 준다.

<이때 사용되는 것이 Callback함수, Promise, async/await이다.>

 

 

 

 

 

⚡︎ 그렇다면 동기, 비동기란?

동기식 처리 (Synchronous)
- 현재 실행 중인 코드가 완료된 후에야 다음 코드를 실행하는 방식
- 순차적으로 실행되는 방식
- 직렬
- 값이 꼭 필요하고 해당 값을 이용하여 다음을 진행해야 할 때 사용
- 순서가 중요한 작업을 처리할 때 사용

비동기식 처리 (Asynchronous)
- 현재 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식
- 작업들을 동시에 실행하는 방식
- 병렬
- 함수를 호출하고 해당 함수의 수행 여부와 상관없이 다른 작업이 실행되어도 상관없을 때 사용

 

 

 

⚡︎ 그렇다면 동기는 나쁘고 비동기는 좋은 건가?

그렇지 않다. 언제나 개발은 필요한 도구가 필요한 곳에 쓰이는 것이 좋은 것이다.

동기, 비동기의 정리에서 봤듯이 사용되는 상황이 다르다. 

계좌이체를 하는데 금액을 계산하기도 전에 통신을 완료시켜서 돈이 사라지는 위험을 만들 것인가?
결제 금액을 확인조차 못하고 결제가 완료되게 만들 것인가? 
홈페이지를 불러오는데, 데이터를 다 받기도 전에 서버와의 통신을 끝내서 빈 화면을 보여줄 것인가?
반대로 홈페이지의 모든 부분이 구현될 때까지 아무것도 하지 못하고 사용자를 기다리게 할 것인가?

 

위와 같이 상황에 따라 개발자는 동기식으로 처리할 것인지, 비동기식으로 처리할 것인지 생각해 보고 판단할 줄 알아야 할 것이다.