[오픈소스 라이브러리] SDWebImage 사용하기 (feat. Firebase)

GitHub - SDWebImage/SDWebImage: Asynchronous image downloader with cache support as a UIImageView category

 
1. SDWebImage란?

 : URL로 된 외부 이미지를 비동기적으로 처리 및 저장해서 사용 할 수 있도록 도와주는 오픈라이브러리 (상단 깃허브 링크 가이드 참고)
 
 

2. 사용 계기

 : Tinder(틴더) 클론코딩 중, Firebase에 url 형태로 저장된 유저의 사진을 불러와서, mainView에 띄우는 작업이 필요해 SDWebImage를 사용하게 되었다.

*참고 : 비슷한 오픈라이브러리(이미지 캐싱)로 유명한Kingfisher도 있다.
  Kingfisher는 Swift로 만들어졌고, SDWebImage는 Objc로 만들어졌다.
  둘 중 SDWebImage 선택한 이유는 메모리사용량을 줄이기 위해서이다. ( + 클론 코딩 프로젝트에 메모리 큰 사진을 캐싱할 일도, 캐싱된 이미지를 삭제하는 로직을 구현할 일은 없을 것 같기에.. 큰 단점이 없다고 판단했다…)

https://gist.github.com/linearhw/a0677b967b741abf9b8a903c37d3bcc9
  > Kingfisher vs SDWebImage에 대한 깃헙 링크
 
 

3. 사용 방법

  1. podfile에 SDWebImage 추가하기

TinderClone podfile 부분 캡처

  2. SDWebImage를 사용할 객체에 import 하기

 
 
  3. 원하는 string 형태의 URL을 '구조체 형태의 URL'로 바꿔주기

Firebase의 유저 데이터가 담긴 User 구조체를 사용해, viewModel 초기화 하는 코드

       User 구조체는 Firebase-database에 저장된 Dictionary 형식의 유저 데이터들로 초기화 되어있다.
      그 중, .profileImageURL는 Firebase에 저장된 유저의 이미지 url이 담긴, String 타입 인스턴스다.
 

      따라서, 이 String 형태의 url 주소를 하단 코드를 사용하여 '구조체 URL 형태'로 바꿔줘야한다. (하단 코드)

  URL(string: 원하는 이미지의 URL 주소)

 
 
 
  4. SDWebImage를 통해 원하는 UIImageView에 이미지 저장하기

초기화된 viewModel의 URL구조체 형태로 바뀐 imageURL을 sd_setImage를 통해 imageView에저장하기

     1. 이미지를 받아서 담을, UIImageView 타입의 인스턴스 생성하기
     2. 해당 인스턴스에 SDWebImage + 3번 단계에서 만든 '구조체 형태로 바꾼 url' 사용하여 이미지 캐싱하기 (하단 코드)

imageView.sd_setImage(with: 구조체형태URL)

// 3번 과정이 귀찮다면 한번에 합쳐도 됨

imageView.sd_setImage(with: URL(string: 원하는사진의url))

  * 캐싱의 장점 :  같은 이미지 데이터를 받아오기 위해 매번 네트워킹을 해야하는 번거로움 및 낭비를 해소!
 
 

4. 끝 -

 imageView에 저장된 이미지가 잘 뜨는지 확인하기

 

5. 결론

 이전에, url로 된 이미지 데이터 받아오려면... 코드도 길어지고 번거로웠는데 SDWebImage 쓰니까 엄청 편하다.. 맛있다..!