JavaScript 기초 <8. 비동기 처리의 기초 (setTimeout, setInterval, Promise)>

자바스크립트 JavaScript

8. 비동기 처리의 기초 (setTimeout, setInterval, Promise) 

 

안녕하세요! 태마입니다.

JavaScript 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

자바스크립트 JavaScript

포스팅 시작하겠습니다 :)

 

 

 

---

 

1. 주제 간단 정리

 

1. 비동기(Asynchronous)란?

비동기(Asynchronous)란 코드가 실행될 때, 특정 작업이 완료될 때까지 기다리지 않고 다음 작업을 수행하는 방식을 의미합니다.

📌 비동기 처리는 웹 개발에서 필수적인 개념! → 네트워크 요청, 이벤트 처리, 타이머 등에 활용

---

 

2. 동기(Synchronous) vs 비동기(Asynchronous) 차이점

구분설명예제

동기 처리	작업이 순차적으로 실행됨	console.log("A"); console.log("B"); console.log("C");
비동기 처리	작업이 완료될 때까지 기다리지 않고 다음 코드 실행	setTimeout(() => console.log("B"), 1000); console.log("A");

console.log("A");
setTimeout(() => console.log("B"), 1000);
console.log("C");

✅ 결과:

A
C
(1초 후) B

📌 비동기 코드에서는 B가 나중에 실행되므로, 예상과 다른 순서가 나올 수 있음!

---

 

3. setTimeout과 setInterval 기본 사용법

✅ 1) setTimeout – 일정 시간이 지난 후 실행

setTimeout(() => {
    console.log("3초 후 실행됩니다!");
}, 3000);

✅ 결과: "3초 후 실행됩니다!" (3초 후 실행됨)

📌 특정 시간 후에 한 번만 실행되는 함수!

✅ 2) setInterval – 일정 시간마다 반복 실행

let count = 0;
const interval = setInterval(() => {
    count++;
    console.log(`반복 실행: ${count}`);
    if (count === 5) clearInterval(interval); // 5번 실행 후 종료
}, 1000);

✅ 결과:

 

반복 실행: 1
반복 실행: 2
반복 실행: 3
반복 실행: 4
반복 실행: 5 (그 후 종료)

📌 setInterval은 반복 실행 → clearInterval을 사용하여 중단 가능!

---

✅ 여기까지 비동기 처리의 개념과 기본적인 setTimeout, setInterval을 배웠습니다!
👉 "그렇다면, 비동기 코드에서 콜백 지옥(Callback Hell)을 해결하는 Promise는 어떻게 동작할까?"
✅ 2부에서 Promise, async/await, 비동기 처리 최적화 방법까지 상세히 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. Promise란?

Promise는 비동기 작업의 결과를 나중에 받을 수 있도록 도와주는 객체입니다.

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("비동기 작업 완료!");
    }, 2000);
});

myPromise.then((result) => console.log(result));

✅ 결과: "비동기 작업 완료!" (2초 후 실행)

📌 Promise를 사용하면 콜백 지옥을 방지할 수 있다!

---

 

2. Promise를 활용한 비동기 처리

✅ 1) then()과 catch()를 사용한 비동기 처리

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let success = true;
            success ? resolve("데이터 로드 성공!") : reject("데이터 로드 실패!");
        }, 2000);
    });
}

fetchData()
    .then((data) => console.log(data))  // 성공 시 실행
    .catch((error) => console.error(error));  // 실패 시 실행

✅ 결과: "데이터 로드 성공!" 또는 "데이터 로드 실패!"

📌 Promise는 .then()과 .catch()를 사용하여 비동기 작업의 결과를 처리한다!

---

 

3. async/await을 사용한 비동기 코드

async/await을 사용하면 비동기 코드를 동기 코드처럼 읽기 쉽게 작성할 수 있습니다.

async function fetchData() {
    try {
        let data = await new Promise((resolve) => setTimeout(() => resolve("데이터 로드 완료!"), 2000));
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

fetchData();

✅ 결과: "데이터 로드 완료!" (2초 후 실행)

📌 async/await을 사용하면 비동기 코드의 가독성이 좋아진다!

---

 

4. Promise.all()을 활용한 병렬 처리

Promise.all()을 사용하면 여러 개의 비동기 작업을 동시에 실행할 수 있습니다.

const promise1 = new Promise((resolve) => setTimeout(() => resolve("첫 번째 완료!"), 2000));
const promise2 = new Promise((resolve) => setTimeout(() => resolve("두 번째 완료!"), 1000));

Promise.all([promise1, promise2]).then((results) => {
    console.log(results); // ["첫 번째 완료!", "두 번째 완료!"]
});

📌 여러 개의 비동기 작업을 병렬로 실행하여 성능을 향상시킬 수 있다!

---

 

✅ 지금까지 비동기 처리의 기초, Promise, async/await 활용법을 배웠습니다!
👉 "그렇다면, ES6 이후 추가된 최신 문법들은 어떤 것들이 있을까?"
✅ 다음 회차에서 let/const, 화살표 함수, 템플릿 리터럴 등 ES6 주요 문법을 배워봅시다! 🚀