ES6(ECMAScript 2015) – 프로미스 – 0 – 프로미스의 개념과 사용

ES6(ECMAScript 2015) - 객체 리터럴 확장 - 2 - 프로토타입 축약
ES6(ECMAScript 2015) – 프로미스 – 0 – 프로미스의 개념과 사용

ES6(ECMAScript 2015) – 프로미스 – 0 – 프로미스의 개념과 사용

ES6(ECMAScript 2015)

ES6(ECMAScript 2015)은 자바스크립트의 버전 중 하나로, 2015년에 발표되었습니다. ES6는 많은 새로운 기능과 개선 사항을 도입하여 개발자들이 더욱 효율적으로 코드를 작성할 수 있게 해줍니다. 이 중에서도 프로미스는 비동기 처리를 더욱 간편하게 다룰 수 있도록 도와주는 기능입니다.

프로미스란?

프로미스는 자바스크립트에서 비동기 작업을 처리하기 위해 사용되는 객체입니다. 비유적으로 설명하자면, 프로미스는 우리가 미리 주문한 음식이 도착했을 때 알려주는 테이블 호출기와 비슷합니다. 주문을 할 때는 요리가 준비될 때까지 기다리지 않고 다른 작업을 할 수 있으며, 요리가 준비되면 알림을 받아 처리할 수 있습니다. 이러한 비동기 작업의 처리를 프로미스가 도와줍니다.

프로미스의 사용

프로미스는 new Promise() 생성자를 사용하여 생성할 수 있습니다. 프로미스 생성자는 함수를 인자로 받으며, 이 함수는 두 개의 콜백 함수를 인자로 받습니다. 첫 번째 콜백 함수는 비동기 작업을 수행하고, 성공한 경우 resolve() 함수를 호출하여 결과 값을 전달합니다. 두 번째 콜백 함수는 작업이 실패한 경우 reject() 함수를 호출하여 에러를 전달합니다.

예를 들어, 비동기적으로 데이터를 불러오는 작업을 프로미스로 처리해보겠습니다.

const fetchData = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  setTimeout(() => {
    const data = { id: 1, name: 'John' };
    if (data) {
      resolve(data); // 작업이 성공한 경우 resolve 호출
    } else {
      reject('Error occurred'); // 작업이 실패한 경우 reject 호출
    }
  }, 2000); // 2초 후에 작업이 완료됨
});

fetchData
  .then(result => {
    console.log(result); // 작업이 성공한 경우 실행됨
  })
  .catch(error => {
    console.error(error); // 작업이 실패한 경우 실행됨
  });

위의 코드에서는 fetchData라는 프로미스 객체를 생성합니다. 이 프로미스는 2초 후에 데이터를 불러옵니다. 데이터를 성공적으로 불러온 경우 resolve() 함수를 호출하여 데이터를 전달하고, 실패한 경우 reject() 함수를 호출하여 에러를 전달합니다. 그리고 .then().catch() 메서드를 사용하여 프로미스의 상태를 처리합니다. .then()은 작업이 성공한 경우 실행되고, .catch()는 작업이 실패한 경우 실행됩니다.

프로미스를 사용함으로써 비동기 작업을 좀 더 구조적으로 다룰 수 있습니다. 작업이 완료되면 resolve() 함수를 호출하고, 결과 값을 .then() 메서드에서 받아 처리할 수 있습니다. 작업이 실패하면 reject() 함수를 호출하고, 에러를 .catch() 메서드에서 처리할 수 있습니다.

프로미스의 주의할 점

프로미스를 사용할 때 주의해야 할 몇 가지 점이 있습니다.

  1. 프로미스는 한 번 실행된 후에는 상태가 변경되지 않습니다. 즉, 한 번 resolve() 또는 reject()가 호출되면 상태가 결정되고 해당 상태는 변하지 않습니다. 따라서 프로미스를 다시 사용하려면 새로운 프로미스를 생성해야 합니다.

  2. .then() 메서드는 항상 새로운 프로미스를 반환합니다. 이를 이용하여 여러 개의 비동기 작업을 연결하거나 체이닝할 수 있습니다.

  3. 프로미스 체이닝에서 발생한 에러는 .catch() 메서드로만 처리됩니다. .then() 메서드 체인 중 어떤 부분에서 에러가 발생하면 바로 다음 .catch() 블록으로 이동하여 에러를 처리합니다. 따라서 .catch()를 적절히 활용하여 예외 상황을 처리해야 합니다.

  4. 비동기 작업을 수행하는 함수에서 예외가 발생하면 프로미스가 거부됩니다. 이를 .catch() 메서드에서 처리해주어야 합니다. 또한, 비동기 함수 내부에서 throw를 사용하여 에러를 발생시키면 자동으로 거부 상태로 전환됩니다.

프로미스를 사용하는 것은 비동기 작업을 더욱 효율적으로 다룰 수 있는 방법 중 하나입니다. 프로미스를 사용하여 비동기 코드를 읽기 쉽고 유지보수하기 쉽게 작성할 수 있습니다. 프로미스의 사용법을 익히고, 주의해야 할 점들을 숙지하여 더 나은 자바스크립트 코드를 작성해보세요!

마크다운 포맷:

**ES6(ECMAScript 2015) - 프로미스 - 0 - 프로미스의 개념과 사용**

# ES6(ECMAScript 2015)
...

## 프로미스란?
...

## 프로미스의 사용
...

## 프로미스의 주의할 점
...

주의할 점을 보기 쉽게 정리하면 다음과 같습니다:

  • 프로미스는 한 번 상태가 결정되면 변경되지 않는다.
  • .then() 메서드는 항상 새로운 프로미스를 반환한다.
  • 프로미스 체이닝에서 발생한 에러는 .catch() 메서드로만 처리된다.
  • 비동기 작업을 수행하는 함수에서 예외가 발생하면 프로미스가 거부된다.
  • 예외 상황을 처리하기 위해 .catch() 메서드를 적절히 사용해야 한다.

답글 남기기