[JavaScript] 비동기 함수가 뭔데

Language/Javascript

[JavaScript] 비동기 함수가 뭔데

i-m-okay 2024. 11. 24. 22:00

프로젝트 리팩토링을 진행하면서 비동기 함수를 사용했었다.

❓sync/async 그게 뭔데?

요청 순서에 따라 응답 순서가 보장되면 동기적(sync)이고

요청 순서에 따른 응답 순서가 보장되지 않으면 비동기적(async)이라고 할 수 있다.

내가 입력한 코드 라인 순서대로 결과가 나왔다면 동기적, 그게 아니라면 비동기적인 것이 된다.

📍Javascript에서 비동기 구현하기

js 자체는 동기적인 언어이고 싱글스레드(한 번에 하나의 작업만 가능) 언어이지만, 비동기 함수를 구현하는 것에 유연하다.

js로 비동기를 구현하는 방법은 대표적으로 세 가지 방식이 있다.

1. 콜백 함수
2. 프로미스(Promise)
3. 이벤트 루프

내 코드는 (Promise) async-await을 이용한 비동기 논블로킹 방식 안에서 동기적인 수행이 가능하도록 await을 사용하고 있다.

❓Promise?

async 함수는 내부적으로 Promise를 반환한다. Promise는 js에서 비동기 처리를 위해 사용되는 객체이다.

총 세개의 상태를 가진다.

대기(pending): 초기 상태
이행(fulfuilled): 작업 성공
거부(rejected): 작업 실패

promise는 비동기 처리의 결과를 기다리지 않고 'Promise 객체를 반환'한다.

.then()이나 .catch(), .finally()를 통해 연속적으로 처리할 수 있다. (콜백 지옥 해결 가능)

❓Javascript는 싱글스레드 언어라면서 어떻게 비동기가 가능하지

js의 런타임 환경 특성 때문이다. js의 이벤트 루프를 통해 비동기 처리가 가능하게 만들 수 있다.

js의 런타임 환경이 어떤지 알아보자.

📍js의 런타임 환경

Call Stack: 자바스크립트 코드 실행을 위한 메모리
Web APIs: 브라우저에서 제공하는 비동기 작업 처리 API
Callback Queue: 비동기 작업 완료 후 콜백 함수들이 대기하는 공간
Event Loop: 비동기 함수들의 실행 타이밍 관리하는 매커니즘

콜 스택(Call Stack)

우리가 생각하는 그 메모리이다. (함수를 호출하면 담고 빼서 실행하는 스택)

Web APIs

브라우저의 비동기 작업을 처리하는 API이다. 타이머, 네트워크 요청, 파일 입출력, 이벤트 처리 등을 지원한다.

콜백 큐(Callback Queue)

두 가지로 구성되어있다.
Task Queue(Macrotask Queue)
Microtask Queue

우선순위는 Microtask Queue가 더 높고, 이곳엔 주로 Promise의 then/catch/finally 같은 콜백함수가 들어간다.
TaskQueue(Macrotask Queue)에는 setTimeout, setInterval, requestAnimationFrame, I/O작업, UI 랜더링과 같은 작업들이 들어갈 수 있다.

❓비동기 처리 메커니즘의 흐름

비동기 함수 호출 시, 함수가 Web API로 전달됨

Web API에서 비동기 작업을 처리하는 동안, js 엔진은 다음 코드를 계속 실행한다.

비동기 작업이 완료되면 콜백함수가 콜백 큐로 이동한다.

이벤트 루프가 콜 스택이 비어있음을 확인하고, 콜백 큐의 함수를 콜 스택으로 이동시켜 실행한다.

<핵심>

Call Stack이 텅텅 -> microtask queue 실행(promise) ->
microtask queue 텅텅 -> macrotask queue 실행(setTimeout)

(여기에서 실행된다는 것은 queue에서 call stack으로 적재된다는 것이다)

어려워...어려워~!

그치만 한번 정리하고 나니까 속 시원하다

참고자료

- https://inpa.tistory.com/entry/🔄-자바스크립트-이벤트-루프-구조-동작-원리 [Inpa Dev 👨‍💻:티스토리]

- https://inpa.tistory.com/entry/👩‍💻-multi-process-multi-thread [Inpa Dev 👨‍💻:티스토리]

- 이벤트 루프 시각화 사이트

http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D

latentflip.com