React

자바스크립트의 비동기 처리

실제 웹 애플리케이션 개발에서 필수적인 요소인 비동기 처리(Asynchronous Processing)와 데이터 페칭(Data Fetching)을 다루겠습니다. 웹 애플리케이션은 서버에서 데이터를 가져오거나(API 호출), 파일 시스템에 접근하거나, 타이머를 사용하는 등 시간이 오래 걸리는 작업을 자주 수행합니다.

비동기 처리와 데이터 페칭를 중심으로 자바스크립트의 비동기 처리의 판단 흐름을 읽습니다.

핵심 흐름

1

동기 vs 비동기

개념을 명확히 하기 위해 동기(Synchronous) 처리와 비동기(Asynchronous) 처리를 비교해 봅시다.

2

콜백(Callback) 함수

자바스크립트에서 비동기 처리를 구현하는 가장 기본적인 방법은 콜백 함수를 사용하는 것입니다.

3

Promise (프로미스)

콜백 헬의 단점을 극복하고 비동기 코드를 보다 깔끔하게 작성하기 위해 ES6에서 Promise(프로미스)가 도입되었습니다.

4

async/await (어싱크/어웨이트)

ES8(ECMAScript 2017)에서 도입된 async/await 문법은 Promise를 기반으로 하며, 비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있도록 도와주어 가독성을 극대화합니다.