상세 컨텐츠

본문 제목

비동기에 대해서

카테고리 없음

by esoesmio 2024. 5. 9. 17:13

본문

`async`와 `await`는 JavaScript에서 비동기 작업을 다루기 위한 강력한 구문입니다. 이들을 이해하기 위해서는 먼저 JavaScript의 비동기 실행 모델과 프라미스(Promise)에 대한 이해가 필요합니다.

### JavaScript의 비동기 실행 모델

JavaScript는 기본적으로 싱글 스레드(single-threaded) 언어입니다. 즉, 한 번에 하나의 작업만 수행할 수 있습니다. 그러나 웹 브라우저나 Node.js 환경에서는 동시에 여러 작업을 처리해야 할 필요가 자주 발생합니다—예를 들어, 네트워크 요청을 처리하거나, 사용자 입력을 기다리거나, 파일 시스템 작업을 수행하는 것과 같은 작업들이죠.

이런 환경에서 JavaScript는 "이벤트 루프"라는 메커니즘을 사용하여 비동기 작업을 효율적으로 관리합니다. 이벤트 루프는 코드 실행, 이벤트 처리, 타이머 관리 등을 적절히 스케줄링하며, 실행해야 할 작업이 있는지 지속적으로 확인합니다.

### 프라미스(Promise)

비동기 작업을 표현하기 위해 JavaScript에서는 "프라미스"라는 객체를 사용합니다. 프라미스는 비동기 작업의 최종 성공 또는 실패를 나타내는 대리자로, 세 가지 상태를 가집니다:
1. **대기(Pending)**: 아직 성공도 실패도 하지 않은 초기 상태.
2. **이행(Fulfilled)**: 작업이 성공적으로 완료된 상태.
3. **거부(Rejected)**: 작업이 실패한 상태.

프라미스는 비동기 작업의 결과를 나중에 처리할 수 있도록 해주며, `.then()`이나 `.catch()` 메소드를 사용하여 성공 또는 실패 시의 콜백을 연결할 수 있습니다.

### `async`와 `await`

`async`와 `await` 구문은 프라미스 기반 코드를 쓰고 읽기 쉽게 만드는 문법적 설탕(syntactic sugar)입니다.

- **`async` 함수**: 함수 앞에 `async`를 붙이면, 해당 함수는 자동으로 프라미스를 반환합니다. 함수 내에서 직접 프라미스를 반환하지 않더라도, JavaScript 엔진이 함수의 반환 값을 프라미스로 감싸 반환합니다.

- **`await` 표현식**: `async` 함수 내에서만 사용할 수 있는 `await`은 프라미스가 해결될 때까지 함수의 실행을 일시 중지합니다. 프라미스의 결과가 준비되면, `await` 표현식은 프라미스의 해결된 값을 반환하고, 함수의 실행을 재개합니다.

### 예시와 비유

비유를 들어보자면, 레스토랑에서 음식을 주문하는 과정을 생각해볼 수 있습니다. 메뉴를 보고 주문을 하면, 주방에서 음식을 준비하는 동안 당신은 대화를 하거나 휴대폰을 확인하는 등 다른 일을 할 수 있습니다. 음식이 준비되면 웨이터가 음식을 가져다 주고, 그때부터 식사를 시작할 수 있습니다.

이 과정에서:
- 메뉴를 보고 주문하는 것은 `async` 함수를 호출하는 것과 유사합니다.
- 음식이 준비되기를 기다리는 것은 `await`를 사용하여 프라미스가 해결될 때까지 기다리는 것과 같

습니다.
- 음식이 준비되면 다시 주의를 기울여 식사를 시작하는 것처럼, `await` 다음의 코드는 프라미스가 해결된 후 실행됩니다.

```javascript
async function dinnerAtRestaurant() {
    // 주문을 하고 음식이 준비되기를 기다립니다.
    const food = await orderFood();
    // 음식이 준비되면 식사를 시작합니다.
    eat(food);
}
```

이러한 방식으로 `async`와 `await`는 JavaScript에서 비동기 프로그래밍을 더 직관적이고 관리하기 쉽게 만들어, 개발자가 비동기 로직을 보다 효과적으로 구현할 수 있게 돕습니다.

댓글 영역