[Swift] URL에서 비동기로 이미지 다운로드 및 캐싱하기 - NSCache

참고한 공식 문서 : https://developer.apple.com/documentation/uikit/views_and_controls/table_views/asynchronously_loading_images_into_table_and_collection_views
해석 : 비동기적으로 테이블뷰, 컬렉션뷰의 이미지 로드하기 Asynchronously Loading Images into Table and Collection Views

UICollectionView를 구현하며 셀마다 이미지를 API에서 받아오는 작업을 했다.
스크롤이 될 때마다 같은 이미지를 반복해서 요청해야 하는데, 이 때 API에 여러 번 반복해서 요청을 보내게 되므로 같은 동작을 여러 번 하는 낭비이기도 하고, 최악의 경우 API에서 밴을 당할 수도 있다고 생각했다.
그래서 이미지 캐싱의 방법을 알아보게 되었다.

ImageCacheManager

이미지 다운로드 URL을 통해 이미지를 다운받는 작업을 함

• 클로저로 비동기 처리 : 다운로드가 완료될 때 까지 앱이 멈춰있는 것을 방지
• NSCache를 활용해 이미지 캐싱 : 이미지 요청이 왔을 때 캐시에 없으면 다운로드, 캐시에 있으면 캐싱된 이미지를 리턴
• 같은 이미지에 대한 반복적인 요청 : 딕셔너리를 사용해 URL에 대응되는 이미지를 저장해 두고, 같은 이미지에 대한 여러 요청에 한꺼번에 이미지 리턴

ImageCacheManager

//
//  ImageCache.swift
//  starbuckst
//
//  Created by Bibi on 2022/05/16.
//

import UIKit
import Foundation
public class ImageCacheManager {

    public static let publicCacheManager = ImageCacheManager() // 싱글톤?
    // 사용 시 ImageCache.publicCacheManager.load()와 같이 사용..

    // URL에 대한 이미지를 저장하는 캐시 프로퍼티
    private let cachedImages = NSCache<NSURL, UIImage>()  // key값으로 클래스를 요구하므로 URL대신 NSURL사용

    // 캐시에 이미지가 없는 경우, urlSession을 통해 이미지를 얻어오기 위해 response를 받은 후 결과값을 전달받기 위해 선언한 딕셔너리
    private var loadingResponses = [NSURL: [(ImageItem, UIImage?) -> Swift.Void]]()

// URL을 인수로 받아 캐시된 이미지를 획득하는 메서드
    private final func getCachedImage(url: NSURL) -> UIImage? {
        return cachedImages.object(forKey: url)
    }

// 이미지가 있다면 캐싱된 이미지를 반환하고, 그렇지 않으면 비동기적으로 이미지를 로드 및 캐시합니다.
// image(url:)의 결과로 이미지가 있다면 그 이미지를 completion에 전달, 없으면 URLSession을 통해 받아와서 completion에 전달
    final func loadImage(url: NSURL, imageItem: ImageItem, completion: @escaping (ImageItem, UIImage?) -> Swift.Void) {
        // 해당 이미지가 캐시되어 있다면 찾은 이미지를 반환합니다.
        if let cachedImage = getCachedImage(url: url) {
            DispatchQueue.main.async { // 왜 비동기?
                completion(imageItem, cachedImage)
            }
            return
        }

        if loadingResponses[url] != nil { // 해당 이미지에 대해 둘 이상의 요청이 있는 경우, loadingResponses에 completion 블록을 추가합니다.
            loadingResponses[url]?.append(completion)
            return
        } else { // 해당 이미지에 대해 첫 요청인 경우 loadingResponses에 completion 등록
            loadingResponses[url] = [completion]
        }

        // (URL로부터) 이미지를 받아옵니다.
        // URLSession(.ephimeral) : NSCache를 따로 사용하므로 URLSession의 캐시를 사용하지 않기 위한 설정
        let urlSession = URLSession(configuration: URLSessionConfiguration.ephemeral)
        urlSession.dataTask(with: url as URL) { (data, response, error) in
            // error와 data를 체크하고 이미지 생성을 시도합니다.
            guard let responseData = data,
                  let image = UIImage(data: responseData),
                  let responseBlocks = self.loadingResponses[url],
                  error == nil else { // 넷 중에 하나라도 nil이면 completion으로 nil을 전달하며 리턴
                DispatchQueue.main.async {
                    completion(imageItem, nil)
                }
                return
            }
            // 받아온 이미지를 캐시에 저장합니다.
            self.cachedImages.setObject(image, forKey: url, cost: responseData.count)
            // 해당 이미지의 요청들에 대해 반복해서 이미지를 전달합니다.
            for block in responseBlocks {
                DispatchQueue.main.async {
                    block(imageItem, image)
                }
                return
            }
        }.resume()
    }
}

ImageItem

이미지의 UIImage, URL, id를 가지고 있는 객체

//
//  ImageItem.swift
//  starbuckst
//
//  Created by Bibi on 2022/05/17.
//

import Foundation
import UIKit

class ImageItem { // struct?

    var image: UIImage? = nil // 이미지
    let url: URL // 이미지URL
    let identifier = UUID() // 이미지의 ID

    init(image: UIImage? = nil, url: URL) {
        self.image = image
        self.url = url
    }
}

ViewController

뷰컨에서 사용할 때는 아래와 같이 사용

imageCacheManager.loadImage(url: mainImageURL as NSURL, imageItem: mainImageItem) { (imageItem, image) in
    DispatchQueue.main.async {
       self.mainEventView.image = image
       self.mainEventView.setNeedsDisplay()
    }
}