Q1: async/await란 무엇인가요?
A1: async/await는 비동기 코드를 더 쉽게 작성하고 읽을 수 있게 도와주는 JavaScript의 문법입니다. async 키워드가 붙은 함수는 항상 Promise를 반환하며, await 키워드는 Promise가 해결될 때까지 함수의 실행을 일시 중지합니다.
Q2: async 함수는 어떻게 정의하나요?
A2: 함수 선언 앞에 async 키워드를 붙이면 됩니다. 예:
```javascript
async function fetchData() {
// 비동기 작업
}
```
Q3: await 키워드는 어떤 역할을 하나요?
A3: await는 Promise가 이행(resolve)되거나 거부(reject)될 때까지 함수 실행을 일시 중지시킵니다. Promise가 해결되면 await는 그 결과값을 반환합니다.
Q4: async/await의 주요 장점은 무엇인가요?
A4: 콜백 헬(callback hell)이나 복잡한 Promise 체인 없이 동기 코드처럼 비동기 코드를 작성할 수 있어 가독성과 유지보수성이 크게 향상됩니다.
Q5: await는 어디에서 사용할 수 있나요?
A5: await는 반드시 async 함수 내부에서만 사용할 수 있습니다. 그렇지 않으면 문법 오류가 발생합니다.
Q6: async 함수는 항상 Promise를 반환하나요?
A6: 네, async 함수는 명시적으로 Promise를 반환하지 않아도 실행 결과를 자동으로 Promise로 감싸 반환합니다.
Q7: async/await 사용 시 에러 처리는 어떻게 하나요?
A7: 일반 try/catch 문으로 비동기 작업 중 발생한 에러를 처리할 수 있습니다. 예:
```javascript
async function getData() {
try {
const data = await fetch(url);
} catch (error) {
console.error(error);
}
}
```
Q8: async/await는 기존 Promise와 어떤 차이가 있나요?
A8: 기능적으로 동일하지만, async/await는 비동기 코드를 동기 코드처럼 작성할 수 있게 해 줘 가독성과 디버깅이 쉬워집니다.
Q9: await는 모든 Promise가 아닌가요?
A9: 네, await는 Promise나 thenable 객체에만 작동하며, 일반 값에는 즉시 값을 반환합니다.
Q10: 여러 await를 병렬로 실행할 수 있나요?
A10: await는 기본적으로 순차 실행입니다. 병렬로 실행하려면 Promise.all과 함께 사용해야 합니다. 예:
```javascript
const [res1, res2] = await Promise.all([promise1, promise2]);
```
Q11: async/await가 지원되지 않는 환경에서는 어떻게 하나요?
A11: Babel 같은 트랜스파일러를 사용하거나, 직접 Promise 체인으로 대체해 작성해야 합니다.
Q12: async 함수 내부에서 return 값은 어떻게 처리되나요?
A12: return하는 값은 자동으로 Promise.resolve()로 감싸져 호출자에게 반환됩니다. 따라서 await asyncFunction()은 함수가 return한 값을 받을 수 있습니다.
Q13: async 함수에서 await 없이 사용할 수도 있나요?
A13: 네, async 함수 내에서도 await없이 Promise를 직접 반환할 수 있지만, await를 사용하면 더 명확하고 직관적으로 비동기 흐름을 제어할 수 있습니다.
`async/await`는 JavaScript에서 비동기 프로그래밍을 보다 간결하고 이해하기 쉽게 만들어주는 문법입니다. 이 문법은 Promise를 기반으로 하며, 비동기 작업을 동기적으로 작성하는 것처럼 보이게 해줍니다. 아래에서 `async/await`의 작동 방식과 사용 방법에 대해 자세히 설명하겠습니다. 1. 기본 개념 - Promise : JavaScript에서 비동기 작업의 결과를 나타내는 객체입니다. Promise는 세 가지 상태를 가질 수 있습니다: 대기(pending), 이행(ful<a href='https://sangseek.com/sangseeks/fill/ko'>fill</a>ed), 거부(rejected). 비동기 작업이 완료되면 Promise는 이행되거나 거부됩니다. - async 함수 : `async` 키워드를 사용하여 정의된 함수입니다. 이 함수는 항상 Promise를 반환합니다. 만약 함수 내에서 명시적으로 Promise를 반환하지 않으면, JavaScript는 해당 값을 자동으로 Promise.resolve()로 감싸서 반환합니다. - await <a href='https://sangseek.com/sangseeks/표현식/ko'>표현식</a> : `await` 키워드는 `async` 함수 내에서만 사용할 수 있으며, Promise가 이행될 때까지 함수의 실행을 일시 중지합니다. 이때 `await`는 Promise가 이행된 후의 값을 반환합니다. 2. 사용 방법 2.1. async 함수 정의 ```javascript async function fetchData() { // 비동기 작업을 수행하는 코드 } ``` 2.2. await 사용 ```javascript async function fetchData() { const response = await fetch('https://api.example.com/data'); const data = await response.json(); return data; } ``` 위의 예제에서 `fetch` 함수는 Promise를 반환하므로, `await`를 사용하여 이 Promise가 이행될 때까지 기다립니다. 이 후 `response.json()`을 호출하여 JSON 데이터를 가져옵니다. 2.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('Fetch error:', error); } } ``` 3. 동작 방식 1. 함수 호출 : `async` 함수가 호출되면, 즉시 Promise가 반환됩니다. 2. await : `await` 키워드가 있는 위치에서 Promise가 이행될 때까지 함수의 실행이 일시 중지됩니다. 이때 다른 코드(예: 이벤트 루프)는 계속 실행됩니다. 3. 이행 후 : Promise가 이행되면, `await` 다음의 코드가 실행됩니다. 이때 Promise가 반환한 값이 `await` 표현식의 결과로 사용됩니다. 4. 에러 처리 : Promise가 거부되면, `await` 표현식은 에러를 발생시키고, 이를 `try/catch` 블록으로 처리할 수 있습니다. 4. 장점 - 가독성 : 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성이 높아집니다. - 에러 처리 : `try/catch`를 사용하여 비동기 작업의 에러를 쉽게 처리할 수 있습니다. - 코드 구조화 : 복잡한 비동기 로직을 더 명확하게 구조화할 수 있습니다. 5. 주의사항 - `await`는 `async` 함수 내에서만 사용할 수 있습니다. - `await`를 사용하면 함수의 실행이 일시 중지되지만, 다른 비동기 작업은 계속 진행됩니다. 따라서 `await`를 남용하면 성능에 영향을 줄 수 있습니다. - 여러 개의 비동기 작업을 병렬로 실행하고 싶다면, `<a href='https://sangseek.com/sangseeks/Promise.all/ko'>Promise.all</a>()`을 사용하는 것이 좋습니다. ```javascript async function fetchMultipleData() { const [data1, data2] = await Promise.all([ fetch('https://api.example.com/data1'), fetch('https://api.example.com/data2') ]); const json1 = await data1.json(); const json2 = await data2.json(); return [json1, json2]; } ``` 결론 `async/await`는 JavaScript에서 비동기 프로그래밍을 보다 직관적이고 간결하게 만들어주는 강력한 도구입니다. 이를 통해 복잡한 비동기 로직을 쉽게 관리하고, 코드의 가독성을 높일 수 있습니다. 비동기 작업을 다룰 때 `async/await`를 활용하면, 더 나은 코드 품질과 유지보수성을 확보할 수 있습니다.
