자바스크립트 비동기 이해하기 - (1) 동기 vs 비동기
🧠 자바스크립트 비동기 이해하기 - (1) 동기 vs 비동기
프로그래밍을 하다 보면 "동기(Synchronous)", "비동기(Asynchronous)"라는 개념을 자주 접하게 됩니다. 특히 자바스크립트는 기본적으로 동기적으로 동작하지만, 실제 개발에서는 비동기 처리가 중요한 역할을 하게 됩니다.
이번 글에서는 자바스크립트의 기본 실행 방식인 동기 프로그래밍과, 그 한계를 극복하기 위한 비동기 프로그래밍에 대해 간단히 알아보겠습니다.
⛓️ 동기(Synchronous) 프로그래밍이란?
동기 프로그래밍은 코드가 작성된 순서대로 한 줄씩 차례로 실행되는 방식입니다. 하나의 작업이 끝나야만 다음 작업이 실행되며, 여러 작업이 동시에 수행되지 않습니다.
자바스크립트는 기본적으로 싱글 스레드(Single-thread) 언어이기 때문에, 한 번에 하나의 작업만 처리할 수 있습니다. 따라서 기본 동작은 모두 동기적입니다.
📌 예시 코드
console.log('작업 1');
print();
console.log('작업 3');
function print() {
console.log('작업 2');
}
📌 출력 결과
작업 1
작업 2
작업 3
이처럼 함수가 호출된 순서에 따라 작업이 위에서 아래로, 순서대로 실행됩니다.
🧱 동기 방식의 한계점
동기 방식은 이해하기 쉽고 단순하지만, 문제가 생길 수 있습니다. 오래 걸리는 작업이 있을 경우, 그 뒤에 있는 모든 작업들이 차단(Blocking) 됩니다.
예를 들어, 사용자의 데이터를 서버에서 불러오는 작업이 있다면, 해당 작업이 완료되기 전까지는 UI가 멈추거나, 다른 기능들이 작동하지 않을 수 있습니다. 이 문제를 해결하기 위해 등장한 개념이 바로 비동기 프로그래밍입니다.
🚀 비동기(Asynchronous) 프로그래밍이란?
비동기 프로그래밍은 시간이 오래 걸리는 작업을 먼저 실행한 뒤, 해당 작업이 완료되길 기다리지 않고, 다음 작업을 먼저 수행하는 방식입니다. 즉, 작업이 병렬적으로 처리되는 느낌이죠.
대표적인 비동기 함수로는 setTimeout, fetch, addEventListener 등이 있습니다.
📌 예시 코드
setTimeout(() => {
console.log('2');
}, 3000);
console.log('1');
📌 출력 결과
1
2 // (3초 후에 출력)
위 코드를 보면 setTimeout이 먼저 호출되었지만, 타이머가 돌아가는 동안 다음 줄(console.log('1'))이 먼저 실행됩니다. 3초가 지난 뒤에야 '2'가 출력됩니다.
❓ 싱글 스레드인 자바스크립트가 어떻게 비동기 처리를 할까요?
자바스크립트는 싱글 스레드 언어이지만, 비동기 작업을 가능하게 하는 비밀은 브라우저의 Web APIs 덕분입니다.
📌 Web APIs란?
setTimeout, fetch, DOM 이벤트 등은 자바스크립트 엔진이 직접 처리하지 않고, 브라우저가 제공하는 별도의 환경(Web APIs) 에서 실행됩니다. 이 환경은 멀티 스레드이기 때문에, 여러 작업을 동시에 처리할 수 있습니다.
즉, 비동기 함수는 자바스크립트 엔진이 아니라 Web API 영역에서 처리되고, 작업이 완료되면 콜백을 다시 자바스크립트 엔진 쪽으로 넘겨 실행합니다.
🔁 마지막 예제: 비동기의 흐름 이해하기
console.log('시작');
setTimeout(() => {
console.log('2');
}, 3000);
console.log('1');
📌 출력 결과
시작
1
2 // (3초 후에 출력)
📌 실행 흐름 설명
- '시작'이라는 문자열이 콘솔에 출력됩니다.
- setTimeout이 호출되고, 콜백 함수는 Web API 환경에서 타이머와 함께 실행 대기 상태로 들어갑니다.
- 자바스크립트는 다음 줄로 넘어가 '1'을 바로 출력합니다.
- 3초가 지나면 Web API가 콜백 함수를 자바스크립트로 다시 넘겨주고, 이때 '2'가 출력됩니다.
✅ 마무리
자바스크립트는 기본적으로 동기적으로 실행되지만, 다양한 상황에서 비동기 처리가 필요합니다. 이를 이해하면 네트워크 요청 처리, 이벤트 핸들링, 애니메이션 제어 등 다양한 곳에 유용하게 활용할 수 있습니다.