[얼죽아] debounce를 이용한 API 호출 최적화

debounce를 이용한 API 호출 최적화

문제 상황

지도 기반 앱을 개발하다 보면 사용자의 지도 스크롤에 따라 해당 위치의 데이터를 실시간으로 가져와야 하는 상황이 자주 발생합니다. 하지만 사용자가 지도를 드래그하는 동안 매 좌표 변화마다 API를 호출하면 두 가지 심각한 문제가 발생합니다.

1. 과도한 서버 비용: 불필요하게 많은 API 호출은 서버 비용 증가로 이어집니다.
2. 성능 저하: 연속적인 네트워크 요청은 앱의 성능을 저하시키고 배터리 소모를 증가시킵니다.

해결 방법: Debounce

이 문제를 해결하기 위해 RxSwift의 debounce 연산자를 활용했습니다.

input.coordinate
  .debounce(.milliseconds(600), scheduler: MainScheduler.instance)
  .flatMapLatest { [weak self] location in
    self?.fetchStores(location: location) ?? .empty()
  }
  .bind(to: storesRelay)
  .disposed(by: disposeBag)

동작 방식

1. 사용자가 지도를 스크롤할 때마다 coordinate 값이 변경됩니다.
2. debounce(.milliseconds(600))는 마지막 좌표 변경 후 600밀리초 (0.6초) 동안 새로운 변경이 없을 때만 API를 호출합니다.
3. 스크롤 중간의 모든 좌표 변경은 무시되고, 사용자가 스크롤을 멈춘 최종 위치에서만 API가 호출됩니다.

출처: RxMarbles

최적화 효과

• Debounce 적용 전: 초당 10 ~ 20회 API 호출
• Debounce 적용 후: 스크롤이 끝난 후 1회만 API 호출

이는 다음과 같은 이점을 제공합니다:

• 서버 비용 대폭 감소
• 네트워크 부하 최소화
• 앱 성능 향상
• 부드러운 사용자 경험

구현시 고려사항

1. Debounce 시간 설정

   • 너무 짧으면 최적화 효과가 감소
   • 너무 길면 사용자 경험이 저하
   • 600ms가 적당하다고 생각했지만, 더 나은 숫자가 있을 수 있음

2. 메모리 관리

   • weak self 사용으로 메모리 누수 방지
   • disposeBag을 통한 리소스 정리