async / await 개념을 쉽게 이해하기

async/await, 요즘 개발 트렌드에서 빼놓을 수 없는 핵심 키워드입니다.

ES2017에 도입된 이 문법은 Promise를 더욱 쉽고 직관적으로 사용할 수 있게 해주죠.

마치 동기 코드처럼 비동기 코드를 작성할 수 있다는 점이 가장 큰 매력입니다.

 

async/await, Promise를 대체하는 마법일까?

 

async/await는 Promise를 대체하는 새로운 기술이 아닙니다.

오히려 Promise를 기반으로 동작하며, 비동기 처리 과정을 더욱 깔끔하게 만들어주는 문법적 설탕이라고 할 수 있습니다.

내부적으로는 여전히 Promise를 사용하기 때문에, Promise에 대한 이해는 필수적입니다.

async/await를 잘 활용하려면 Promise를 떼어놓고 생각할 수 없다는 점을 기억해야 합니다.

 

async, 함수의 비밀

 

async 키워드는 함수를 비동기 함수로 만들어줍니다.

async 함수는 항상 Promise를 반환합니다.

만약 함수가 명시적으로 Promise를 반환하지 않더라도, JavaScript 엔진이 자동으로 Promise로 감싸서 반환하죠.

이것이 async 함수의 핵심 동작 방식입니다.

async function myFunc() { return 'hello'; } 라는 코드를 작성하면, myFunc()는 Promise.resolve('hello')를 반환하는 것과 같습니다.

 

await, 기다림의 미학

 

await 키워드는 async 함수 내부에서만 사용할 수 있습니다.

await는 Promise가 settled(fulfilled 또는 rejected)될 때까지 기다립니다.

Promise가 fulfilled되면 await는 Promise의 결과를 반환하고, rejected되면 에러를 던집니다.

await를 사용하면 마치 동기 코드처럼 비동기 작업의 결과를 순차적으로 처리할 수 있습니다.

코드가 훨씬 읽기 쉬워지고 유지보수하기 쉬워지는 것이죠.

 

async/await 예제 코드로 파헤치기

 

```javascript

async function fetchData() {

  try {

    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');

    const data = await response.json();

    console.log(data);

  } catch (error) {

    console.error('에러 발생:', error);

  }

}

 

fetchData();

```

 

위 코드는 `fetch` API를 사용하여 데이터를 가져오는 간단한 예제입니다.

`await` 키워드 덕분에 `response`를 받고 `data`를 파싱하는 과정이 마치 동기 코드처럼 순차적으로 보입니다.

`try...catch` 구문을 사용하여 에러 처리도 깔끔하게 할 수 있습니다.

이처럼 async/await는 복잡한 비동기 로직을 훨씬 간결하게 표현할 수 있도록 도와줍니다.

 

예외 처리, 놓치지 말아야 할 핵심

 

async/await를 사용할 때 예외 처리는 매우 중요합니다.

Promise가 rejected될 경우, `try...catch` 구문을 사용하여 에러를 잡아내야 합니다.

만약 에러를 제대로 처리하지 않으면 프로그램이 예상치 않게 중단될 수 있습니다.

각별히 주의해야 할 부분이죠.

`try...catch` 블록을 적절히 활용하여 안정적인 코드를 작성하는 것이 중요합니다.

 

async/await는 비동기 코드를 더욱 쉽고 깔끔하게 만들어주는 강력한 도구입니다.

Promise에 대한 기본적인 이해를 바탕으로 async/await를 능숙하게 활용한다면, 생산성을 크게 향상시킬 수 있습니다.

최근 프론트엔드 개발에서 async/await의 활용은 선택이 아닌 필수가 되어가고 있습니다.

지금 바로 async/await를 익혀서 더욱 효율적인 개발자가 되어 보세요.