⏱️ 동기 vs 비동기 프로그래밍
JavaScript의 핵심인 동기/비동기 처리 방식을 시각적 타임라인으로 학습해보세요
⏸️ 동기 (Synchronous)
코드가 순차적으로 실행되며, 한 작업이 끝나야 다음 작업이 시작됩니다.
⏳
블로킹 동작
작업이 완료될 때까지 다음 코드 실행 대기
📊
예측 가능한 흐름
코드 실행 순서가 작성 순서와 동일
🐌
성능 이슈
긴 작업이 전체 프로그램을 멈춤
console.log("1");
// 3초 대기 (블로킹)
sleep(3000);
console.log("2");
// 출력: 1 → (3초 후) → 2
▶️ 비동기 (Asynchronous)
작업을 병렬로 처리하며, 완료를 기다리지 않고 다음 코드를 실행합니다.
🚀
논블로킹 동작
작업을 시작하고 즉시 다음 코드 실행
⚡
효율적인 처리
I/O 작업 중에도 다른 작업 가능
🧩
복잡성 증가
콜백, 에러 처리 등 관리 필요
console.log("1");
setTimeout(() => {
console.log("2");
}, 3000);
console.log("3");
// 출력: 1 → 3 → (3초 후) → 2
⚙️ JavaScript의 비동기 처리 메커니즘
📚 Call Stack
현재 실행 중인 함수들의 스택. LIFO(Last In First Out) 구조로 동작.
🔄 Event Loop
Call Stack이 비어있을 때 Task Queue의 작업을 Call Stack으로 이동.
📋 Task Queue
비동기 작업의 콜백이 대기하는 큐. FIFO(First In First Out) 구조.
🎯 비동기가 필요한 상황
🌐 네트워크 요청
- • API 호출
- • 파일 다운로드/업로드
- • 데이터베이스 쿼리
📁 파일 시스템
- • 파일 읽기/쓰기
- • 디렉토리 탐색
- • 대용량 파일 처리
⏰ 타이머
- • setTimeout
- • setInterval
- • 애니메이션
👤 사용자 인터랙션
- • 클릭 이벤트
- • 폼 제출
- • 드래그 앤 드롭
🧑💻
1nnovator 김민성
JavaScript 학습 센터 개발자
🌟 이 프로젝트가 도움이 되셨다면 블로그에서 더 많은 개발 이야기를 확인해보세요!
🤖이 페이지는 생성형 AI의 도움을 받아 제작되었습니다.