프로미스는 비동기 함수가 반환하는 객체에요. 함수의 성공 또는 실패 상태를 알려줘요. 콜백을 직접 호출하는 방법 대신, 프로미스로 콜백을 부를 수 있어요. 이런 특징 때문에 프로미스를 사용하면 비동기 처리 시점, 비동기 함수의 결과를 쉽게 확인할 수 있고 에러도 어디서 일어났는지 파악하기 편리해요.

프로미스는 세 개의 상태를 가질 수 있어요.

• 대기(Pending): 비동기 함수가 아직 시작하지 않은 상태
• 성공(Fulfilled): 비동기 함수가 성공적으로 완료된 상태
• 실패(Rejected): 비동기 함수가 실패한 상태

비동기 작업이란 특정 코드의 로직이 끝날 때까지 기다리지 않고, 나머지 코드를 먼저 실행하는 것이에요. 웹사이트 개발에는 비동기 작업을 자주 사용해요. 서버에서 데이터를 불러올 때 오래 걸릴 수도 있는데, 그동안 다른 코드를 실행하지 않고 가만히 기다리면 웹 사이트를 로딩하는 게 굉장히 오래 걸리기 때문이죠.

하지만 순서대로 불러야 하는 코드가 있으면 어떤 일이 일어날까요? 예를 들어, 연산이 끝나기도 전에 연산 결과를 파라미터로 사용하는 함수를 실행하면 에러가 나겠죠. 그래서 이런 비동기 작업을 순차적으로 실행하기 위해 JavaScript에서는 콜백 함수를 사용해요. 콜백 함수는 특정 로직이 끝났을 때 원하는 코드를 실행할 수 있어요. 하지만 콜백에 또 콜백을 계속 호출하게 되면 코드가 복잡해지고 에러도 처리하기 어려워요. 이런 단점은 프로미스를 사용해서 해결할 수 있어요.

토스페이먼츠 결제위젯 SDK에서 프로미스를 사용할 때 다음 세 가지를 주의하세요.

✅ 리다이렉트 파라미터를 설정할 필요가 없어요

결제를 요청하는 requestPayment() 메서드에는 successUrl, failUrl 파라미터가 있는데요. 구매자가 카드사・은행 앱에서 결제 인증을 완료하면 결과에 따라 자동으로 sucessUrl, failUrl로 이동해요. 이걸 리다이렉트 방식이라고 불러요. 하지만 프로미스는 페이지가 이동하면 사용할 수 없어요. 프로미스를 사용할 때는 두 파라미터를 설정하지 마세요.

✅ 프로미스는 PC에서만 사용하세요

토스페이먼츠 결제 연동할 때는 PC 환경에서만 프로미스를 사용할 수 있어요. 모바일 환경에서는 구매자가 카드사・은행 앱으로 이동하기 때문에 프로미스를 받을 수 없어요. 모바일 환경에서는 반드시 리다이렉트 방식을 사용하세요.

✅ iframe을 사용하세요

requestPayment() 메서드에서 windowTarget 파라미터로 결제창이 열리는 프레임을 설정할 수 있어요. 기본값은 iframe 이지만, self도 사용할 수 있어요. self로 파라미터를 설정하면 브라우저가 결제창으로 이동하기 때문에 프로미스를 정상적으로 받을 수 없어요. 프로미스를 사용할 때는 iframe으로 설정하거나, windowTarget파라미터를 안 넘기면 돼요.