<div id="readability-page-1" class="page"><div><div>Subscribe to my newsletter and never miss my upcoming articles</div><div id="post-content-wrapper">원티드 iOS 앱 홈 화면은 기존에 피드 API 하나를 사용해서 모든 데이터를 가져오다가 요구사항이 많아지면서 별도의 API들이 추가되었다. 따라서, 기존의 피드 API를 호출하고 추가된 별도 API를 호출해서 화면에 표시할 데이터를 가져오고 비동기 처리로 화면을 새로 고치고 있어서 섹션이 늦게 뜨는 현상도 있었다.
<h2 id="heading-api">기존의 API를 비동기로</h2>
원티드 iOS 앱은 <a target="_blank" href="https://clean-swift.com/">Clean Swift</a> 아키텍처를 사용 중이고, 홈 화면에서는 RxSwift를 사용하고 있지 않아서 기존 코드를 최소한으로 수정하면서 비동기 처리할 수 있도록 async/await를 적용했다.
<pre><code>func loadFeed() async throws -&gt; Feed.Entries {
 try await withCheckedThrowingContinuation { continuation in
 fetchFeed { result in
 continuation.resume(with: result)
 }
 }
}
</code></pre>
<blockquote>
completion handler를 사용하는 기존 fetchFeed 함수를 비동기 처리하기 위해 <a target="_blank" href="https://developer.apple.com/documentation/swift/3814989-withcheckedthrowingcontinuation">withCheckedThrowingContinuation</a>함수로 래핑했다.
</blockquote>
<h2 id="heading-await">await 잘못된 사용 예</h2>
기존의 API 호출 코드를 <code>async</code>로 변경하고 처음에는 아래와 같이 코드를 작성했다. 여러 API 호출 코드를 실행하고 하나의 모델로 반환하도록 구현했고 정상적으로 동작했다.
<pre><code>func loadFeedEntries() async throws -&gt; Feed.Entries {
 let feed = try await loadFeed()
 let banners = try await loadBanner()
 let articles = try await loadArticles()
 let status = try await loadRegularPayment()
 let watching = try await loadWantedPlusWatching()

 return Feed.Entries(
 ...
 banners: banners,
 articles: articles,
 status: status,
 watching: watching,
 ...
 )
}
</code></pre>
하지만, 위 코드는 실제로는 순서대로 하나씩 실행되며 따라서 동시성을 전혀 활용하지 못하게 된다. (Special Thanks to. <a href="https://hashnode.com/@WeirdSwift" target="_blank" rel="noopener noreferrer">@WeirdSwift</a>)
<pre><code>func loadFeedEntries() async throws -&gt; Feed.Entries {
 async let feed = loadFeed()
 async let banners = loadBanner()
 async let articles = loadArticles()
 async let status = loadRegularPayment()
 async let watching = loadWantedPlusWatching()

 return try await Feed.Entries(
 ...
 banners: banners,
 articles: articles,
 status: status,
 watching: watching,
 ...
 )
}
</code></pre>
<code>async</code> 함수를 병렬로 실행하여 동시성을 제대로 활용하려면 위와 같이 변경하면 된다.
<h2 id="heading-7ja866ei64kyioyeseukpeydtcdsoovslytsoyzrgpg">얼마나 성능이 좋아졌나</h2>
아직 작업을 100% 완료해서 PR을 올린 건 아니지만, 80% 정도 적용해서 이전 코드와 비교했을 때 50% 정도로 응답속도가 줄었다. 추가로, 섹션이 늦게 뜨는 현상을 없애고 비효율적인 화면 새로고침을 줄일 수 있었다.

<h2 id="heading-7lc46rog7j6q66om">참고자료</h2>
<ul>
<li><a target="_blank" href="https://www.swiftbysundell.com/articles/swift-concurrency-multiple-tasks-in-parallel">Using Swift’s concurrency system to run multiple tasks in parallel</a></li>
<li><a target="_blank" href="https://www.avanderlee.com/swift/async-await">Async await in Swift explained with code examples</a></li>
<li><a target="_blank" href="https://zeddios.tistory.com/1230">[Swift Concurrency] Async/await</a></li>
<li><a target="_blank" href="https://eunjin3786.tistory.com/459">[Swift] Concurrency</a></li>
</ul>
</div></div></div>

From The Inside

chanju Jeon

원티드 iOS 앱 홈 화면은 기존에 피드 API 하나를 사용해서 모든 데이터를 가져오다가 요구사항이 많아지면서 별도의 API들이 추가되었다. 따라서, 기존의 피드 API를 호출하고 추가된 별도 API를 호출해서 화면에 표시할 데이터를 가져오고 비동기 처리로 화면을 새로 고치고 있어서 섹션이 늦게 뜨는 현상도 있었다.
기존의 API를 비동기로
원티드 iOS 앱은 Clean Swift 아키텍처를 사용 중이고, 홈 화면에서는 RxSwift를 사용하고 있지 않아서 기존 코드를 최소한으로 수정하면서 비동기 처리할 수 있도록 async/await를 적용했다.
func loadFeed() async throws -> Feed.Entries {
    try await withCheckedThrowingContinuation { continuation in
        fetchFeed { result in
            continuation.resume(with: result)
        }
    }
}
completion handler를 사용하는 기존 fetchFeed 함수를 비동기 처리하기 위해 withCheckedThrowingContinuation함수로 래핑했다.
await 잘못된 사용 예
기존의 API 호출 코드를 async로 변경하고 처음에는 아래와 같이 코드를 작성했다. 여러 API 호출 코드를 실행하고 하나의 모델로 반환하도록 구현했고 정상적으로 동작했다.
func loadFeedEntries() async throws -> Feed.Entries {
    let feed = try await loadFeed()
    let banners = try await loadBanner()
    let articles = try await loadArticles()
    let status = try await loadRegularPayment()
    let watching = try await loadWantedPlusWatching()
    return Feed.Entries(
        ...
        banners: banners,
        articles: articles,
        status: status,
        watching: watching,
        ...
    )
}
하지만, 위 코드는 실제로는 순서대로 하나씩 실행되며 따라서 동시성을 전혀 활용하지 못하게 된다. (Special Thanks to. @WeirdSwift)
func loadFeedEntries() async throws -> Feed.Entries {
    async let feed = loadFeed()
    async let banners = loadBanner()
    async let articles = loadArticles()
    async let status = loadRegularPayment()
    async let watching = loadWantedPlusWatching()
    return try await Feed.Entries(
        ...
        banners: banners,
        articles: articles,
        status: status,
        watching: watching,
        ...
    )
}
async 함수를 병렬로 실행하여 동시성을 제대로 활용하려면 위와 같이 변경하면 된다.
얼마나 성능이 좋아졌나
아직 작업을 100% 완료해서 PR을 올린 건 아니지만, 80% 정도 적용해서 이전 코드와 비교했을 때 50% 정도로 응답속도가 줄었다. 추가로, 섹션이 늦게 뜨는 현상을 없애고 비효율적인 화면 새로고침을 줄일 수 있었다.
https://twitter.com/agiletalk/status/1487117712719441930?s=20&t=_alFx4UyIRUwIOEf-EyB9w
참고자료
Using Swift’s concurrency system to run multiple tasks in parallel
Async await in Swift explained with code examples
[Swift Concurrency] Async/await
[Swift] Concurrency

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

댓글