Firebase Storage 에 asnyc/await 를 사용해서 다중이미지 처리하기

Firebase를 사용한 다이어리 앱 만들기 프로젝트의 "다중이미지 업로드" 기능을 구현하는 과정에서

다이어리 게시물의 다중이미지를 fetch (불러오기) 하는 메소드를 async/await 으로 구현해보았다.

 

먼저 다중이미지 기능을 구현하기 위해 Firebase Storage 저장소를 사용하였고, DB는 Firebase firestore를 사용하였다.

내가 다중이미지 처리를 위해 처음에 구현했던 fetchImage 메소드이다.

func fetchAllImage(_ magazine: Magazines) {
        // 비동기 작업 1
        let _ = storage.reference().child("\(magazine.id)").listAll { result, error in
            
            if let result = result {
                result.items.forEach { item in
                    // 비동기 작업 2
                    item.getData(maxSize: 20 * 1024 * 1024) { data, error in
                        if let error = error {
                            print("error while downloading image\n\(error.localizedDescription)")
                            return
                        } else {
                            let image = UIImage(data: data!)
                            self.imgArr.append(image!)
                            return
                        }
                    }
                }
            }          
        }
    }

 

위의 코드를 보면 먼저 fetchImages라는 메소드안에서는 총 2가지 비동기 처리가 일어날것이다.

• 첫번째는 firestore 에서 path를 설정하여 해당 path 에 있는 모든 이미지들을 listAll 메소드를 사용하여 가져오는 것이고
• 두번째는 가져온 데이터들을 getData(maxSize: ..) 메소드를 사용해서 우리가 사용할수 있는 이미지 형태의 데이터를 받는 작업이다

 

처음 사용했던 listAll 메소드는 이렇게 completion이라는 @escaping 클로져를 매개변수로 받고 있는 형태이다.

또 처음 사용했던 getData 메소드도 마찬가지로 @escaping 클로져를 매개변수로 받고 있는 형태이다. 

 

그런데 이렇게 코드를 작성하면 생기는 문제점은

1. 처음에 내가 의도했던 것은 위의 메소드에서 getData를 통해 가져온 이미지 데이터들을 메소드 내에 있는 배열에 담아서 “리턴” 해주는 것이었는데 클로져 내에서는 외부 변수에 접근을 할 수가 없어, array 안에 데이터를 담아 리턴할 수 없는 문제점
2. 위의 코드를 보면 result.items.forEach 부분에서 반복문을 도는데, getData의 클로져안에서 이미지 데이터 한개가 배열에 저장될때 바로 클로져가 return 되어 이 메소드가 끝나버리기 때문에 이미지 여러개를 가져올 수 없어 다중이미지 처리가 불가능하다는 문제점

그래서 completion 클로져를 사용한 비동기 처리방식이 아닌 async/await 을 사용한 비동기 처리방식을 사용해보아야겠다라고 생각했다.

 

 

그렇다면 어떻게 fetchAllImage 메소드안에 모든 비동기 작업을 async/await 으로 바꿔서 처리해야할까?

 

일단 처리해야할 비동기작업중 첫번째는 listAll 메소드이다.

 

알고보니 listAll 메소드에도 종류가 있었는데!

내가 처음 사용했었던 listAll 메소드는 await 을 리턴하는 메소드가 아닌 completion 클로져를 가지고 있는 형태였다. 그렇다면 이런 형태가 아니라 await을 리턴하는 무언가가 있을것이다…! 라는 느낌적인 느낌

 

그렇다! listAll 메소드가

 

이렇게 listAll 메소드의 async/await 버전이 존재하고 있었따…!

기존의 listAll을 래핑해서 await으로 리턴하는 모양새..ㅎㅎㅎ

 

흠. . 그렇다면 getData는 어떻게 처리해줄 것인가..!

아까 listAll 메소드처럼 형태만 다른 같은 메소드가 존재하지 않을까 ? 해서 getData의 다른 형태들이 있는지 찾아보았지만 없었다.. !

 

그렇게 삽질 시작 …

열시미 구글링 하던중 수상한 무언가를 발견..!

 

 

바로 data 라는 메소드이다.

 

이 메소드를 보면 스토리지레퍼런스에 있는 객체들을 비동기식으로 다운로드 하는 메소드이다. 위에서 쓰인 getData와 비슷한 메소드지만 data 메소드는 async/await을 사용할 수 있도록 만들어진 메소드였다.

 

 

자 이제 해결방법을 찾았으니 코드에 적용해보면 이러하다! 

 

 func fetchImages(_ diary: Diary) async -> [UIImage] {
        var diaryImage: [UIImage] = []

        do {
            let result = try await storage.reference().child("\(diary.id)").listAll()
            for item in result.items {
                let data = try await item.data(maxSize: 20 * 1024 * 1024)
                let image = UIImage(data: data)
                diaryImage.append(image!)
            }
        } catch {
            print("error")
        }
        
        return diaryImage
    }

 

해결완료~😆