비동기 - 콜백함수 예제

🔹 핵심 개념 요약

• setTimeout() : 비동기 함수, 지정한 시간이 지난 후 콜백 함수 실행.
• 콜백 함수(callback function) : 다른 함수에 인자로 전달되어, 특정 시점에 실행되는 함수.
• fetchData(resolve) : 데이터를 요청한 뒤, 그 결과를 전달받은 콜백 함수(resolve) 에 넘겨주는 역할.

---

🔸 첫 번째 코드 — 기본 비동기 예제

document.querySelector('#request-btn1').addEventListener('click', () => {
  console.log("메인 작업 시작");  // ①
  setTimeout(() => {              // ③ (비동기 실행 예약)
    const responseData = { name: "홍길동", age: 20 };
    console.log(responseData.name); // ④ 응답 데이터의 이름 출력
    console.log("데이터 요청 및 후속 작업 완료");
  }, 0);
  console.log("메인 작업 종료");  // ②
});

🧠 실행 순서

1. "메인 작업 시작" 출력
2. setTimeout() 호출 → 0초 뒤 실행 예약 (즉시 실행이 아니라 콜백 큐에 등록)
3. "메인 작업 종료" 출력 (콜스택이 비워져야 setTimeout 콜백이 실행됨)
4. 이후 콜백 실행 → "홍길동", "데이터 요청 및 후속 작업 완료" 출력

💬 콘솔 출력 순서:

메인 작업 시작
메인 작업 종료
홍길동
데이터 요청 및 후속 작업 완료

즉, 0초라도 setTimeout() 내부 코드는 콜스택이 비워진 뒤에 실행됨 → 이벤트 루프(Event Loop)의 원리 때문!

---

🔸 두 번째 코드 — 비슷하지만 다른 후속작업

document.querySelector('#request-btn2').addEventListener('click', () => {
  console.log("메인 작업 시작");
  setTimeout(() => {
    const responseData = { name: "홍길동", age: 20 };
    console.log(responseData.age);
  }, 0);
  console.log("메인 작업 종료");
});

💬 콘솔 출력 순서:

메인 작업 시작
메인 작업 종료
20

위와 동일한 구조이지만, 이번에는 이름(name) 대신 나이(age) 를 출력.

---

🔸 세 번째 코드 — fetchData()로 콜백 전달 방식

이 부분이 핵심이에요 👇

document.querySelector('#request-btn1').addEventListener('click', () => {
  console.log("메인 작업 시작");
  fetchData(responseData => console.log(responseData.name)); 
  console.log("메인 작업 종료");
});

document.querySelector('#request-btn2').addEventListener('click', () => {
  console.log("메인 작업 시작");  
  fetchData(responseData => console.log(responseData.age)); 
  console.log("메인 작업 종료"); 
});

💡 포인트:

• fetchData()는 “데이터 요청 시뮬레이션 함수”

• responseData => console.log(responseData.name) 이 부분이 바로 콜백 함수

  • 즉, 데이터가 응답된 후에 실행될 함수를 직접 전달하는 것

---

🔸 마지막 — fetchData() 함수 정의

function fetchData(resolve) {
  setTimeout(() => {
    const responseData = { name: "홍길동", age: 20 };
    resolve(responseData);  // 전달받은 콜백 실행
  }, 0);
}

💬 실행 원리:

1. setTimeout()으로 비동기 작업 예약
2. 0초 뒤 실행될 때 responseData(데이터)를 생성
3. 인자로 받은 resolve 함수(콜백)를 실행하면서 데이터를 전달
   → 결국, 전달받은 함수(console.log(responseData.name) 같은 것)가 실행됨

---

⚙️ 정리 (비동기 콜백 흐름)

단계	설명	코드 예시
①	메인 코드 실행	"메인 작업 시작"
②	fetchData() 호출	데이터 요청 시작
③	setTimeout() 예약	콜백이 나중에 실행되도록 큐에 등록
④	"메인 작업 종료" 출력	메인 스레드는 바로 다음 코드 실행
⑤	타이머 만료 → 콜백 실행	resolve(responseData) 호출
⑥	전달된 콜백 실행	이름이나 나이 출력

---

🧩 최종 콘솔 출력 예시

🔹 버튼 1 클릭 시

메인 작업 시작
메인 작업 종료
홍길동

🔹 버튼 2 클릭 시

메인 작업 시작
메인 작업 종료
20

---

🔍 요약

구분	동기 처리	비동기 처리 (콜백 사용)
실행 순서	코드 순서대로	나중에 콜백 큐에 등록되어 실행
장점	순서가 예측 가능	UI 멈추지 않음, 효율적
단점	오래 걸리는 작업 시 브라우저 멈춤	콜백 중첩 시 복잡해짐(콜백지옥)

---

심플문제)

🧩 태스크 큐의 역할
setTimeout() 콜백 함수가 바로 실행되지 않고 “나중에 실행되는 이유”는?
한 문장으로 설명해보세요.
(힌트: 콜스택, 이벤트 루프, 태스크 큐 관련된 이유!)

답변 : “태스크 큐 비동기 함수라서”

✅ 정답 버전:

setTimeout() 콜백은 태스크 큐에 저장되고,
콜스택이 비워질 때 이벤트 루프가 꺼내 실행하기 때문이에요.

즉,
“콜스택이 비어야 태스크 큐의 함수가 실행된다” — 이게 핵심이에요.