자바스크립트에서 함수의 비동기 처리를 위한 async/await 사용법은 무엇인가요?

Q1: async/await란 무엇인가요?
A1: async/await는 자바스크립트에서 비동기 작업을 동기 코드처럼 작성할 수 있게 해주는 문법입니다. `async` 키워드가 붙은 함수는 항상 프로미스(Promise)를 반환하며, `await` 키워드를 사용해 프로미스가 처리될 때까지 기다릴 수 있습니다.

Q2: async 함수는 어떻게 정의하나요?
A2: 함수 선언이나 표현식 앞에 `async` 키워드를 붙입니다. 예:
```javascript
async function fetchData() {
// 비동기 코드
}
```

Q3: await 키워드는 어떤 용도로 사용되나요?
A3: `await`는 프로미스를 반환하는 비동기 함수를 호출할 때, 그 프로미스가 처리(resolve 또는 reject)될 때까지 함수 실행을 일시 정지시킵니다. 단, `await`는 반드시 `async` 함수 내에서만 사용할 수 있습니다.

Q4: async/await 사용 예시는 어떻게 되나요?
A4:
```javascript
async function getUser() {
try {
const response = await fetch('https://api.example.com/user');
const user = await response.json();
console.log(user);
} catch (error) {
console.error('에러 발생:', error);
}
}
getUser();
```

Q5: async 함수가 반환하는 값은 무엇인가요?
A5: 항상 프로미스 객체를 반환합니다. 내부에서 반환(return)하는 값은 프로미스가 resolve되는 값이 됩니다.
Q6: async/await로 에러를 처리하려면 어떻게 하나요?
A6: `try...catch` 문을 사용하여 비동기 작업 중 발생하는 에러를 잡을 수 있습니다.
```javascript
async function example() {
try {
const data = await someAsyncFunc();
} catch (error) {
console.error(error);
}
}
```

Q7: await는 프로미스가 아닌 값에도 쓸 수 있나요?
A7: 네, 프로미스가 아니면 즉시 값을 반환합니다. 즉, `await 42`는 42를 즉시 반환합니다.

Q8: async/await를 사용하면 프로미스 체이닝과 어떤 차이가 있나요?
A8: async/await는 비동기 코드를 더 직관적이고 가독성 높게 작성할 수 있게 해줍니다. 프로미스 체이닝의 `.then()`과 `.catch()` 대신 마치 동기 코드처럼 작성할 수 있습니다.

Q9: 여러 비동기 작업을 병렬로 처리하려면 어떻게 해야 하나요?
A9: `Promise.all()`과 함께 async/await를 사용합니다. 예:
```javascript
async function loadAll() {
const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
console.log(data1, data2);
}
```

Q10: async/await를 사용할 때 주의할 점은 무엇인가요?
A10:
- `await`는 `async` 함수 내부에서만 사용 가능합니다.
- `await`를 남용하면 동기적인 지연이 발생할 수 있으므로 병렬 처리 필요 시 `Promise.all()`을 활용하세요.
- 오류 처리를 반드시 `try...catch`로 하거나, async 함수 호출 이후 `.catch()`를 사용하세요.

JavaScript에서 비동기 처리를 위한 `async/await`는 ES2017(ES

8)에서 도입된 기능으로, 비동기 코드를 작성할 때 더 간결하고 읽기 쉽게 만들어 줍니다.

`async/await`를 사용하면 프로미스(Promise)를 기반으로 한 비동기 작업을 마치 동기적으로 처리하는 것처럼 작성할 수 있습니다.

이로 인해 코드의 가독성이 높아지고, 에러 처리가 더 용이해집니다.

1. async 함수 `async` 키워드는 함수 선언 앞에 붙여서 사용합니다.

이 키워드가 붙은 함수는 항상 프로미스를 반환합니다.

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

```javascript async function example() { return "Hello, World!"; } example().then(result => console.log(result)); // "Hello, World!" ```

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

프로미스가 이행(fulfilled)되면, `await`는 해당 프로미스의 결과 값을 반환합니다.

만약 프로미스가 거부(rejected)되면, `await`는 에러를 발생시킵니다.

```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:', error)); ```

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); } } fetchData(); ```

4. 여러 비동기 작업 처리 `async/await`를 사용하면 여러 비동기 작업을 순차적으로 처리할 수 있습니다.

그러나 여러 작업을 동시에 실행하고 싶다면, `Promise.all`을 사용할 수 있습니다.

```javascript async function fetchMultipleData() { try { const [data1, data2] = await Promise.all([ fetch('https://api.example.com/data1').then(res => res.json()), fetch('https://api.example.com/data2').then(res => res.json()) ]); console.log(data1, data

2); } catch (error) { console.error('Error fetching multiple data:', error); } } fetchMultipleData(); ```

5. 요약 - `async` 키워드는 비동기 함수를 정의하며, 항상 프로미스를 반환합니다.

- `await` 키워드는 프로미스가 처리될 때까지 기다리며, 결과 값을 반환합니다.

- `try/catch` 블록을 사용하여 비동기 작업에서 발생하는 에러를 처리할 수 있습니다.

- `Promise.all`을 사용하여 여러 비동기 작업을 동시에 실행할 수 있습니다.

`async/await`는 비동기 코드를 작성하는 데 있어 매우 유용한 도구이며, 이를 통해 복잡한 비동기 로직을 더 간결하고 이해하기 쉽게 만들 수 있습니다.