JS 동기/비동기 처리 - 콜백부터 async/await

비동기 처리란 무엇인가?

동기 vs 비동기

• 동기 처리: 요청과 결과가 동시에 일어난다. 즉 특정 작업이 완료될 때까지 다음 작업은 대기해야 한다.
• 비동기 처리: 요청 후 결과를 기다리지 않고 다음 작업을 먼저 실행한다. 결과는 나중에 준비되면 처리한다.

자바스크립트와 비동기

• 자바스크립트는 싱글 스레드 언어입니다. 즉, 한 번에 하나의 작업만 처리할 수 있다.
• 하지만 setTimeout, AJAX 요청, DOM 이벤트 등 많은 작업들이 시간이 걸린다. 이러한 작업들을 동기적으로 처리하면 사용자 경험이 굉장히 나빠진다 (브라우저 멈춤 현상)
• 따라서 자바스크립트는 비동기 처리를 통해 이러한 문제를 해결한다.

비동기 처리 방식의 종류

 

콜백 함수

• 가장 기본적인 비동기 처리 방식이다.
• 비동기 작업이 완료되면 호출될 함수를 미리 등록해둔다.
• 중첩된 콜백 (콜백 지옥) 문제가 발생할 수 있다.

프로미스

• 콜백 지옥 문제를 해결하기 위해 등장했다.
• 비동기 작업의 성공/실패를 나타내는 객체이다.
• .then(), .catch(), .finally() 메서드를 통해 체이닝하여 코드를 더욱 가독성 있게 만들 수 있다.

async/await:

• 프로미스를 더욱 간편하게 사용할 수 있도록 해준다.
• 동기적인 코드처럼 보이게 만들어 가독성을 높인다.
• 내부적으로는 프로미스를 사용한다.

실제 활용 예시

setTimeout (Web API)

console.log("먼저 실행됩니다.");

setTimeout(() => {
    console.log("3초 후에 실행됩니다.");
}, 3000);

 

AJAX 요청 (fetch API)

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

 

async/await

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

fetchData();

 

 

참고 문헌

비동기 JavaScript - Web 개발 학습하기 | MDN