[iOS] Image를 URLSession / Kingfisher를 통해 가져오기

방법들

Data.init(contentsOf url: URL)

기본적으로 네트워크를 통해 이미지를 가져오기 위해 사용했던 첫번째 방식이었다.

그 당시, DispatchQueue를 사용하여 UI는 Main Thread에서 변경했지만, 이미지를 가져오기위한 작업은 저 Data(contentsOf:)를 사용했다.

간단한 코드였으며, CollectionView나 TableView처럼 많은 이미지를 가져온다거나 이미지의 크기가 크지 않기에 앱이 죽지 않고 돌아갔지 싶다.

 

쩃든, 네트워크 통신을 통한 파일/이미지를 받을 때는 해당 방법을 사용하면 안된다.

Important
Don't use this synchronous initializer to request network-based URLs. For network-based URLs, this method can block the current thread for tens of seconds on a slow network, resulting in a poor user experience, and in iOS, may cause your app to be terminated.
Instead, for non-file URLs, consider using the dataTask(with:completionHandler:) method of the URLSession class. See Fetching Website Data into Memory for an example.

첫줄에서도 나와있다시피 이 init은 synchronous하다 -> 동기방식으로 동작한다.

만약, 해당 코드를 Main Thread에서 수행한다면, 응답이 올때까지 Thread는 멈추게된다. (안드에서는 이러한 상황을 ANR이라 했던 것 같은데, iOS에서는 어떻게 부르는지 모르겠다)

따라서 아래에 적혀있는 것처럼 URLSession Class에 있는 dataTask 메소드 사용을 권장한다.

이미지를 다운로드하는 상황에는 downloadTask도 있다.

 

URLSession - downloadTask

• HTTP / HTTPS 를 통해 데이터를 주고받기 위해 API를 제공해주는 클래스

Session 과 Task 등 자세한 이야기는 이후의 포스팅에서 다루겠다.

 

downloadTask

서버로부터 데이터를 다운로드 받아서 파일의 형태로 저장한다.

 

1. URL을 사용하는 방법 -> URL을 알고 있는 상황에서 사용

2. URLRequest를 사용하는 방법-> Query, HTTP메소드, 헤더 등 설정이 필요한 경우 사용

 

//4개의 메소드가 존재
downloadTask(with url: URL) -> URLSessionDownloadTask

downloadTask(with url: URL, completionHandler: @escaping(URL?, URLResponse?, Error?) -> Void)

downloadTask(with request: URLRequest) -> URLSessionDownloadTask

downloadTask(with request: URLRequest, completionHandler: @escaping(URL?, URLResponse?, Error?) -> Void)

 

URLSession.shared.downloadTask(with: imageURL){ url, response, error in
	.........
    
    if let url = url{
    	let image = UIImage(contentsOfFile: url){
        	DisptchQueue.main.async{
            	......
            }
        }
    }
    
    .........
}.resume()

 

위와 같은 코드로 동작시킬 수 있다.

이미지를 계속해서 불러오는 것은 비효율적일 수 있다. 따라서 Cache(캐시)를 사용할 수 있는데

FileManager를 사용하면 캐시를 구현할 수 있다.

 

Kingfisher (https://github.com/onevcat/Kingfisher)

캐시 전략, 코드의 길이, 사용법 등 번거롭고 귀찮음을 해결하기 위해 나온 라이브러리이다.

 

• 비동기 이미지 다운로드 및 캐싱을 위해 사용
• URLSession 기반이기 떄문에, 네크워킹 및 로컬 데이터도 로드 가능
• 유용한 이미지 프로세서 및 필터가 제공됨
• 메모리와 디스크의 계층 하이브리드 캐시
• 성능 향상을 위해 이전에 다운로드한 콘텐츠를 취소 가능, 재사용 가능
• Indicator
• SwiftUI 지원
• GIF 형식 지원

 

//정말 쉬웠다

imgView.kf.setImage(with: imageURL)
//끝...
//비동기로 동작한다

 

오늘 처음 써보며... 오픈소스의 대단함을 새로 느꼈다. 이미지를 불러오는 데에 조금씩 버벅이길래 성능 향상을 위해 Disk에 Cache도 구현하고 CollectionView의 Prefetching도 사용해보았지만 눈에 띄게 향상되진 않았었다.

그런데 KingFisher를 사용하니 눈에 띄게 성능이 향상된 것을 볼 수 있었다. -> 코드를 까보면서 뭐가 다른건지 확인해봐야겠다

 

Processor

이미지를 좀더 유연하게 만들어주는 역할을 한다.

setImage의 매개변수에는 Resource, Placeholder, options, progressBlock, completionHandler 등이 있다.

이중 options에 해당하며 없다면 default를 사용한다고 한다.

 

• cornerRadius
• Resizing
• Blur
• TintColor
• Sampling

등의 기능을 제공하는 프로세서들을 사용할 수 있다.

 

또한, 싱글톤 객체를 이용해서 함수를 만들 수도 있다.

func downloadImage(with url: URL){
	let resource = ImageResource(downloadURL: url)
    
    KingfisherManager.shared.retrieveImage(with: resource){ result in
    	
        switch result{
        case .success(let value):
	        print("Image : \(value.image)")
        case .failure(let error):
        	print(error)
        }
    }
}

 

Cache

KingFisher가 알아서 메모리와 디스크에 캐시를 하고 전략 또한 정해져있는 것으로 알고 있다. -> (각 애플리케이션의 구조에 따라 캐시전략이 다를 수도 있는데, 이건 더 알아봐야겠다)

위에서 precessor를 넣을 수 있었던 options에 .cacheMemoryOnly 를 넣어주면 메모리캐싱만 수행하기된다. -> 메모리에만 캐싱하면 빠르긴하겠지만.... 굳이 좋을까...? 궁금증이 든다

캐시는 메소드를 통해 지울 수 있다.

 

 

이후에 보면 좋은 글 : 1consumption.github.io/posts/about-kingfisher(1)/