[JavaScript] 비동기 처리

📌 추가로 정리할 것 
- 비동기 처리 방법
- call back
- promise

 

동기 vs 비동기 

JavaScript는 기본적으로 싱글 스레드 (single thread) 언어이며, 
비동기 방식처럼 동작할 수 있음 

 

개념

• 동기 (Synchronous)
  • 한 번에 한 작업만 실행하며, 작업이 끝날 때까지 다음 코드가 실행되지 않음 
  • 작업이 완료될 때까지 기다림 -> 중간에 실행 속도가 느리면, 다음 부분이 아예 화면에 보이지 않음 

console.log('1') // 바로 출력 
alert('사용자의 입력을 기다립니다.') // 사용자가 누를 때까지 대기 
console.log('2') // 윗 줄이 실행 완료될 때까지 출력되지 않음

 

• 비동기 (Asynchronous)
  • 하나의 작업이 끝날 때까지 기다리지 않고, 다른 작업을 동시에 실행 가능 
  • 빠른 실행 속도와 유연한 코드 실행이 가능
  • 대표적인 비동기 작업
    • `setTimeout`,`setInterval` (시간 지연)
    • `fetch API` (네트워크 요청) 
    • 이벤트 리스너 (클릭, 키 입력 등)
    • `Promise`,`async`/`await` (비동기 코드 처리)

console.log('1')

setTimeout(() => {
    console.log('2')
}, 2000)

console.log('3')

// 결과 : 1 3 2

 

 

JavaScript에서 비동기가 필요한 이유 

• 문제점
  • 만약 서버에서 데이터를 가져올 때, 동기 방식으로 실행하면 데이터를 가져올 때까지 이후 코드가 멈춰버림

 

 

비동기 처리 방법

1️⃣ 콜백 함수 (Callback)

다른 함수의 `인자`로 전달되어 특정 시점에 실행되는 함수
콜백 함수는 미리 등록해두고, 특정 시점이나 이벤트가 발생했을 때 시스템이 호출되는 함수

• 비동기 작업이 완료된 후 실행할 코드 (작업)를 미리 등록하는 역할
• 함수 내부에서 실행 시점을 조절할 수 있음 
• 주로 비동기 처리 (예: API 호출, 파일 읽기, 타이머)에서 사용됨 

// setTimeout() 예제 
console.log("A");

setTimeout(function () {
    console.log("B");
}, 2000); // 2초 후 실행

console.log("C");

 

‼️ 콜백 지옥 (Callback Hell) 문제 

• 설명
  • 콜백 함수가 중첩될수록 코드가 복잡해지는 문제 
• 문제점
  • 코드가 중첩될수록 가독성이 떨어짐
  • 디버깅과 오류 처리가 매우 어려워질 수 있음 
• 현재
  • 따라서 대부분의 최신 비동기 API는 콜백을 사용하지 않음 
  • 대신 이 문제를 해결하기 위해 `Promise`와 `async`/`await`가 등장함 

// 콜백 지옥 예제 
function step1(callback) {
    setTimeout(() => {
        console.log("1단계 완료");
        callback();
    }, 1000);
}

function step2(callback) {
    setTimeout(() => {
        console.log("2단계 완료");
        callback();
    }, 1000);
}

function step3(callback) {
    setTimeout(() => {
        console.log("3단계 완료");
        callback();
    }, 1000);
}

// 콜백 중첩 (콜백 지옥 발생)
step1(() => {
    step2(() => {
        step3(() => {
            console.log("모든 작업 완료!");
        });
    });
});

 

 

 

 

 

📚 콜백 함수(Callback) 개념 & 응용 - 완벽 정리

 

 

2️⃣ Promise 

promise는 비동기 작업이 성공하거나 실패할 때 그 결과를 알려주겠다고 '약속'하는 객체 

• 설명
  • 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 반환할 수 있음 
  • 다만, 최종 결과를 반환하는 것이 아니라 미래 어떤 시점에 결과를 제공하겠다는 프로미스 (약속)을 반환
• 등장 배경 
  • 콜백 함수를 이용한 비동기 처리는 콜백 지옥 문제를 초래하기도 함. 
  • `promise`를 사용하면, 코드를 더 깔끔하고 체계적으로 정리할 수 있음 
• 상태
  • 대기 (pending) : 비동기 작업이 아직 완료되지 않은 상태 (이행하지도, 거부하지도 않은 초기 상태)
  • 이행 (fulfilled) : 비동기 작업이 성공적으로 완료된 상태 (연산이 성공적으로 완료)
  • 거부 (rejected) : 비동기 작업이 실패한 상태 (연산이 실패함)

 

비동기 메서드에서 동기 메서드처럼?
보통 비동기 코드 (ex: setTimeout, fetch 등)는 실행 결과를 즉시 반환하지 못함. 하지만, promise의 `then()`을 통해 연결하면 순차적으로 처리할 수 있으므로 동기 코드처럼 보이게 됨 

 

Promise 사용법 

 

 

 

 

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise - JavaScript | MDN

 

 

 

 

 

https://inpa.tistory.com/entry/%F0%9F%8C%90-js-async

🌐 자바스크립트의 핵심 '비동기' 완벽 이해 ❗

 

 

 

 

⚙️ 비동기 처리 동작 원리 

비동기 처리의 동작 원리가 궁금했는데, 친구에게 영상을 추천받아 이해한 바를 정리해 봤습니다. 
아래의 영상을 먼저 한번 보시고 글을 읽는 것을 추천드립니다. 

 

JavaScript Runtime (단순화 예시)

자바스크립트는 싱글 스레드 기반 언어이지만, 비동기 처리를 지원하기 위해
Web APIs, 이벤트 루프, 콜백 큐를 그림과 같이 활용함 

• 실행 위치?
  • Heap & Stack :JavaScript 엔진 내부 (V8, SpiderMonkey 등)
  • Web APIs : 브라우저 (또는 Node.js 런타임 환경)
  • Callback Queue & Event Loop : 브라우저 (또는 Node.js 런타임 환경) 

webapis가 실행되는 위치는 서버가 아니라 내!!!!!!!! 컴퓨팅 자원을 쓰는거다!!

• heap (힙)
  • 참조 자료형 (object, array, function)과 같은 데이터가 저장되는 공간 
  • 메모리 주소 (참조값) 저장

• stack (스택)
  • 자바스크립트 실행 컨텍스트 (excution context)를 저장하는 공간 
  • LIFO (last in, first out) 구조 : 함수가 실행되면 stack에 쌓이고, 실행이 끝나면 제거됨 
• web apis (비동기 처리 영역)
  
  • setTimeout, DOM 이벤트, AJAX 요청 같은 비동기 작업이 실행되는 공간
  • 브라우저에는 비동기로 처리할 수 있는 공간이 따로 마련되어 있음
  • JavaScript는 싱글 스레드이므로, web apis를 통해 비동기 작업을 실행 후 대기시킴 
• callback queue (콜백 큐)
  • web apis에서 완료된 작업이 콜백 큐로 이동
  • 이벤트 핸들러가 대기하는 공간
  • 하지만 바로 실행되지 않고, stack이 비었을 때 이벤트 루프가 실행하도록 함
• event loop (이벤트 루프)
  • stack이 비었는지 확인하고, 비었을 경우에만 콜백 큐에서 작업을 가져와 실행 
  • javascript가 비동기 코드를 관리하는 핵심 매커니즘 

 

the call stack

• printsquare을 기준으로 함수가 호출되는 순으로 쌓이고 (printsqure > square ...),
• 실행되는 순으로 빠져나간다 (multiply > square ...)

 

동작 순서 

1. main() 함수가 실행

2. console.log('hi') 실행

• 콘솔에 hi 출력
• stack 빠져나감 

3. setTimeout(cb, 5000) 실행

• 콜백 함수(cb)를 web api에 넘김
• web api에서 5초 타이머 시작
• setTimeout 함수는 실행이 끝나므로 stack에서 제거됨 

3번 과정 그림

4.console.log('JSConfEU') 실행

• 콘솔에 JSConfEU 출력
• stack 빠져나감

5. 5초 후, 콜백 함수 (cb) 실행 준비

• web api는 cb를 callback queue에 넣음

5번 과정 완료 후

6. event loop가 callback queue를 확인

• event loop는 stack이 비어있는지 확인
• stack이 비어 있으면 callback queue에서 cb를 꺼내 실행 

6번 과정 완료 후

 

7. console.log('there') 실행

• cb가 stack에 들어가 실행됨
• there가 콘솔에 출력 

 

* 만약 setTimeout이 '0'으로 설정되어 있다면❓ 

setTimeout이 0으로 설정되어 있다고 하더라도 task queue로 넘어간 cb는 stack이 비워져야지 실행됨
따라서 지연 시간과 관계없이 결과는 1, 3, 2로 출력

console.log('1')

setTimeout(function cb() {
    console.log('2')
}, 0)

console.log('3')
// 결과: 1, 3, 2