본문 바로가기

프로그래밍 언어/자바스크립트

자바스크립트 프로미스(Promise)와 비동기 프로그래밍

자바스크립트 프로미스(Promise)와 비동기 프로그래밍

자바스크립트(JavaScript)에서 비동기 작업을 처리하는 방법은 다양합니다. 그 중에서도 Promise는 비동기 코드를 보다 읽기 쉽고 관리하기 쉽게 만들어주는 중요한 도구입니다. 이 가이드에서는 Promise의 기본 개념부터 고급 활용법까지 상세히 살펴보겠습니다.

 

 

 

1. 프로미스란?

Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. Promise는 세 가지 상태를 가질 수 있습니다:

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

 

 

2. 프로미스의 기본 사용법

새로운 Promise 객체를 생성하려면 다음과 같은 구문을 사용합니다:

const promise = new Promise((resolve, reject) => {
    // 비동기 작업 수행
    if (성공) {
        resolve(value);
    } else {
        reject(error);
    }
});

Promise 객체는 thencatch 메서드를 사용하여 처리 결과를 다룹니다:

promise.then(value => {
    // 성공 처리
}).catch(error => {
    // 실패 처리
});

 

 

3. 프로미스 체이닝

then 메서드는 또 다른 Promise를 반환하므로, 여러 개의 then을 체인 형태로 연결하여 사용할 수 있습니다. 이를 통해 비동기 작업을 순차적으로 처리할 수 있습니다:

promise
    .then(value1 => {
        // 첫 번째 성공 처리
        return value2;
    })
    .then(value2 => {
        // 두 번째 성공 처리
    })
    .catch(error => {
        // 오류 처리
    });

 

 

4. 에러 처리

Promise의 에러 처리는 catch 메서드를 통해 이루어집니다. catch는 체인 내에서 발생한 모든 오류를 처리할 수 있습니다:

promise
    .then(value => {
        // 성공 처리
    })
    .catch(error => {
        // 오류 처리
    });

 

 

 

 

5. 프로미스의 고급 사용법

Promise.allPromise.race 같은 고급 메서드는 여러 개의 Promise를 동시에 처리하는 데 유용합니다. Promise.all은 모든 Promise가 이행될 때까지 기다리고, Promise.race는 가장 먼저 완료된 Promise의 결과를 반환합니다:

Promise.all([promise1, promise2]).then(values => {
    // 모든 프로미스가 완료된 후 처리
});

Promise.race([promise1, promise2]).then(value => {
    // 가장 먼저 완료된 프로미스의 결과 처리
});

 

 

6. async/await와 프로미스

asyncawait 키워드는 Promise를 더 쉽게 다룰 수 있게 해줍니다. async 함수는 항상 Promise를 반환하며, await 키워드는 Promise가 이행될 때까지 기다립니다:

async function asyncFunction() {
    try {
        const value = await promise;
        // 성공 처리
    } catch (error) {
        // 오류 처리
    }
}

 

 

7. 프로미스 관련 유용한 팁

  • 에러 처리를 항상 고려하세요: 비동기 작업에서 발생할 수 있는 오류를 놓치지 않도록 주의해야 합니다.
  • 프로미스 체이닝을 활용하세요: 복잡한 비동기 로직을 체계적으로 관리할 수 있습니다.
  • 고급 메서드를 활용하세요: Promise.allPromise.race를 사용하여 비동기 작업을 효과적으로 처리할 수 있습니다.