JavaScript에서 비동기 작업을 처리하는 것은 효율적이고 유연한 애플리케이션을 만드는 데 필수적입니다. 여기서 약속이 적용됩니다. 서버의 응답을 기다리는 동안 코드가 차단되지 않도록 하는 방법에 대해 궁금한 적이 있습니까? 아니면 다른 작업이 완료된 후에만 특정 작업을 어떻게 실행할 수 있습니까? 음, JavaScript의 Promise가 여러분이 찾고 있던 솔루션입니다.

이 문서에서는 Promise가 무엇인지, 어떻게 작동하는지, 앱 흐름을 어떻게 개선할 수 있는지 살펴보겠습니다. 자세한 내용을 살펴보겠습니다.

JavaScript에서 약속이란 무엇입니까?

JavaScript의 Promise는 비동기 작업의 최종 완료(또는 실패)와 결과 값을 나타내는 개체입니다. 즉, Promise는 비동기 코드 실행을 처리하고 코드 작성 당시에는 아직 알려지지 않은 값으로 작업할 수 있게 해주는 중개자입니다.

약속의 주요 특징:

• 보류 중: 비동기 작업이 아직 완료되지 않은 초기 상태입니다.
• 해결됨(완료): 비동기 작업이 성공적으로 완료되었으며 결과를 얻었습니다.
• 거부됨: 비동기 작업이 실패했으며 이유 또는 오류가 제공되었습니다.

Promise의 이 수명 주기를 통해 비동기 작업을 보다 명확하고 효율적으로 처리하여 "콜백 지옥"을 피할 수 있습니다.

약속을 사용하는 이유는 무엇입니까?

프라미스는 서버에 대한 요청 작업을 할 때 특히 유용합니다. 데이터를 얻기 위해 HTTP 요청을 한다고 가정해 보세요. 대기 시간은 다양할 수 있으며 응답이 도착하는 동안 애플리케이션이 정지되는 것을 원하지 않습니다. Promise를 사용하면 코드가 기다리지 않고 계속 실행되어 애플리케이션의 전반적인 성능이 향상됩니다.

또한 다음과 같은 다른 경우에도 약속이 적용됩니다.

• 파일 조작: 다른 작업을 실행하기 전에 파일이 업로드되거나 처리될 때까지 기다릴 수 있습니다.
• DOM 수정: 다른 작업을 계속하기 전에 특정 인터페이스 변경이 완료되었는지 확인해야 하는 경우.

Promise를 사용하면 여러 비동기 작업을 더 읽기 쉽고 유지 관리하기 쉬운 방식으로 연결할 수 있습니다.

JavaScript에서 약속을 사용하는 방법

Promise를 생성하려면 Promise 생성자가 사용되며 두 개의 인수(Resolve 및 Reject)가 있는 함수를 전달합니다.

let miPromesa = new Promise((resolve, reject) => {
    // Simulación de una operación asíncrona
    let exito = true;

    if (exito) {
        resolve("Operación exitosa!");
    } else {
        reject("Ocurrió un error.");
    }
});

Promise의 결과를 처리하기 위해 .then() 및 .catch() 메서드가 사용됩니다:

miPromesa
    .then((mensaje) => {
        console.log(mensaje); // "Operación exitosa!"
    })
    .catch((error) => {
        console.error(error); // "Ocurrió un error."
    });`

콜백에 비해 Promise의 장점

Promise가 도입되기 전에는 비동기 작업 처리가 주로 콜백을 통해 수행되었습니다. 그러나 이는 특히 "콜백 지옥"으로 알려진 여러 콜백이 중첩된 경우 추적 및 유지 관리가 어려운 코드로 이어질 수 있습니다.

약속의 장점:

• 가독성: 코드를 읽고 따라가기가 더 쉽습니다.
• 유지 관리: 오류 식별 및 처리를 용이하게 합니다.
• 연결: 여러 비동기 작업을 보다 체계적으로 연결할 수 있습니다.

약속 대 비동기/대기

Promise가 콜백에 비해 크게 개선되었지만 ECMAScript 2017에 async/await가 도입되면서 비동기 작업을 처리하기 위한 구문이 더욱 단순화되었습니다.

async function obtenerDatos() {
    try {
        let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

async/await를 사용하면 코드가 동기 코드와 유사하게 선형화되지만 내부적으로는 여전히 비동기적입니다. 그러나 async/await는 여전히 핵심적으로 promise를 사용하므로 promise의 작동 방식을 이해하는 것이 async/await 사용을 마스터하는 데 중요합니다.

결론

JavaScript의 Promise는 여러 콜백으로 코드를 복잡하게 만들지 않고 비동기 작업을 처리하기 위한 강력한 도구입니다. 요청부터 서버, 애플리케이션 내의 더 복잡한 작업에 이르기까지 Promise를 사용하면 더 깔끔하고, 더 읽기 쉽고, 유지 관리하기 더 쉬운 코드를 작성할 수 있습니다.

간단한 웹 애플리케이션을 구축하든 더 복잡한 시스템을 구축하든, 코드 성능을 최적화하려면 약속을 처리하는 방법을 배우는 것이 필수적입니다.