JavaScript Promise 객체의 주요 메서드 이해하기

JavaScript의 Promise 객체는 비동기 작업을 처리하는 데 매우 유용한 도구입니다. Promise는 주어진 작업이 성공적으로 완료되거나 실패했을 때의 결과를 나타내는 객체입니다. 특히, 여러 비동기 작업을 다룰 때 유용한 메서드들이 존재합니다. 이번 포스팅에서는 Promise 객체의 주요 메서드인 all(), allSettled(), race()에 대해 설명하고, 실용적인 팁과 사례를 통해 그 활용 방법을 알아보겠습니다.

Promise.all()

Promise.all() 메서드는 주어진 모든 Promise가 이행될 때까지 기다린 후, 이행된 결과를 배열로 반환합니다. 만약 하나라도 거부된다면, 즉시 거부된 Promise의 이유를 반환합니다. 이 메서드는 여러 비동기 작업을 동시에 처리할 때 매우 유용합니다.

예를 들어, API 호출을 통해 여러 데이터를 동시에 가져와야 할 때 사용할 수 있습니다. 아래는 `Promise.all()`의 사용 예시입니다:


const fetchData1 = () => new Promise(resolve => setTimeout(() => resolve("데이터 1"), 1000));
const fetchData2 = () => new Promise(resolve => setTimeout(() => resolve("데이터 2"), 1500));
const fetchData3 = () => new Promise((_, reject) => setTimeout(() => reject("에러 발생"), 500));

Promise.all([fetchData1(), fetchData2(), fetchData3()])
    .then(results => console.log(results))
    .catch(error => console.error(error));

Promise.allSettled()

Promise.allSettled() 메서드는 주어진 모든 Promise가 이행되거나 거부될 때까지 기다린 후, 각 Promise의 결과를 객체 형태로 반환합니다. 이 메서드는 여러 Promise의 성공과 실패를 모두 확인해야 할 때 유용합니다.

아래는 `Promise.allSettled()`의 사용 예시입니다:


Promise.allSettled([fetchData1(), fetchData2(), fetchData3()])
    .then(results => console.log(results));

Promise.race()

Promise.race() 메서드는 주어진 Promise 중 가장 먼저 이행되거나 거부되는 Promise의 결과를 반환합니다. 여러 Promise 중 가장 빠른 결과를 얻고 싶을 때 유용합니다.

아래는 `Promise.race()`의 사용 예시입니다:


Promise.race([fetchData1(), fetchData2(), fetchData3()])
    .then(result => console.log(result))
    .catch(error => console.error(error));

사례 연구

사례 1: API 호출의 동시 처리

웹 애플리케이션에서 여러 API를 동시에 호출해야 할 때, Promise.all()을 사용하여 모든 API의 응답을 기다릴 수 있습니다. 예를 들어, 사용자 프로필, 게시물, 댓글 정보를 동시에 가져와야 할 경우, 다음과 같이 구현할 수 있습니다:


const fetchUserProfile = () => fetch('/api/user/profile').then(res => res.json());
const fetchUserPosts = () => fetch('/api/user/posts').then(res => res.json());
const fetchUserComments = () => fetch('/api/user/comments').then(res => res.json());

Promise.all([fetchUserProfile(), fetchUserPosts(), fetchUserComments()])
    .then(([profile, posts, comments]) => {
        console.log('사용자 프로필:', profile);
        console.log('게시물:', posts);
        console.log('댓글:', comments);
    })
    .catch(error => console.error('API 호출 실패:', error));

사례 2: 비동기 데이터 처리와 오류 관리

Promise.allSettled()을 사용하면, 여러 비동기 작업을 수행하면서 각 작업의 결과를 모두 확인할 수 있습니다. 예를 들어, 여러 파일을 업로드하는 경우, 각 파일의 업로드 성공 여부를 확인할 수 있습니다:


const uploadFile1 = () => new Promise((resolve, reject) => setTimeout(() => resolve('파일 1 업로드 완료'), 2000));
const uploadFile2 = () => new Promise((resolve, reject) => setTimeout(() => reject('파일 2 업로드 실패'), 1500));
const uploadFile3 = () => new Promise((resolve) => setTimeout(() => resolve('파일 3 업로드 완료'), 1000));

Promise.allSettled([uploadFile1(), uploadFile2(), uploadFile3()])
    .then(results => {
        results.forEach((result, index) => {
            if (result.status === 'fulfilled') {
                console.log(`작업 ${index + 1} 성공: ${result.value}`);
            } else {
                console.error(`작업 ${index + 1} 실패: ${result.reason}`);
            }
        });
    });

사례 3: 빠른 응답 처리

여러 비동기 작업 중 가장 빠른 응답을 처리해야 할 때는 Promise.race()를 사용할 수 있습니다. 예를 들어, 여러 CDN에서 리소스를 로드할 때 가장 빠른 CDN의 응답을 사용할 수 있습니다:


const loadFromCDN1 = () => new Promise(resolve => setTimeout(() => resolve('CDN 1 리소스 로드 완료'), 3000));
const loadFromCDN2 = () => new Promise(resolve => setTimeout(() => resolve('CDN 2 리소스 로드 완료'), 1500));
const loadFromCDN3 = () => new Promise(resolve => setTimeout(() => resolve('CDN 3 리소스 로드 완료'), 1000));

Promise.race([loadFromCDN1(), loadFromCDN2(), loadFromCDN3()])
    .then(result => console.log(result))
    .catch(error => console.error('에러 발생:', error));

실용적인 팁

팁 1: Promise의 체이닝을 활용하라

Promise 체이닝을 통해 여러 비동기 작업을 순차적으로 처리할 수 있습니다. 각 작업의 결과를 다음 작업의 입력으로 사용할 수 있으며, 이는 복잡한 비동기 로직을 간단하게 만들어줍니다. 예를 들어, 첫 번째 API 호출의 결과를 두 번째 API 호출에 활용할 수 있습니다.

팁 2: 에러 핸들링을 체계적으로 하라

Promise를 사용할 때는 항상 에러 핸들링을 고려해야 합니다. 각 Promise에 대해 catch()를 사용하여 예외를 처리하고, 전역적으로 처리할 수 있는 방법을 마련해두는 것이 좋습니다. 이것은 유지보수성을 높이고, 예기치 않은 크래시를 방지하는 데 도움이 됩니다.

팁 3: 비동기 작업의 실행 순서를 조절하라

Promise.all()이나 Promise.race()를 사용할 때, 비동기 작업의 실행 순서를 조절할 필요가 있습니다. 예를 들어, 특정 작업이 완료된 후에만 다음 작업을 시작하도록 하는 것이 필요할 수 있습니다. 이럴 때는 async/await 구문을 사용하여 코드를 더 직관적으로 작성할 수 있습니다.

팁 4: 리소스 최적화를 고려하라

여러 비동기 작업을 동시에 처리할 때는 리소스 사용을 최적화해야 합니다. 너무 많은 요청을 동시에 보내면 서버의 응답 속도가 느려질 수 있습니다. Promise.all()을 사용할 때는 요청 제한을 두거나, 일정 시간 간격으로 요청을 보내는 방법을 고려해보세요.

팁 5: 각 Promise의 상태를 모니터링하라

Promise.allSettled()를 사용하면 각 Promise의 상태를 모니터링할 수 있습니다. 이를 통해 어떤 작업이 성공했는지, 실패했는지를 쉽게 파악할 수 있으며, 사용자에게 유용한 피드백을 제공할 수 있습니다. 이것은 사용자 경험을 향상시키는 데 큰 도움이 됩니다.

요약 및 실천 팁

JavaScript의 Promise 객체는 비동기 프로그래밍에서 매우 중요한 역할을 합니다. all(), allSettled(), race() 메서드를 적절히 활용하면, 여러 비동기 작업을 효율적으로 처리하고, 사용자 경험을 향상시킬 수 있습니다.

실행 가능한 팁으로는 비동기 작업의 체이닝, 에러 핸들링, 작업 순서 조절, 리소스 최적화, 상태 모니터링 등을 고려해야 합니다. 이러한 팁을 적용해 보면서, Promise의 다양한 메서드를 활용하여 비동기 프로그래밍을 한층 더 발전시켜 보세요.

excel_world