[EasyCloset] 💰 이미지 캐싱 구현

NSCache를 통한 메모리 캐시 구현 / 저장 갯수, 용량 제한

배경

• EasyCloset 앱의 이미지 로딩 프로세스
  
  
• 처음엔 단순히 NSCache에 저장만 하는 것으로 구현하였으나 문제점이 떠오름.
• NSCache가 내부적으로 처리를 해준다고는 하지만, 혹시나 캐싱으로 저장되는 이미지가 너무 크거나 저장되는 이미지의 갯수가 너무 많다면,
  앱이 구동되는 런타임에 메모리를 불필요하게 많이 사용하는 상황이 발생하지 않을까? 라는 생각이 떠오름
• 아주 큰 용량의 이미지로 테스트 해본 결과, 앱이 허용하는 메모리 까지는 거의 끝없이 저장하느 것을 확인할 수 있었음

초기 구현 _ 단순히 NSCache에 저장

final class ImageCacheManager {
  static let shared = ImageCacheManager()  
	
  private let cache = NSCache<NSString, UIImage>()
	
  func get(for key: String) -> UIImage? {
    cache.object(forKey: key as NSString)
  }
  
  func store(_ value: UIImage, for key: String) {
    cache.setObject(value, forKey: key as NSString)
  }

NSCache에 대해 좀 더 깊이 학습하며 리팩터링 하기로 결정함

NSCache에 대한 학습

1. Thread Safe한 이유는?

• 내부적으로 NSLock을 사용하여 lock, unlock을 하기 때문에 thread safe 했던 것

open class NSCache<KeyType : AnyObject, ObjectType : AnyObject> : NSObject {
    private let _lock = NSLock()
    ...

2. 내부 구조는 Dictionary + Linked List 구조임

• 캐싱이라는 작업 특성상 데이터를 추가, 삭제하는 작업이 빈번하게 발생하기 때문에 데이터를 밀고 당기기 쉽게 하기 위해 링크드리스트를 활용해서 해당 작업을 빠르게 처리하는 것이 아닐까.라고 생각
• 또한, 만약 링크드 리스트 구조만 사용한다면 탐색에 O(n)이 발생되기에 동시에 딕셔너리 구조를 사용함으로써 key값으로 데이터를 접근할 때 O(1)으로 빠르게 탐색하게 하는 것이라고 생각

open class NSCache<KeyType : AnyObject, ObjectType : AnyObject> : NSObject {
    private var _entries = Dictionary<NSCacheKey, NSCacheEntry<KeyType, ObjectType>>()
...
private class NSCacheEntry<KeyType : AnyObject, ObjectType : AnyObject> {
    var key: KeyType
    var value: ObjectType
    var cost: Int
    var prevByCost: NSCacheEntry?
    var nextByCost: NSCacheEntry?
...

3. 딕셔너리와 다르게 키 값을 복사하지 않는다?

• 복사하지 않고 참조한다 = 참조 타입만 사용할 수 있다 = AnyObject로 구현해야 한다.
• 그래서 key로 struct 타입인 String, Int 등은 사용하지 못하기에 브릿징을 통해 NSString 등으로 키값을 지정해줘야 했던 것.
• 또하 내부 entry Dictionary의 Key를 Wrapping하는 NSCacheKey라는 클래스가 존재함

open class NSCache<KeyType : AnyObject, ObjectType : AnyObject> : NSObject {

open func setObject(_ obj: ObjectType, forKey key: KeyType, cost g: Int) {
    let g = max(g, 0) // costLimit을 지정하지 않으면 기본은 0임.
    let keyRef = NSCacheKey(key)

fileprivate class NSCacheKey: NSObject {
    var value: AnyObject
    init(_ value: AnyObject) {
        self.value = value
        super.init()
    }

4. 캐싱이 삭제되는 것에 대한 체크

• NSCacheDelegate 의 willEvictObject를 구현함으로서 캐시 데이터가 삭제되는 것을 확인할 수 있음

extension ImageCacheManager: NSCacheDelegate {
  func cache(_ cache: NSCache<AnyObject, AnyObject>, willEvictObject obj: Any) {
    print("\(obj as? UIImage) 정보가 캐시에서 지워진다.")
  }
}

5. countLimit, totalCostLimit

• countLimit으로 저장 갯수의 제한을 줄 수 있고,totalCostLimit으로 저장의 비용의 가중치를 부여해 특정 비용만큼 저장될 수 있게 할 수 있음.
• 주의해야 할 점은, 해당 수치들로 줄 수 있는 제약은 imprecise/not strict 정확하지 않을 수 있다라고 명시되어 있고,
• 또한 저장 시 cost를 지정 해 주지 않으면 totalCostLimit를 지정했더라도 기본 cost는 0이기 때문에 적용되지 않는 문제가 있을 수 있음.

open class NSCache<KeyType : AnyObject, ObjectType : AnyObject> : NSObject {
  private var _totalCost = 0
  open var totalCostLimit: Int = 0 // limits are imprecise/not strict
  open var countLimit: Int = 0 // limits are imprecise/not strict

  open func setObject(_ obj: ObjectType, forKey key: KeyType) {
    setObject(obj, forKey: key, cost: 0)
  }
  
  open func setObject(_ obj: ObjectType, forKey key: KeyType, cost g: Int) {
    let g = max(g, 0)
...

최종 구현

• countLimit 캐싱 갯수 제한을 주었음
• totalCostLimit를 지정하고, 저장 시 각 이미지의 바이트 용량에 따라 차등적인 CostLimit을 줌으로서, 용량 제한을 간접적으로 줄 수 있음.

final class ImageCacheManager {
  private let cache = NSCache<NSString, UIImage>()
  
  // 총 100개 까지만 캐싱함
  var countLimit = 100 {
    didSet { cache.countLimit = countLimit }
  }
  // 메모리 캐싱 시의 용량 제약 (기본값: 200메가바이트)
  var byteLimit: Int = Constants.initialByteLimit {
    didSet { cache.totalCostLimit = byteLimit }
  }
  var megaByteLimit: Int {
    get { byteLimit / Constants.megaByteUnit }
    set { byteLimit = newValue * Constants.megaByteUnit }
  }
  
  func get(for id: UUID) -> UIImage? {
    cache.object(forKey: id.uuidString as NSString)
  }
  
  func store(_ value: UIImage, for id: UUID) {
    let bytesOfImage = value.pngData()?.count ?? 0
    cache.setObject(value, forKey: id.uuidString as NSString, cost: bytesOfImage)
  }
...