1. 배경 설명

• Codef API는 금융 데이터 및 인증 처리를 위한 API로, 다양한 인증 방식을 지원합니다.
• 인증 처리 과정에서 여러 번의 API 호출과 사용자 간편 인증(카카오톡, 네이버, 패스 등)을 요구하는 복잡한 로직이 필요했습니다.
• 인증 처리를 위해 Codef API와의 연동을 최적화하고, 여러 요청을 효율적으로 관리하는 것이 중요했습니다.

2. 문제점

2.1. 다중 API 요청 처리

• 도전 과제: 한 번의 인증 요청에 대해 다중 API 요청을 처리해야 했고, 여러 API에서 각각 다른 응답을 처리하는 데 어려움이 있었습니다. 특히, 인증 후 추가 인증(2-Way 인증) 요청이 필요할 때 이를 자동으로 처리하는 로직을 구현하는 것이 복잡했습니다.
• 세부 문제:
  • 첫 번째 API 응답을 기반으로 추가 인증이 필요한 경우: 클라이언트에서 첫 번째 트리거를 통해 요청 후, 클라이언트에서 두번째 트리거를 통해 추가 인증 요청을 처리하고 나머지 API 요청을 백그라운드에서 처리해야 했습니다.
  • Promise.any 사용 중의 비동기 처리 문제: 첫 번째 응답을 받아 처리하는 동시에 나머지 요청들이 백그라운드에서 처리되도록 해야 했지만, 비동기 흐름을 다루는 데 있어 어려움이 있었습니다.
  • 백그라운드에서 요청이 완료된 시점을 확인하는 문제: 2차 인증 완료 후 페이지를 이동하면 db에 저장된 데이터를 불러와야하는데, 1차 요청 ⇒ (나머지 API요청 백그라운드 처리) ⇒ 2차요청 ⇒ 페이지 이동 으로 (나머지 API요청 백그라운드 처리) 가 완료되는 시점을 아는것에 어려움이 있었습니다.

3. 해결 과정

3.1. Promise.any로 첫 번째 응답 처리 후 비동기 작업 분리

• 첫 번째로 성공한 응답을 Promise.any로 받아 바로 반환하고, 나머지 요청은 백그라운드에서 비동기적으로 처리하는 구조를 설계했습니다.
• 구현 방법:
  • 첫 번째 요청 응답을 즉시 반환하여 2차 인증 버튼 클릭 시 2차 요청에 사용될 수 있도록 하고, 나머지 요청은 백그라운드에서 처리하였습니다..
  • 이를 통해 인증 프로세스를 더 빠르게 처리할 수 있었고, 전체 요청이 완료될 때까지 기다릴 필요가 없었습니다.

3.2. 2-Way 인증 처리 로직 구축

• 첫 번째 요청에서 **추가 인증(2-Way)**이 필요한 경우, 즉시 이를 처리하고 나머지 작업을 이어서 할 수 있는 비동기 흐름을 설계했습니다.
• 구현 방법:
  • 첫 번째 인증 응답에서 추가 인증 정보가 포함되어 있으면, 해당 정보를 기반으로 2-Way 인증 API를 호출하고, 그 후에 나머지 요청을 처리하는 로직을 추가했습니다.

3.3. pooling을 구현

• 서버액션에 let tasksCompleted = false; 을 선언 후 백그라운드에서 처리가 완료되는 경우 true로 변경하게 해둔 후 클라이언트에서 이를 확인 후 페이지 이동을 처리하였습니다.
• code