[BB] Javascript: 비동기 프로그래밍

#back_to_basic
다시 처음부터!라는 마음으로 공부해보자! 아자아자!

1. 비동기 프로그래밍의 개념을 비유적으로 알아보자
(feat. 얄팍한 코딩사전)

일단 비교를 해보자.

 

'동기적으로 실행된다' == '작성된 코드 순서로 코드가 실행된다'

 

그렇다면, 비동기는?
'비동기적으로 실행된다' == '순서대로 실행되는 코드는 아니다'
즉, 멀티태스킹이 구현되는 것이다.
(여러 스레드나 여러 프로세스에서 이루어진다는 의미이다)

 

동기적인 처리의 단점은,
앞의 일처리가 느려진다면 기다려야하는 것이다.

출처: 얄팍한 코딩사전

callback function(할 일)을 미리 맡겨두고, 다른 일을 먼저 처리한다고 생각하면 된다.

 

 

❓ 자바스크립트는 싱글 스레드로 실행되는데, 어떻게 비동기 작업이 가능한가

출처: 얄팍한 코딩사전

위 코드와 실행결과를 보면, 서버에서 무작위로 먼저 응답을 받은 순서대로 출력되는 것을 볼 수 있다.

자바스크립트는 웹 브라우저나 Node.js의 자바스크립트 엔진에서 실행이 되는데,
이 엔진에는 자바스크립트를 돌리는 하나의 쓰레드(큐와 같은 구조, 같은 범위 내에서는 코드는 순서대로 실행됨)가 있다.

자바스크립트는 엔진뿐만 아니라, Web API라는 것이 함께 동작한다.
여기에서는 타이머를 사용하는 작업을 하거나, AJAX로 http 요청을 보내거나, 파일에서 데이터를 읽어오는 등 시간을 소요하는 작업들을 수행한다.

출처: 얄팍한 코딩사전

각 비동기 작업들은 처리된 뒤에, 미리 맡겨둔 callback function을 실행하기 위해 태스크 큐에 쌓이게 된다.

위처럼 시간이 걸리는 작업들을 다른 곳에서 처리를 하게 되면, 화면이 얼거나 버벅거리는 일을 방지할 수 있는 것이다.

출처: 얄팍한 코딩사전

하지만, 이를 실제 서비스의 코드에 적용을 해보면 오른쪽처럼 굉장히 복잡하고 타고타고 콜백 함수가 길어지는 것을 볼 수 있다.

함수 안에 함수 안에 함수 안에 함수 안에 함수!
이런 것을 바로 콜백 지옥이라고 한다.

위와 같은 문제를 해결하기 위해 자바스크립트는 ES6부터 Promise라는 것을 도입했다.

 

 

2. Promise

출처: 얄팍한 코딩사전

사용예시를 보면, 위처럼 프로미스의 객체를 반환하는데
그 생성자에 인자로 들어가는 함수에
- 첫번째 인자로는 수행할 비동기 작업
- 두번째 인자로는 그 결과물을 콜백함수에 전달하는 함수
가 들어간다.

이렇게 then 함수로 꼬리에 꼬리를 잇는 체이닝 방식으로 비동기 작업들을 순차적으로 처리할 수 있다.

즉, Promise는 '작업 끝나면 이 callback 함수를 실행해야해'라는 약속이다.

 

 

3. Async/Await

하지만, 아직도 어지럽다! 다행히 ES7에서는 async/await이 추가되었는데, 위 같은 Promise로 작성된 코드들이 훨씬 간단하게 작성 가능하다.

출처: 얄팍한 코딩사전

위 복잡한 Promise 작업은 위처럼 async, await과의 조화로 간단하게 작성 가능하다.

Promise 함수들을 준비시켜두고, 오른쪽처럼 함수 앞에 async를 걸어두고,
return 되는 값들을 기다려주기 위해 await을 걸어서 함수를 호출해준다.

실제 내부 동작은 비동기적 작업이지만,
동기 코드처럼 쉽고 직관적이게 작성할 수 있다.

 

 

References

• [코딩만화] 비동기 프로그래밍이 뭔가요?

 

화이팅이다!