[swift] RxCocoa를 이용한 앱의 백엔드 연동 방법

17 Nov 2023

swift

앱 개발에서 백엔드 서버와의 효율적인 통신은 매우 중요합니다. RxCocoa를 이용하면 RxSwift와 함께 Reactive Programming을 사용하여 앱의 백엔드와의 연동을 간단하게 구현할 수 있습니다. 이번 포스트에서는 RxCocoa를 사용하여 앱의 백엔드와 통신하는 방법을 알아보겠습니다.

1. Alamofire와의 통신

가장 많이 사용되는 HTTP 통신 라이브러리 중 하나인 Alamofire를 이용하여 백엔드와 통신합니다. RxCocoa와 함께 사용하기 위해 RxAlamofire 패키지를 설치하겠습니다.

pod 'RxAlamofire'

GET 요청

먼저, GET 요청을 통해 백엔드로부터 데이터를 받아오는 예제를 살펴보겠습니다.

import RxSwift
import RxCocoa
import RxAlamofire
import Alamofire

func fetchDataFromBackend() -> Observable<Data> {
    let url = "https://example.com/data"
    
    return RxAlamofire.requestData(.get, url)
        .map({ (response, data) -> Data in
            return data
        })
}

위의 코드에서 fetchDataFromBackend 함수는 백엔드로부터 데이터를 받아오는 Observable을 반환합니다. RxAlamofire.requestData를 통해 GET 요청을 보내고, 반환된 응답과 데이터를 매핑하여 Observable로 변환합니다.

POST 요청

POST 요청을 통해 데이터를 백엔드로 보내는 예제를 살펴보겠습니다.

func sendDataToBackend(data: Data) -> Observable<Void> {
    let url = "https://example.com/submit"
    
    return RxAlamofire.request(.post, url, parameters: data)
        .map({ (_) -> Void in
            return
        })
}

위의 코드에서 sendDataToBackend 함수는 데이터를 백엔드로 보내는 Observable을 반환합니다. RxAlamofire.request를 통해 POST 요청을 보내고, 반환된 결과를 Observable로 변환합니다.

2. JSON 파싱

백엔드로부터 받아온 JSON 데이터를 파싱하여 앱 내에서 사용할 수 있도록 하는 것도 중요합니다. 이를 위해 SwiftyJSON 라이브러리와 함께 RxCocoa를 사용할 수 있습니다.

pod 'SwiftyJSON'

import SwiftyJSON

func parseJSON(data: Data) -> Observable<JSON> {
    return Observable.create { observer in
        do {
            let json = try JSON(data: data)
            observer.onNext(json)
            observer.onCompleted()
        } catch let error {
            observer.onError(error)
        }
        return Disposables.create()
    }
}

위의 코드에서 parseJSON 함수는 JSON 데이터를 파싱하여 Observable로 반환합니다. SwiftyJSON을 사용하여 JSON(data: data)로 JSON 객체를 생성하고, onNext로 전달합니다.

3. UI 반응성 적용

RxCocoa를 사용하면 백엔드 요청과 UI 간의 반응성을 쉽게 구현할 수 있습니다. 예를 들어, 앱에서 버튼을 누르면 백엔드와 통신하고 결과를 화면에 표시하는 경우를 살펴보겠습니다.

import RxSwift
import RxCocoa

class ViewController: UIViewController {
    
    let disposeBag = DisposeBag()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let fetchDataButton = UIButton()
        let resultLabel = UILabel()
        
        fetchDataButton.rx.tap
            .flatMapLatest({ (_) -> Observable<Data> in
                return fetchDataFromBackend()
            })
            .flatMapLatest({ (data) -> Observable<JSON> in
                return parseJSON(data: data)
            })
            .observeOn(MainScheduler.instance)
            .subscribe(onNext: { (json) in
                resultLabel.text = json["result"].stringValue
            })
            .disposed(by: disposeBag)
    }
}

위의 코드에서 fetchDataButton은 버튼, resultLabel은 결과를 표시할 레이블입니다. fetchDataButton.rx.tap을 통해 버튼의 tap 이벤트를 Observable로 변환하고, flatMapLatest 연산자를 이용해 순차적으로 백엔드로부터 데이터를 받아오고 JSON을 파싱하여 결과를 화면에 표시합니다.

마무리

RxCocoa를 이용하여 앱의 백엔드와의 효율적인 통신을 구현하는 방법을 알아보았습니다. Alamofire와의 통신, JSON 파싱, UI 반응성 구현 등 다양한 기능을 RxCocoa를 사용하여 간편하게 구현할 수 있습니다. RxCocoa의 다양한 연산자와 기능을 자세히 공부하여 앱 개발에 활용해보세요.