[javascript] 비동기 처리 개념 설명

 

자바스크립트는 싱글 스레드 기반으로 동작하는 언어이지만, 비동기 처리를 통해 효율적인 작업 수행이 가능합니다. 이번 문서에서는 setTimeout(), Promise, 그리고 async/await를 활용한 비동기 프로그래밍 개념을 정리하고, 다양한 예제를 통해 학습해 보겠습니다.

---

 

 

1. 비동기 처리란?

비동기(asynchronous)란, 코드가 실행되는 동안 다음 코드가 즉시 실행되는 방식을 의미합니다.
즉, 하나의 작업이 끝날 때까지 기다리지 않고 다른 작업을 수행할 수 있습니다.

자바스크립트는 싱글 스레드로 동작하지만, 비동기 처리 기법을 통해 백그라운드에서 작업을 수행하고, 실행이 완료되면 결과를 반환할 수 있습니다.

---

 

 

2. setTimeout()을 이용한 비동기 처리

setTimeout() 함수는 일정 시간이 지난 후 특정 함수를 실행하는 데 사용됩니다.

 

예제 1: setTimeout()의 기본 사용법

console.log("시작");
setTimeout(() => {
    console.log("3초 후 실행");
}, 3000);
console.log("끝");

 

실행 결과 (출력 순서)

시작
끝
(3초 후) 3초 후 실행

 

setTimeout()의 동작 방식

• setTimeout()이 실행되면 지정된 시간이 지난 후에 함수가 실행됩니다.
• 그러나 기본적인 코드 흐름은 멈추지 않고 계속 실행되므로, "끝"이 "3초 후 실행"보다 먼저 출력됩니다.

---

 

 

3. Promise를 이용한 비동기 처리

Promise는 비동기 작업의 결과를 표현하는 객체입니다. resolve()와 reject()를 통해 작업이 성공했는지 실패했는지를 나타냅니다.

 

예제 2: Promise의 기본 사용법

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("데이터 로딩 완료");
        }, 2000);
    });
}

console.log("요청 보냄");
fetchData().then((result) => {
    console.log(result);
});
console.log("다음 작업 수행");

 

실행 결과 (출력 순서)

요청 보냄
다음 작업 수행
(2초 후) 데이터 로딩 완료

 

Promise의 동작 방식

• fetchData() 함수가 실행되면 Promise가 반환됩니다.
• setTimeout()을 사용하여 2초 후 resolve("데이터 로딩 완료")가 실행됩니다.
• then()을 사용하여 결과를 받아 처리할 수 있습니다.

 

Promise의 상태

Promise 객체는 세 가지 상태를 가집니다:

1. pending (대기 중) - 초기 상태, 아직 결과가 없는 상태
2. fulfilled (이행됨) - 비동기 작업이 성공적으로 완료된 상태
3. rejected (거부됨) - 작업이 실패한 상태

---

 

 

4. async/await을 이용한 비동기 처리

async/await은 Promise를 더욱 쉽게 사용할 수 있도록 도와주는 문법입니다.

 

예제 3: async/await의 기본 사용법

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("데이터 로딩 완료");
        }, 2000);
    });
}

async function getData() {
    console.log("요청 보냄");
    const result = await fetchData();
    console.log(result);
    console.log("다음 작업 수행");
}

getData();

 

실행 결과 (출력 순서)

요청 보냄
(2초 후) 데이터 로딩 완료
다음 작업 수행

 

async/await의 동작 방식

• async 함수 내부에서는 await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다릴 수 있습니다.
• fetchData()가 완료될 때까지 await이 실행을 멈추고, 완료되면 다음 코드가 실행됩니다.

 

async/await의 장점

✅ 가독성이 좋아지고, 코드가 Promise.then() 체인보다 직관적으로 작성됨
✅ 기존 try...catch 구문을 활용하여 예외 처리를 쉽게 할 수 있음

---

 

 

5. async/await과 try...catch를 활용한 예외 처리

비동기 작업이 실패할 경우 try...catch 문을 활용하여 예외 처리를 할 수 있습니다.

 

예제 4: async/await을 사용한 예외 처리

function fetchData(isError) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (isError) {
                reject("데이터 로딩 실패");
            } else {
                resolve("데이터 로딩 완료");
            }
        }, 2000);
    });
}

async function getData() {
    try {
        console.log("요청 보냄");
        const result = await fetchData(false);
        console.log(result);
    } catch (error) {
        console.error("오류 발생:", error);
    } finally {
        console.log("작업 종료");
    }
}

getData();

 

실행 결과

✅ 성공 시:

요청 보냄
(2초 후) 데이터 로딩 완료
작업 종료

✅ 실패 시 (fetchData(true)):

요청 보냄
(2초 후) 오류 발생: 데이터 로딩 실패
작업 종료

 

try...catch를 사용한 이유

• await을 사용하면 Promise의 .catch()와 같은 예외 처리가 필요합니다.
• try...catch를 사용하면 오류를 쉽게 감지하고 예외 처리를 할 수 있습니다.

---

 

 

6. 마무리

자바스크립트에서 비동기 처리는 필수적인 개념이며, 올바르게 이해하면 성능을 향상시키고 사용자 경험을 개선할 수 있습니다.

✅ 이번 문서에서 배운 내용

• setTimeout()을 이용한 비동기 처리 방법
• Promise의 동작 방식과 then()을 활용한 비동기 처리
• async/await을 활용한 가독성 높은 코드 작성
• try...catch를 이용한 비동기 예외 처리