🌱 기초 프론트엔드
async와 await가 뭔가요?
쉽게 이해하기
커피숍에서 주문하고 진동벨 받으면, 자리에 앉아 책을 읽으며 기다릴 수 있죠. 카운터 앞에서 계속 서 있을 필요가 없어요. async/await도 마찬가지로, 서버 응답을 기다리면서 다른 코드를 실행할 수 있게 해줍니다.
핵심 정리
시간이 걸리는 작업을 기다리면서도 다른 일을 할 수 있게 해주는 JavaScript 문법이에요.
자세히 알아보기
웹 개발에서는 서버에서 데이터를 가져오거나, 파일을 읽거나, 타이머를 설정하는 등 시간이 걸리는 작업들이 많아요. 이런 작업들을 동기적으로 처리하면 웹페이지가 멈춘 것처럼 보이게 됩니다.
async/await는 이런 비동기 작업을 마치 동기 코드처럼 읽기 쉽게 작성할 수 있게 해주는 문법이에요. 함수 앞에 async를 붙이면 그 함수는 비동기 함수가 되고, 그 안에서 await를 사용해 비동기 작업의 완료를 기다릴 수 있습니다.
예를 들어, 사용자 정보를 서버에서 가져와서 화면에 표시하는 작업을 생각해볼게요. await fetch()로 서버에 요청을 보내고 응답을 기다린 후, await response.json()으로 데이터를 파싱합니다. 이 과정이 진행되는 동안에도 브라우저는 멈추지 않고 다른 작업을 처리할 수 있어요.
실무에서는 거의 모든 API 호출, 데이터베이스 쿼리, 파일 작업에서 async/await를 사용합니다. 이전에 사용하던 콜백이나 .then() 체이닝보다 훨씬 읽기 쉽고 에러 처리도 try/catch로 간단하게 할 수 있어요. React나 Vue 같은 프레임워크에서도 데이터를 불러올 때 필수적으로 사용하는 패턴입니다.