비동기 JavaScript 예제

1. 콜백 함수

결과가 여기에 표시됩니다.

// 콜백 패턴
function fetchData(callback) {
    setTimeout(() => {
        callback("데이터 로드 완료");
    }, 1000);
}

fetchData((result) => {
    console.log(result);
});

2. Promise

결과가 여기에 표시됩니다.

// Promise 생성
const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("성공!");
        // reject(new Error("실패!"));
    }, 1000);
});

// Promise 사용
promise
    .then(result => console.log(result))
    .catch(error => console.error(error))
    .finally(() => console.log("완료"));

3. async/await

결과가 여기에 표시됩니다.

async function fetchData() {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error(error);
    }
}

4. Promise.all, Promise.race

결과가 여기에 표시됩니다.

5. Fetch API

API 결과가 여기에 표시됩니다.

6. POST 요청

결과가 여기에 표시됩니다.

7. 에러 처리 패턴

결과가 여기에 표시됩니다.

8. 실전 예제: 사용자 카드

9. setTimeout, setInterval

타이머: 0