async/await로 API 호출 최적화하기

chanju Jeon
원티드랩 기술 블로그
3 min readFeb 7, 2022

원티드 iOS 앱 홈 화면은 기존에 피드 API 하나를 사용해서 모든 데이터를 가져오다가 요구사항이 많아지면서 별도의 API들이 추가되었습니다. 따라서, 기존의 피드 API를 호출하고 추가된 별도 API를 호출해서 화면에 표시할 데이터를 가져오고 비동기 처리로 화면을 새로 고치고 있어서 섹션이 늦게 뜨는 현상도 있었습니다.

기존의 API를 비동기로

원티드 iOS 앱은 Clean Swift 아키텍처를 사용 중이고, 홈 화면에서는 RxSwift를 사용하고 있지 않아서 기존 코드를 최소한으로 수정하면서 비동기 처리할 수 있도록 async/await를 적용했습니다.

completion handler를 사용하는 기존 fetchFeed 함수를 비동기 처리하기 위해 withCheckedThrowingContinuation함수로 래핑했습니다.

await 잘못된 사용 예

기존의 API 호출 코드를 async로 변경하고 처음에는 아래와 같이 코드를 작성했습니다. 여러 API 호출 코드를 실행하고 하나의 모델로 반환하도록 구현했고 정상적으로 동작했습니다.

하지만, 위 코드는 실제로는 순서대로 하나씩 실행되며 따라서 동시성을 전혀 활용하지 못하게 됩니다. (Special Thanks to. @WeirdSwift)

async 함수를 병렬로 실행하여 동시성을 제대로 활용하려면 위와 같이 변경하면 됩니다.

얼마나 성능이 좋아졌나

아직 작업을 100% 완료해서 PR을 올린 건 아니지만, 80% 정도 적용해서 이전 코드와 비교했을 때 50% 정도로 응답속도가 줄었습니다. 추가로, 섹션이 늦게 뜨는 현상을 없애고 비효율적인 화면 새고고침을 줄일 수 있었습니다.

🅲𝚑𝚊𝚗𝚓𝚞 on Twitter: “callback으로 중첩되어 있던 API 구조를 async/await 사용해서 비동기 처리되도록 수정했다. 2.424s 걸리던 화면이 1.175s 걸리는 결과가 나왔다. 😎” / Twitter

--

--

chanju Jeon
원티드랩 기술 블로그

one of computer programmers. write is code, think ux design. interested in #SNS #UX #Mobile #Startup