수정하기 - async/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`를 활용하면, 더 나은 코드 품질과 유지보수성을 확보할 수 있습니다.