[ iOS ] URL로 이미지를 받아 올 경우 Data(contentsOf:)를 사용하면 안 되는 이유

공부한 내용을 정리한 글입니다.

 

 

문제

네트워크 기반의 URL 이미지를 받아올 때 Data(contentsOf:)를 사용해도 될까?

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

1. Data(contentsOf:)

NSData(constentsOf:)는 주어진 URL로부터 데이터를 데이터 객체로 초기화하는 작업이다. 따라서 이 메서드를 사용해 URL로부터 이미지를 받아온다면 잘 작동한다. 하지만 해당 메서드의 공식문서에는 네트워크 기반의 URL의 경우 해당 메서드를 사용하지 말라고 명시되어있다.

 

[ iOS ] NSData(contentsOf:)

Important
네트워크 기반의 URL을 요청하기 위해 동기적인 초기화 작업인 init(contentsOf:)를 사용하지 마라. 느린 네트워크 경우 네트워크 기반의 URL에 대해 이 메서드는 수십 초 동안  현재 스레드를 차단(block)할 수 있으며, 이는 사용자 경험을 저하시킨다. 그리고 iOS에서는 앱이 중단될 수도 있다.
대신, 파일이 없는 URL에 대해 URLSession클래스의 dataTask(with:completionHandler:) 메서드를 사용하는 것이 좋다. Fetching Website Data into Memory에서 예시를 볼 수 있다.

 

즉 NSData(constentsOf:)는 동기적인 작업이므로 만약 네트워크가 느릴 경우 main 스레드가 차단되어 사용자와 가장 가까운 UI가 멈춘다는 의미이다. 멈추지 않더라도 이미지가 로드되는 동안은 다른 UI View들이 생성되지 못하므로 사용자 경험(UX)이 좋지 않다. 

그렇다면 DispaychQueue를 사용해 global에서 이미지 로드를 하면 되지 않을까?

 

 

 

 

 

2. DispatchQueue.global(). async

 

    private func confidureImagefromURL(_ url: String) {
        guard let url = URL(string: url) else {return}
        
        DispatchQueue.global().async { [weak self] in
            guard let data = try? Data(contentsOf: url) else {return}
            
            DispatchQueue.main.async {
                self?.contentImage.image = UIImage(data: data)
            }
        }
    }

위 코드처럼 DispatchQueue.global에서 URL로부터 데이터 객체를 생성하고 UI에 해당 이미지를 할당하기 위해 DispatchQueue.main을 사용해보자. 이렇게 구현하면 앱에 이미지가 잘 로드되며, 이미지가 아직 로드되지 않았더라도 다른 UI View들이 잘 생성된다. 하지만 스레드가 차단될 위험은 아직 존재한다. 

 

DispatchQueue를 사용해 main 스레드가 block 되는 걸 방지할 수는 있지만, 어쨌든 제한된 숫자의 GCD의 스레드 중 한 스레드가 중단되어버린 것이다. 만약 그러한 상황에서 개발자가 스레드 풀의 모든 스레드를 사용했다면 GCD는 아무것도 할 수 없는 상태가 되어버린다. 

그럼 네트워크 기반의 URL에서 이미지를 받아오려면 어떻게 해야 할까?

 

 

 

 

 

 

3. URLSession

공식문서에서는 URLSession의 dataTask(with:completionHandler:) 사용을 추천한다.

URLSession을 통해 이미지를 받아오면 Data(contentsOf:)을 통해 받아오는 것과는 다르게, 오류 발생 시 의미 있는 진단을 할 수 있으며 스레드가 block 되는 것을 방지할 수 있다.

 

Apple이 제공하는 Article 중 Fetching Website Data into Memory에서는 아래와 같은 코드를 예시로 보여준다.

func startLoad() {
    let url = URL(string: "https://www.example.com/")!
    let task = URLSession.shared.dataTask(with: url) { data, response, error in
        if let error = error {
            self.handleClientError(error)
            return
        }
        guard let httpResponse = response as? HTTPURLResponse,
            (200...299).contains(httpResponse.statusCode) else {
            self.handleServerError(response)
            return
        }
        if let mimeType = httpResponse.mimeType, mimeType == "text/html",
            let data = data,
            let string = String(data: data, encoding: .utf8) {
            DispatchQueue.main.async {
                self.webView.loadHTMLString(string, baseURL: url)
            }
        }
    }
    task.resume()
}

 

 

 

 

 

 

4. Alamofire

네트워크 연결 시 많이 사용하는 Alamofire는 Apple에서 제공하는 네트워크 API인 URLSession에 기반하여 만들어진 라이브러리이다. 따라서  Alamofire 또한 네트워크 기반 URL로부터 데이터를 받아오는 데 사용할 수 있다.

 

[ iOS ] URL 이미지 받아오기 + Alamofire

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

Never load data from a remote URL with synchronous API Data(contentsOf)

init(contentsOf:)

Fetching Website Data into Memory

GCD