- Published On
JavaScript의 비동기 처리
동기(Synchronous)와 비동기(Asynchronous)
-
동기(Synchronous): 작업이 순차적으로 실행되며, 하나의 작업이 완료된 후에야 다음 작업이 시작됩니다. 예를 들어, 하나의 함수가 실행을 마치기 전에는 다른 함수가 실행되지 않습니다.
-
비동기(Asynchronous): 여러 작업이 동시에 실행되며, 특정 작업이 완료되지 않더라도 다른 작업들이 계속 실행될 수 있습니다. 비동기 방식에서는 완료된 작업에 대한 결과가 나중에 처리됩니다.
대표적인 비동기 처리 방식으로는 Promise
, async/await
, 콜백 함수
등이 있습니다.
비동기 방식은 네트워크 요청, 파일 읽기 등 시간이 오래 걸리는 작업에서 자주 사용되며, 이를 통해 메인 스레드가 차단되지 않고 다른 작업을 동시에 처리할 수 있습니다.
이벤트 루프(Event Loop)란?
이벤트 루프(Event Loop)
는 자바스크립트에서 비동기 작업을 처리하기 위한 핵심 메커니즘입니다. 자바스크립트는 싱글 스레드
로 동작하기 때문에, 비동기 작업을 처리하기 위해 이벤트 루프를 사용하여 비동기 코드와 동기 코드를 조화롭게 처리합니다.
이벤트 루프는 콜백 큐
와 호출 스택
을 관리합니다.
비동기 작업이 완료되면, 콜백 함수가 콜백 큐에 대기하다가 호출 스택이 비어 있으면 그때 이벤트 루프가 콜백을 호출 스택으로 옮겨 실행하게 됩니다. 이를 통해 자바스크립트는 비동기 작업을 처리하면서도 메인 스레드를 차단하지 않고 다른 작업을 처리할 수 있습니다.
백그라운드란?
백그라운드
는 비동기 작업이 실행되는 공간을 의미합니다. 자바스크립트는 싱글 스레드로 동작하지만, 비동기 작업을 처리할 때는 브라우저나 Node.js의 백그라운드 API
를 사용하여 작업이 메인 스레드를 차단하지 않도록 처리합니다. 비동기 작업이 완료되면 그 결과는 이벤트 루프
를 통해 메인 스레드로 전달됩니다.
- 왜 C++ 라이브러리를 사용하는가?: Node.js에서 비동기 작업을 처리할 때, 내부적으로 C++로 작성된 라이브러리가 활용됩니다. 자바스크립트는 네트워크 요청, 파일 시스템 접근과 같은 저수준 시스템 작업을 직접 처리하지 않기 때문에, C++ 라이브러리를 통해 성능을 보장하면서 비동기 작업을 빠르게 처리할 수 있습니다. 이는 특히 Node.js의 비동기 I/O 작업에서 중요한 역할을 합니다.
Promise란?
Promise는 자바스크립트의 비동기 작업을 처리하기 위한 객체로, 비동기 작업이 성공하거나 실패했을 때 그 결과 값을 나중에 사용할 수 있는 메커니즘을 제공합니다.
Promise는 세 가지 상태를 가집니다:
- Pending(대기): 비동기 작업이 아직 완료되지 않은 상태.
- Fulfilled(이행됨): 비동기 작업이 성공적으로 완료되어 결과 값을 반환한 상태.
- Rejected(거부됨): 비동기 작업이 실패한 상태로, 오류 메시지를 반환한 상태.
Promise는 주로 then
과 catch
메서드를 사용해 결과 처리나 오류 처리를 구현할 수 있습니다. 이를 통해 콜백 헬
을 해결하고, 비동기 코드를 더 가독성 있게 작성할 수 있습니다.
async/await와 Promise 비교
async/await는 Promise 기반의 비동기 작업을 더 간결하게 작성할 수 있도록 도와주는 ES6 문법입니다. 비동기 코드를 동기 코드처럼 읽을 수 있게 하여 가독성을 높여줍니다.
특징 | Promise | async/await |
---|---|---|
문법 | then() 과 catch() 메서드를 사용해 체인으로 처리 | async 와 await 키워드를 사용하여 동기처럼 처리 |
코드 가독성 | 복잡한 비동기 처리에선 가독성이 떨어질 수 있음 | 비동기 코드를 동기 코드처럼 읽기 쉽게 작성 가능 |
에러 처리 | catch() 로 에러를 처리 | try-catch 로 명확하게 에러 처리 가능 |
병렬 처리 | 여러 비동기 작업을 처리할 때 Promise.all() 사용 가능 | Promise.all()와 함께 사용 가능 |
콜백 함수란?
콜백 함수는 다른 함수의 인자로 전달되어, 특정 작업이 완료된 후 호출되는 함수입니다. 자바스크립트에서 주로 비동기 작업을 처리하기 위해 사용되며, 작업이 완료되면 결과를 처리하기 위해 미리 정의된 함수가 실행됩니다.
콜백 함수의 특징
특징 | 설명 |
---|---|
비동기 처리 | 콜백 함수는 비동기 작업(네트워크 요청, 파일 처리, 타이머 등)이 끝났을 때 그 결과를 처리합니다. |
콜백 헬(Callback Hell) | 콜백 함수가 중첩되면 코드 가독성이 떨어져 유지보수가 어려워지는 문제입니다. |
에러 핸들링 | 콜백 안에서 비동기 작업 중 발생한 오류를 처리하지만, 코드가 복잡해지기 쉽습니다. |
콜백 함수의 동작 방식
콜백 함수는 비동기 작업을 처리하는 데 중요한 역할을 하며, 아래와 같은 순서로 동작합니다:
- 콜백 함수 전달: 함수를 호출할 때 콜백 함수를 인자로 전달합니다. 이 콜백 함수는 즉시 실행되지 않고, 특정 작업이 완료될 때까지 대기합니다.
- 비동기 작업 수행: 콜백을 받는 함수는 비동기 작업을 진행하며, 그동안 다른 코드가 계속 실행될 수 있도록 작업을 백그라운드로 넘깁니다.
- 작업 완료 후 콜백 실행: 비동기 작업이 완료되면 콜백 함수가 호출되어 결과를 처리합니다.
콜백 헬(Callback Hell)
콜백 헬
은 여러 콜백 함수가 중첩되면서 발생하는 문제로, 코드가 복잡하고 가독성이 떨어지며 유지보수가 어려워집니다. 여러 단계의 중첩된 콜백 함수는 코드를 읽기 어렵게 만들고, 오류를 처리하거나 디버깅하기 어렵습니다.
이를 해결하기 위해 등장한 것이 Promise
와 async/await
입니다.
// 콜백 헬 예시
function task1() {
task2(() => {
task3(() => {
task4(() => {
// 여러 단계의 중첩된 콜백
});
});
});
}
이전 포스트
import vs require다음 포스트
Virtual DOM(가상 DOM)이란?연관된 포스트 구경가기