외주 업체와의 협업: API 호출 문제 해결기

제가 입사하기 전, 우리 회사는 외주 업체를 통해 앱을 개발했습니다. 입사 후, 저는 앱에 푸시 기능을 구현해야 했는데, 외주 업체가 제공한 API를 사용해야 했습니다. 문제는 그들이 제공한 예제 코드가 JavaScript 함수였고, 우리의 클라이언트 프레임워크는 React라는 점이었습니다.

처음에는 당황하지 않고 시도해봤습니다.

 

const returnValue = (response: any) => {
  console.log('response: ', response);
};

// API 호출 시도

하지만, ReferenceError: returnValue is not defined라는 오류가 발생했습니다. 약 2시간 동안 여러 가지 방법을 시도했지만 해결되지 않았습니다. 결국, 그냥 JavaScript 코드로 구현하는 방법을 생각하게 되었습니다.

다행히 React에서는 Script 태그를 사용하여 JavaScript 함수를 정의할 수 있었습니다.

<Script 
  id='test'
  dangerouslySetInnerHTML={{
    __html: `
      function returnValue(response) {
        console.log('response: ', response);
      }
    `
  }}>
</Script>

 

이제 API 호출을 다시 시도해보니 정상적으로 작동했습니다! 로직을 구현하고 테스트해보니 모든 것이 잘 작동했습니다.

이 경험을 통해 앞으로 외부 API를 호출할 때 두 가지를 배웠습니다.

1. 문서를 꼼꼼히 살펴보자. 개발자들은 자신들의 API를 잘 활용해주길 바라며, 친절한 문서를 제공합니다. 문서를 꼼꼼히 읽으면 많은 문제를 사전에 방지할 수 있습니다.
2. 다양한 관점에서 생각하자. React 내부에서만 문제를 해결하려고 했다면 풀지 못했을 것입니다. 다양한 관점에서 문제를 바라보고 해결하려는 자세가 중요합니다. 이를 위해서는 경험과 자신감이 필요합니다.

오늘도 극복!