동기 vs 비동기
개념을 명확히 하기 위해 동기(Synchronous) 처리와 비동기(Asynchronous) 처리를 비교해 봅시다.
실제 웹 애플리케이션 개발에서 필수적인 요소인 비동기 처리(Asynchronous Processing)와 데이터 페칭(Data Fetching)을 다루겠습니다. 웹 애플리케이션은 서버에서 데이터를 가져오거나(API 호출), 파일 시스템에 접근하거나, 타이머를 사용하는 등 시간이 오래 걸리는 작업을 자주 수행합니다.
비동기 처리와 데이터 페칭를 중심으로 자바스크립트의 비동기 처리의 판단 흐름을 읽습니다.
개념을 명확히 하기 위해 동기(Synchronous) 처리와 비동기(Asynchronous) 처리를 비교해 봅시다.
자바스크립트에서 비동기 처리를 구현하는 가장 기본적인 방법은 콜백 함수를 사용하는 것입니다.
콜백 헬의 단점을 극복하고 비동기 코드를 보다 깔끔하게 작성하기 위해 ES6에서 Promise(프로미스)가 도입되었습니다.
ES8(ECMAScript 2017)에서 도입된 async/await 문법은 Promise를 기반으로 하며, 비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있도록 도와주어 가독성을 극대화합니다.