자바스크립트에서 async/await는 어떻게 작동하나요?

Q1: async/await란 무엇인가요?
A1: async/await는 자바스크립트에서 비동기 코드를 동기 코드처럼 작성할 수 있도록 도와주는 문법입니다. `async` 함수는 항상 프라미스를 반환하며, `await` 키워드는 프라미스가 처리(resolve)될 때까지 함수 실행을 일시 중지했다가 완료되면 결과 값을 반환합니다.

Q2: async 함수는 어떻게 선언하나요?
A2: 함수 선언문, 함수 표현식, 화살표 함수 앞에 `async` 키워드를 붙이면 됩니다.
예:
```js
async function fetchData() { ... }

const fetchData = async () => { ... }
```

Q3: await 키워드는 어디서 사용할 수 있나요?
A3: `await`는 반드시 `async` 함수 내부에서만 사용할 수 있습니다. 함수 외부나 `async` 아닌 함수에서 쓰면 문법 오류가 발생합니다.

Q4: await는 어떻게 작동하나요?
A4: `await`는 뒤에 오는 표현식이 프라미스일 경우 해당 프라미스가 처리될 때까지 함수 실행을 잠시 멈춥니다. 프라미스가 처리되면 결과 값을 반환하고, 해당 결과를 변수에 할당할 수도 있습니다.

Q5: async/await를 사용하면 프로미스를 어떻게 다루나요?
A5: 기존 `.then()`, `.catch()` 체인 대신 비동기 코드를 마치 동기 코드처럼 작성할 수 있어서 가독성이 좋아집니다. 예를 들어:
```js
async function getUser() {
try {
const userData = await fetchUser();
console.log(userData);
} catch (error) {
console.error(error); }
}
```

Q6: async 함수의 반환값은 항상 무엇인가요?
A6: 항상 프라미스(Promise)입니다. `async` 함수 내부에서 명시적으로 값을 반환하면 그 값은 `Promise.resolve(값)`으로 감싸서 반환됩니다.

Q7: 여러 await를 순차적으로 실행하면 어떻게 되나요?
A7: 각각의 `await`는 이전 프라미스가 처리될 때까지 기다리므로, 순차적으로 실행되어 실행 시간이 누적됩니다.

Q8: 여러 비동기 작업을 병렬로 처리하려면 어떻게 해야 하나요?
A8: `Promise.all()`과 함께 사용하면 여러 프라미스를 병렬로 처리할 수 있습니다. 예:
```js
const [res1, res2] = await Promise.all([fetchA(), fetchB()]);
```

Q9: async/await가 오래된 브라우저에서도 작동하나요?
A9: ES2017(ES8) 이상에서 도입된 문법이라 최신 자바스크립트 엔진에서 지원합니다. 오래된 환경은 Babel 같은 트랜스파일러를 사용해 변환해야 호환 가능합니다.

Q10: async/await 사용 시 주의할 점은?
A10:
- `await`를 반복문 안에서 무분별하게 쓰면 성능 저하가 발생할 수 있으니 병렬 처리가 가능한 경우 `Promise.all`을 활용하세요.
- 에러 처리는 `try/catch`를 사용해야 프라미스 거부 상태를 효과적으로 다룰 수 있습니다.
- `await`가 자동으로 비동기 실행을 멈추지만, UI 스레드를 블로킹하지는 않습니다.

---

이상으로, 자바스크립트 async/await의 작동 원리와 사용법에 관한 주요 FAQ를 정리했습니다.

JavaScript에서 `async/await`는 비동기 프로그래밍을 보다 간결하고 이해하기 쉽게 만드는 문법입니다.

이 기능은 ES2017(ES

8)에서 도입되었으며, 비동기 함수의 작성과 호출을 더 직관적으로 만들어 줍니다.

`async/await`는 프로미스(Promise) 기반의 비동기 작업을 처리하는 데 사용됩니다.

1. `async` 함수 `async` 키워드는 함수 선언 앞에 붙여서 해당 함수가 비동기 함수임을 나타냅니다.

`async` 함수는 항상 프로미스를 반환합니다.

만약 함수 내에서 명시적으로 프로미스를 반환하지 않더라도, JavaScript는 그 값을 자동으로 프로미스로 감싸서 반환합니다.

```javascript async function myAsyncFunction() { return "Hello, World!"; } myAsyncFunction().then(result => console.log(result)); // "Hello, World!" ``` 위의 예제에서 `myAsyncFunction`은 `async`로 정의되었기 때문에, 반환된 값은 자동으로 프로미스로 감싸집니다.



2. `await` 키워드 `await` 키워드는 `async` 함수 내에서만 사용할 수 있으며, 프로미스가 처리될 때까지 함수의 실행을 일시 중지합니다.

`await`는 프로미스가 해결(resolve)되거나 거부(reject)될 때까지 기다립니다.

프로미스가 해결되면 그 결과값을 반환하고, 거부되면 에러를 발생시킵니다.

```javascript async function fetchData() { const response = await fetch('https://api.example.com/data'); const data = await response.json(); return data; } fetchData().then(data => console.log(data)).catch(error => console.error(error)); ``` 위의 예제에서 `fetchData` 함수는 `fetch` API를 사용하여 데이터를 가져옵니다.

`await`를 사용하여 비동기 작업이 완료될 때까지 기다린 후, JSON 데이터를 반환합니다.



3. 에러 처리 `async/await`를 사용할 때는 `try/catch` 블록을 사용하여 에러를 처리할 수 있습니다.

이는 비동기 함수 내에서 발생할 수 있는 오류를 보다 쉽게 관리할 수 있게 해줍니다.

```javascript async function fetchData() { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); return data; } catch (error) { console.error('Error fetching data:', error); } } ``` 위의 예제에서는 `try/catch`를 사용하여 네트워크 요청 중 발생할 수 있는 오류를 처리합니다.

만약 `fetch` 호출이 실패하면, 에러 메시지가 콘솔에 출력됩니다.



4. 병렬 처리 `async/await`를 사용하여 여러 비동기 작업을 병렬로 처리할 수 있습니다.

여러 프로미스를 동시에 실행하려면 `Promise.all`을 사용할 수 있습니다.

```javascript async function fetchMultipleData() { const urls = [ 'https://api.example.com/data1', 'https://api.example.com/data2', 'https://api.example.com/data3' ]; try { const responses = await Promise.all(urls.map(url => fetch(url))); const data = await Promise.all(responses.map(response => response.json())); return data; } catch (error) { console.error('Error fetching multiple data:', error); } } ``` 위의 예제에서는 여러 URL에서 데이터를 동시에 가져옵니다.

`Promise.all`을 사용하여 모든 프로미스가 해결될 때까지 기다린 후, 각 응답을 JSON으로 변환합니다.



5. `async/await`는 JavaScript에서 비동기 코드를 작성하는 데 있어 매우 유용한 도구입니다.

코드의 가독성을 높이고, 비동기 작업을 동기적으로 처리하는 것처럼 작성할 수 있게 해줍니다.

그러나 `async/await`를 사용할 때는 항상 프로미스의 상태를 고려해야 하며, 적절한 에러 처리를 통해 안정적인 코드를 작성하는 것이 중요합니다.

이러한 기능을 통해 개발자는 복잡한 비동기 로직을 보다 쉽게 관리하고, 유지보수할 수 있습니다.