async/await의 사용법은 무엇인가요?

Q1: async/await 란 무엇인가요?
A1: async/await는 자바스크립트에서 비동기 작업을 더 쉽게 작성하고 읽도록 도와주는 문법입니다. `async` 함수는 항상 프라미스를 반환하며, `await`는 프라미스가 해결(resolve)될 때까지 함수 실행을 일시 중지시킵니다.

Q2: async 함수는 어떻게 선언하나요?
A2: 함수 선언문, 함수 표현식, 화살표 함수 앞에 `async` 키워드를 붙입니다.
예)
```javascript
async function myFunction() { ... }
const myFunc = async () => { ... };
```

Q3: await 키워드는 어떻게 사용하나요?
A3: `await`는 오직 `async` 함수 내부에서만 사용할 수 있습니다. `await` 다음에는 프라미스를 반환하는 표현식이 와야 하며, 해당 프라미스가 해결될 때까지 코드 실행을 일시 중지합니다.
예)
```javascript
const result = await fetchData();
```

Q4: async/await를 사용하지 않으면 어떻게 되나요?
A4: 비동기 작업은 `then()`, `catch()` 체이닝이나 콜백 함수로 처리해야 해서 코드가 복잡해지고 가독성이 떨어질 수 있습니다. async/await는 이런 문제를 해결해 동기 코드처럼 읽히게 만듭니다.

Q5: async 함수가 반환하는 값은 무엇인가요?
A5: async 함수는 항상 프라미스를 반환합니다. 반환 값은 내부에서 반환한 값이 자동으로 `Promise.resolve()`로 감싸진 결과입니다.
예)
```javascript
async function f() { return 1; }
f().then(console.log); // 1 출력
```

Q6: 에러 처리는 어떻게 하나요?
A6: `await`는 프라미스가 거부(rejected)되면 예외를 발생시킵니다. 따라서 `try...catch` 문으로 감싸서 처리하는 것이 일반적입니다.
예)
```javascript
try {
const data = await fetchData(); } catch (error) {
console.error(error);
}
```

Q7: 여러 비동기 작업을 동시에 처리하려면 어떻게 하나요?
A7: `await`는 기본적으로 하나씩 순차 실행합니다. 병렬 실행이 필요하면 `Promise.all()`에 프라미스를 넣고 `await`로 한 번에 대기할 수 있습니다.
예)
```javascript
const [a, b] = await Promise.all([fetchA(), fetchB()]);
```

Q8: async/await 사용 시 주의할 점은?
A8:
- `await`는 블로킹처럼 동작하므로 불필요한 `await` 사용은 성능 저하를 유발할 수 있습니다.
- `await`는 `async` 함수 안에서만 사용 가능합니다.
- 순차적 실행이 필요 없는 비동기 작업은 병렬 처리하는 것이 효율적입니다.

Q9: async/await는 모든 환경에서 지원되나요?
A9: ES2017(ES8)부터 도입되어 최신 브라우저와 Node.js에서 지원됩니다. 구형 환경에서는 Babel 같은 트랜스파일러를 사용해야 합니다.

Q10: async/await 사용 예제는?
```javascript
async function getUserData(userId) {
try {
const response = await fetch(`https://api.example.com/users/${userId}`);
if (!response.ok) throw new Error('Network error');
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching user data:', error);
}
}
```

위와 같이 async/await를 사용하면 비동기 코드를 동기처럼 직관적으로 작성할 수 있습니다.

`async/await`는 JavaScript에서 비동기 코드를 작성할 때 사용하는 문법으로, Promise를 보다 쉽게 다룰 수 있도록 도와줍니다.

이 문법은 ES2017(ES

8)에서 도입되었으며, 비동기 작업을 동기 코드처럼 읽기 쉽게 만들어 줍니다.

아래에서 `async/await`의 사용법에 대해 자세히 설명하겠습니다.

1. 기본 개념 - async : 함수 앞에 `async` 키워드를 붙이면 해당 함수는 항상 Promise를 반환합니다.

만약 함수 내에서 명시적으로 Promise를 반환하지 않더라도, JavaScript 엔진은 자동으로 값을 Promise로 감싸서 반환합니다.

- await : `await` 키워드는 Promise가 처리될 때까지 기다리게 합니다.

`await`는 반드시 `async` 함수 내에서만 사용할 수 있습니다.

`await`가 붙은 표현식은 Promise가 해결(resolve)되거나 거부(reject)될 때까지 실행을 일시 중지합니다.



2. 사용법

2.1. 기본 예제 ```javascript function fetchData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve("데이터를 성공적으로 가져왔습니다!"); }, 2000); }); } async function getData() { const result = await fetchData(); console.log(result); } getData(); ``` 위 코드에서 `fetchData` 함수는 2초 후에 데이터를 반환하는 Promise를 생성합니다.

`getData` 함수는 `async`로 정의되어 있으며, `await`를 사용하여 `fetchData`의 결과를 기다립니다.

결과가 준비되면 콘솔에 출력됩니다.



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

Promise가 거부되면 `await`는 예외를 발생시키므로, 이를 `try/catch`로 감싸서 에러를 처리할 수 있습니다.

```javascript function fetchDataWithError() { return new Promise((resolve, reject) => { setTimeout(() => { reject("데이터를 가져오는 데 실패했습니다!"); }, 2000); }); } async function getDataWithError() { try { const result = await fetchDataWithError(); console.log(result); } catch (error) { console.error(error); } } getDataWithError(); ``` 위 코드에서는 `fetchDataWithError` 함수가 Promise를 거부하는 경우, `getDataWithError` 함수 내의 `catch` 블록에서 에러를 처리합니다.



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

하지만 병렬로 실행할 필요가 있는 경우, `Promise.all()`을 사용할 수 있습니다.

```javascript function fetchData1() { return new Promise(resolve => setTimeout(() => resolve("데이터 1"), 1000)); } function fetchData2() { return new Promise(resolve => setTimeout(() => resolve("데이터 2"), 2000)); } async function getData() { const [result1, result2] = await Promise.all([fetchData1(), fetchData2()]); console.log(result1); console.log(result

2); } getData(); ``` 위 코드에서는 `fetchData1`과 `fetchData2`가 병렬로 실행되고, 두 Promise가 모두 해결될 때까지 기다립니다.

결과는 순서대로 출력됩니다.



4. 주의사항 - `await`는 항상 Promise를 반환하는 표현식에 사용해야 합니다.

그렇지 않으면 TypeError가 발생합니다.

- `async/await`는 비동기 작업을 동기적으로 작성할 수 있게 해주지만, 비동기 작업이 완료될 때까지 기다리므로, 성능에 영향을 줄 수 있습니다.

따라서 병렬 처리가 필요한 경우에는 `Promise.all()`을 사용하는 것이 좋습니다.



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

이를 통해 코드의 가독성을 높이고, 비동기 작업을 보다 쉽게 관리할 수 있습니다.

비동기 프로그래밍의 복잡성을 줄이고, 에러 처리를 간편하게 할 수 있는 이점을 제공합니다.

JavaScript를 사용하는 개발자라면 `async/await`를 잘 활용하는 것이 중요합니다.