📩 통신 응답으로 온 데이터를 UI에 반영하는 방법 고민글

☠️ 내 코드의 문제점

⬇️firestore의 CRUD를 관리하는 객체, ProjectFirestoreManager의 통신을 통해 Status에 해당하는 Project 를 읽어오는 메서드

// ProjectFirestoreManager
 func read(of group: Status, completion: @escaping (Result<[[String : Any]], FirestoreError>) -> Void) {
            self.db.collection(FirestorePath.collection).whereField("status", isEqualTo: group.rawValue)
                .getDocuments() { (querySnapshot, err) in
                    if let err = err {
                        print("Error getting documents: \(err)")
                        completion(.failure(.doucmentNotExist))
                    } else {
                        var datas: [[String: Any]] = []
                        for document in querySnapshot!.documents {
                            print("\(document.documentID) => \(document.data())")
                            datas.append(document.data())
                        }
                        completion(.success(datas))
                    }
            }
    }

⬇️ 앱의 핵심 비지니스로직을 처리하는 ProjectManager객체
status에 해당하는 [Project]를 읽어서 리턴하는 메서드
(데이터소스 객체만 바꿔치기해도 기존 코어데이터매니저와 인터페이스를 동일하게 가져가고 싶었다. 이것이 문제의 시작...)

// ProjectManager
func readProject(of status: Status) -> [Project]? {
        var returnProjects: [Project]?
        // 통신 코드는 비동기다.
            projectDataManager.read(of: status) { result in
                switch result {
                case .success(let dicts):
                    let projects = dicts.compactMap { dict in
                        return Project(identifier: dict["identifier"] as? String,
                                              title: dict["title"] as? String,
                                              deadline: dict["deadline"] as? Date,
                                              description: dict["description"] as? String,
                                              status: dict["status"] as? Status)
                    }
                    returnProjects = projects
                case .failure(let error):
                    print(error.localizedDescription)
                    returnProjects = nil
                }
            }
        // 🤷🏻‍♀️ 응답이 오기전에 리턴됨. 그래서 항상 nil 반환
        return returnProjects
    }

통신이 도착하기전에 리턴해서 항상 nil을 내보낸다.

// 뷰컨트롤러에서 데이터를 읽어서 반영하는 부분
 func applySnapshotToCell() {
        // 항상 nil이 들어온다.
        let projects = delegate?.readProject(of: projectStatus)
        
        var snapShot = NSDiffableDataSourceSnapshot<Section, Project>()
        snapShot.appendSections([.main])
        snapShot.appendItems(projectsToApply ?? [], toSection: .main)
        
        self.dataSource.apply(snapShot, animatingDifferences: true, completion: nil)
    }

그래서 뷰컨에서는 항상 nil을 받는다.

UI업데이트 코드도 리턴하면 안됨

통신+UI가 하나의 태스크로 묶여야함

(이말은 모델이랑 뷰가 종속성이 생길 수 밖에 없다)

🚀 해결 방법

1️⃣ 뷰 컨트롤러의 read 메서드에서 매개변수로 completion을 받아서 넘겨주는 방법. completion 에는 뷰를 업데이트 시키는 코드가 들어감

• 로컬의 경우 comlpetion이 필요 없음
• 데이터가 쓰이는 곳에서 적절한 처리를 할 수 있어서 자율성이 높음
• 단점
  • 컨트롤러에 모델의 로직이 첨가 되서 역할분리가 어려움,,
  • 만약 받은 데이터가 컨트롤러의 여기저기서 사용된다면?
  • 데이터 수신에 따른 후속 작업의 타이밍을 핸들링해야함 (타이밍 맞추기 어렵)

2️⃣ ProjectManager 델리게이트로 처리하는 방법 ✅

• 데이터를 받는 인터페이스를 request로 새로 만들고,
• 받은 데이터를 처리하는 메서드를 델리게이트로 처리.

3️⃣ 통신이 도착하면 뷰컨으로 노티를 날리는 방법 🙅‍♀️

• 일단 nil을 내보낸다.
• 노티피케이션 센터 사용해서 데이터가 쓰이는 곳에 노티를 날린다.
• 단점
  - 통신 결과에 대한 부분을 하나 하나 챙겨가면서 데이터를 업데이트 해주어야한다.☠️
  - 이렇게 할 경우, 관련 코드에 대한 사이드 이펙트가 생길 수 있다.☠️

  노티피케이션 센터는 안 쓴다.

4️⃣ 비동기 코드를 동기 코드로 바꿈

값을 리턴하기 전까지 리턴하지 못하도록 블락하고 (동기 흐름)
프로젝트를 읽어서 UI업데이트 하는 코드를 글로벌 큐에 넣고 비동기로 처리
(UI만 메인큐에서 비동기로 처리하도록)

• DispatchQueue.global().async → 실패 ❌ (비동기를 비동기에 넣는 꼴)

func readProject(of status: Status) -> [Project]? {
        var returnProjects: [Project]?
        DispatchQueue.global().sync {
           // 비동기 메서드는 백그라운드큐로 일을 보내는게 할 일의 전부 이므로, 
           // 글로벌 싱크로 처리해주어도 리턴해버린다
            projectDataManager.read(of: status) { result in
                switch result {
                case .success(let dicts):
                    let projects = dicts.compactMap { dict in
                        return Project(identifier: dict["identifier"] as? String,
                                              title: dict["title"] as? String,
                                              deadline: dict["deadline"] as? Date,
                                              description: dict["description"] as? String,
                                              status: dict["status"] as? Status)
                    }
                    returnProjects = projects
                case .failure(let error):
                    // TODO: - 오프라인시 캐시 사용하도록 핸들링
                    print(error.localizedDescription)
                    returnProjects = nil
                }
            }
        }
        return returnProjects
    }

• DispatchGroup을 활용하는 방법 : 스레드를 막아서 동기로 처리하는 방법

func readProject(of status: Status) -> [Project]? {
        var returnProjects: [Project]?
        let dispatchGroup = DispatchGroup()
        dispatchGroup.enter()
            cloudDataManager.read(of: status) { result in
                switch result {
                case .success(let dicts):
                    let projects = dicts.compactMap { dict in
                        return Project(identifier: dict["identifier"] as? String,
                                              title: dict["title"] as? String,
                                              deadline: dict["deadline"] as? Date,
                                              description: dict["description"] as? String,
                                              status: dict["status"] as? Status)
                    }
                    returnProjects = projects
                    dispatchGroup.leave()
                case .failure(let error):
                    // TODO: - 오프라인시 캐시 사용하도록 핸들링
                    print(error.localizedDescription)
                    returnProjects = nil
                    dispatchGroup.leave()
                }
            }
         // ⛔️ readProject를 호출하는 스레드가 응답이 오기전까지 막힘
        // 스레드를 막는 건 좋은 방향은 아님
        dispatchGroup.wait()
        return returnProjects
    }

위 방법은 정~말 방법이 없을 때 하자.

😶 느낀점

💡 뒷북 UI 업데이트는 항상, 언제나 있다고 생각하면 될 듯.

익숙해지자😃

비동기의 결과값을 핸들링해야하는 함수 같은 경우는 어떻게 현명하게 처리하는 것이 좋을까?

컨트롤러가 모델을 보유해야하긴 하지만,
데이터 변화에 따라 일괄적으로 관련 데이터, 뷰 업데이트하는게 낫겠다.

내 생각에 베스트는
모델의 흐름은 일관적이면 좋겠다.
즉, 연관된 모델은 일방적으로 다 같이 변화하도록.
그리고 모델이 변화하면 자동으로 뷰가 업데이트 될 수 있도록. 모델에 observer를 등록!

이 패턴이 MVVM, 클린아키텍쳐일까?