수정하기 - async/await의 사용법은 무엇인가요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

`async/await`는 JavaScript에서 비동기 코드를 작성할 때 사용하는 문법으로, Promise를 보다 쉽게 다룰 수 있도록 도와줍니다. 이 문법은 ES2017(ES8)에서 도입되었으며, 비동기 작업을 동기 코드처럼 읽기 쉽게 만들어 줍니다. 아래에서 `async/await`의 사용법에 대해 자세히 설명하겠습니다.           1. 기본 개념    -   async  : 함수 앞에 <a href='https://sangseek.com/sangseeks/`async`/ko'>`async`</a> 키워드를 붙이면 해당 함수는 항상 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 <a href='https://sangseek.com/sangseeks/fetchDataWithError/ko'>fetchDataWithError</a>() {      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(result2);  }    getData();  ```    위 코드에서는 `fetchData1`과 `fetchData2`가 병렬로 실행되고, 두 Promise가 모두 해결될 때까지 기다립니다. 결과는 순서대로 출력됩니다.           4. 주의사항    - `await`는 항상 Promise를 반환하는 표현식에 사용해야 합니다. 그렇지 않으면 <a href='https://sangseek.com/sangseeks/TypeError/ko'>TypeError</a>가 발생합니다.  - `async/await`는 비동기 작업을 동기적으로 작성할 수 있게 해주지만, 비동기 작업이 완료될 때까지 기다리므로, 성능에 영향을 줄 수 있습니다. 따라서 병렬 처리가 필요한 경우에는 `Promise.all()`을 사용하는 것이 좋습니다.           5. 결론    `async/await`는 JavaScript에서 비동기 코드를 작성하는 데 있어 매우 유용한 도구입니다. 이를 통해 코드의 가독성을 높이고, 비동기 작업을 보다 쉽게 관리할 수 있습니다. 비동기 프로그래밍의 복잡성을 줄이고, 에러 처리를 간편하게 할 수 있는 이점을 제공합니다. JavaScript를 사용하는 개발자라면 `async/await`를 잘 활용하는 것이 중요합니다.