자바스크립트(JavaScript) 비동기 처리, 콜백 지옥에서 Async/Await까지
콜백 지옥(Callback Hell)으로 인한 코드 가독성 저하 문제를 해결하기 위해 프로미스(Promise) 개념이 등장
프로미스는 비동기 작업의 결과를 나타내는 객체로, .then() 체이닝(Chaining)을 통해 콜백 중첩 문제를 해결
Async/Await 구문을 통해 프로미스 기반 비동기 코드를 동기식 코드처럼 작성하여 가독성을 향상시킴
Async/Await는 함수 실행을 일시 중지(Pause)하여 메인 스레드(Main Thread)를 블로킹(Blocking)하지 않도록 설계
프로미스(Promise)의 작동 원리
프로미스(Promise)는 비동기 작업의 최종 성공 또는 실패를 나타내는 객체로, 세 가지 상태(Pending, Fulfilled, Rejected)를 가진다.
Pending 상태: 작업 진행 중
Fulfilled 상태: 작업 성공
Rejected 상태: 작업 실패
.then() 메서드를 사용하여 Fulfilled 상태에 대한 콜백을, .catch() 메서드를 사용하여 Rejected 상태에 대한 콜백을 등록한다. 프로미스 체이닝(Chaining)을 통해 여러 비동기 작업을 순차적으로 처리할 수 있으며, 콜백 지옥(Callback Hell) 문제를 해결**한다.
Async/Await의 마법: 코드 가독성 향상
Async/Await는 프로미스(Promise) 기반 비동기 코드를 동기식 코드처럼 보이게 하여 가독성을 높인다. async 키워드는 함수가 프로미스를 반환하도록 지정하고, await 키워드는 프로미스가 완료될 때까지 함수 실행을 일시 중지한다.
await: 메인 스레드(Main Thread)를 블로킹(Blocking)하지 않고 비동기 작업의 결과를 기다림
try/catch: 단일 블록에서 모든 에러(Error)를 처리하여 에러 핸들링(Error Handling)을 간소화
결과적으로, Async/Await는 비동기 코드의 복잡성을 줄이고, 개발자가 코드의 흐름을 쉽게 파악하도록 돕는다.
Async/Await의 내부 동작: 이벤트 루프(Event Loop)와 마이크로태스크 큐(Microtask Queue)
Async/Await는 자바스크립트(JavaScript)의 이벤트 루프(Event Loop)와 마이크로태스크 큐(Microtask Queue)를 활용하여 비동기 작업을 관리한다.
await: 함수 실행을 일시 중지하고, 컨트롤을 이벤트 루프(Event Loop)에 반환
마이크로태스크 큐(Microtask Queue): await된 프로미스가 완료되면, 해당 함수의 나머지 부분을 마이크로태스크 큐(Microtask Queue)에 추가
이벤트 루프(Event Loop): 스택(Stack)이 비어 있을 때, 마이크로태스크 큐(Microtask Queue)에서 대기 중인 작업을 꺼내 실행
이러한 메커니즘을 통해 UI(User Interface) 블로킹(Blocking) 없이 비동기 작업을 처리할 수 있다.
프로미스(Promise)와 Async/Await의 장단점 비교
프로미스(Promise)와 Async/Await는 모두 비동기 코드 작성을 위한 도구이지만, 각기 다른 장단점을 가진다.
프로미스(Promise): .then() 체이닝(Chaining) 방식은 가독성이 떨어질 수 있으며, 에러 핸들링(Error Handling)이 복잡해질 수 있다.
Async/Await: 동기식 코드와 유사한 형태로 작성하여 가독성을 높이고, 에러 핸들링(Error Handling)을 간소화
단점: Async/Await는 프로미스(Promise) 위에 구축되므로, 프로미스(Promise)에 대한 이해가 필요하며, 에러(Error) 발생 시 디버깅(Debugging)이 어려울 수 있다.
결론적으로, Async/Await는 현대적인 자바스크립트(JavaScript) 개발에서 가장 권장되는 비동기 처리 방식이다.
