[JS] 비동기 (setTimeout, Callback, Promise, async/await)

 

목차

 

 

 

📌 동기 vs 비동기

동기 : 순서 보장 (코드가 블로킹 될 수 있음)

비동기 : 순서 보장 X  (작업 종료 기다리지 않고 바로 실행됨)

 

📌 자바스크립트 엔진 : 자바스크립트 코드를 실행하는 프로그램 

 

📌 자바스크립트 런타임 : 자바스크립트가 실행되는 환경 

 

---

 

 

📌 setTimeout  

자바스크립트 내장 함수 

delay 만큼 지연해서 한번만 실행시킨다.(비동기작업)

setTimeout(callback, delay, param1, param2, ...);

 

 

기본적인 setTimeout 사용방법

 

 

 

매개변수 넘기기

 

 

setTimeout 취소하기

 

 

재귀호출하기

`setInterval` 과 비슷한 동작을 하는데 

이전실행이 끝나야만 다음 실행을 예약하므로 실행 간격이 일정하게 유지된다는 특징이 있음 (안전함)

 

 

 

---

 

 

📌 setInterval

자바스크립트 내장 함수 

일정 시간마다 반복 실행한다. (주기적인 업데이트를 위해 사용)

setInterval(callback, delay, param1, param2, ...);

 

 

기본적인 setInterval 사용법

 

 

setInterval 중지 

 

 

 

매개변수 전달

 

 

 

 

setInterval 중첩 실행

 setInterval 을 중복 실행하지 않도록 하고, setTimeout 으로 관리하여 제어요망

---

 

📌 콜백함수

 

콜백 함수는 다른 함수 안에서 실행되는 함수

나중에 실행될 함수를 다른 함수의 인자로 전달하는 방식

 

 

---

 

 

📌 Promise 

비동기 작업이 끝났을 떄 실행되는 객체

비동기 작업의 결과값을 다룰 수 있는 객체

콜백함수의 단점을 해결힘 (가독성, 콜백지옥)

 

 

• Pending (대기 상태): 작업이 아직 완료되지 않은 상태
• Fulfilled (이행 상태): 작업이 성공적으로 완료된 상태
• Rejected (거부 상태): 작업이 실패한 상태

 

 

• `.then()` : 작업이 성공했을 때 실행되는 콜백 함수
• `.catch()` : 작업이 실패했을 때 실행되는 콜백 함수

 

• `resolve`와 `reject`라는 두 가지 매개변수를 가진 콜백 함수가 인자로 전달됨

 

const myPromise = new Promise((resolve, reject) => {
    let success = true;
    setTimeout(() => {
        if (success) {
            resolve("작업 성공!");
        } else {
            reject("작업 실패!");
        }
    }, 2000);
});

myPromise
    .then(result => console.log("ok", result))
    .catch(error => console.log("error", error));

 

 

Promise 연결 (체이닝)

function task1() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log("작업 1 완료!");
            resolve();
        }, 1000);
    });
}

function task2() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log("작업 2 완료!");
            resolve();
        }, 1000);
    });
}

function task3() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log("작업 3 완료!");
            resolve();
        }, 1000);
    });
}

task1()
    .then(task2)
    .then(task3)
    .then(() => console.log("모든 작업 완료!"));

 

 

 

`Promise.all()` 여러개의 작업 동시에 실행하기

const taskA = new Promise(resolve => setTimeout(() => resolve("A 완료!"), 1000));
const taskB = new Promise(resolve => setTimeout(() => resolve("B 완료!"), 2000));
const taskC = new Promise(resolve => setTimeout(() => resolve("C 완료!"), 1500));

Promise.all([taskA, taskB, taskC]).then(results => {
    console.log("모든 작업 완료:", results);
});

 

 

 

---

 

 

📌 async/await

비동기 코드를 더 쉽게 읽을 수 있게함

• ` async` 함수는 항상 `Promise` 를 반환한다.
• `Promise` 가 아닌 경우도 내부에서 자동으로 `Promise` 로 감싸서 반환
• `async function 함수이름() {}`

 

• `await` async 함수 안에서만 사용 가능, Promise 가 처리 될때까지 기다린후 그 값을 반환함
• 비동기 처리가 동기처럼 순차적으로 진행됨.

async function fetchData() {
  return "데이터 가져오기 완료";
}

async function execute() {
  const result = await fetchData();
  console.log(result);
}

execute();

 

 

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function run() {
    console.log("2초 기다립니다...");
    await delay(2000);
    console.log("2초 후 실행됨!");
}

run();

 

 

 

fetch() 와 async/await 사용

async function fetchData() {
    try {
        let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
        let data = await response.json();
        console.log("데이터 가져오기 완료:", data);
    } catch (error) {
        console.log("에러 발생:", error);
    }
}

fetchData();

 

 

비동기 작업 여러개 처리

async function task1() {
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log("✅ 작업 1 완료!");
}

async function task2() {
    await new Promise(resolve => setTimeout(resolve, 2000));
    console.log("✅ 작업 2 완료!");
}

async function runTasks() {
    console.log("작업 시작!");
    await task1();
    await task2();
    console.log("모든 작업 완료!");
}

runTasks();