[iOS] 비동기+이미지+다운로드 = 💧

API 통신이 비동기적으로 이루어진다고 미워할 필요는 없지만 그렇다고 좋은건 아니다.

사실 이전까지는 callback으로 하던, Combine API를 쓰던 해결을 해왔기 때문에 네트워킹 때문에 힘들었던 기억은 없다.

그런데 일을 하며 여러 장의(한 5~60장 되던데) 사진을 동반한 세션 작업을 하다가 눙물나는 경험을 하고 있다.

이 문제는 아직 해결 된 문제가 아니고, 여전히 진행 중...

문제 상황

(좌) 이미지가 채워지지 못한 상태 (우) 다른 이미지는 채워진 상태

문제 상황이 생기는 과정에 대해 조금 더 설명을 해보자면,

1. 여러 섹션이 각각 이미지를 불러오는 코드를 호출

2. (문제는 여기서 발생했을 것) 이미지가 도착하면 자신이 들어가야할 인스턴스에 이미지를 set 해줌

(아래 그림에서 하나의 보라색 박스 내에 각 상품들이 개별적 인스턴스

-- ex. Brand(imageURL: String, image: UIImage?, brandName: String ) 이런 식으로)

3. 한 섹션에 이미지가 모두 채워지면 소속 된 섹션 type에 맞는 객체를 생성

(아래 그림에서 보라색 박스 하나하나가 서로다른 type

-- ex. Section(type: SectionType, brands: [Brand], title: String) 이런 식으로)

3. 만들어진 instance들을 datasource로 활용해서 전체 tableview 채움

저런 과정 중에 섹션에 빈 이미지가 들어가는 것이다.

1차 원인 파악

몇 가지 생각이 스쳐갔다.

 

1. 제대로 된 URL/URLRequest가 안만들어져서 맞는 이미지를 못가져오나?

→ X. URL이 잘못되었으면 error handling 한 부분에서 잡았을 것

 

2. 이미지가 들어오는 과정에서 loss 가 생겼나?

→ X. Cache 파일을 열어보면 이미지 있음

 

3.. 이미지가 아직 덜 왔는데 3번 과정이 실행되나?

→ X. 호출한 imageURL 개수와 불러온 image의 수가 맞아야 3번을 실행하도록 짜서 이미지는 다 옴. Cache 파일을 열어보면 이미지 있음

 

4. 그냥 Rx로 바꾸는 과정에서 문제가 생겼나....-.,-?

→ Rx 안써도 문제는 똑같음. 다행히(?) Rx 능력 부족 사태 아님

 

... 더 이상 머리로는 파악할 수 없는 지경에 이르렀다.

그래서 콘솔 창에 찍어보기로 했다. 도대체 어느 과정에서 문제가 생기는지.

모든 과정에서 유의미하다고 판단되는 시점에 프린트를 찍어보았다.

(브레이크포인트는 이미지가 너무 많고 도착하는 순서도 중구난방이라 불리는 순서도 다르고 너무 오래 끌면 서버쪽에서 timeout 시켜버려서 프린트로 찍음)

전체 과정을 살펴보면

 

JSON 받아오기 → imageURL들을 다 모아서 → 각 url에 해당하는 이미지를 → 1) 캐시 확인 2) 없으면 다운로드 → 자기가 들어가야할 인스턴스에 UIImage set 해주기 → 한 섹션이 완료되면 Section 인스턴스 만들어주기 → 화면을 구성하는 모든 Section 인스턴스들이 만들어지면 tableview reload data

 

문제는 저 하이라이트 친 과정에서 '화살표' 부분에서 발생하고 있었다.

 

원인

저 부분에서 어떤 문제가 발생하고 있었는지 당시 콘솔 창을 보면,

• Received Image: 받아온 이미지에 대한 정보(해시값)
• Total n items : 현재 Section instance 들의 갯수.

문제가 무엇이냐. 이미지는 필요한 만큼 모두 불러오지만

product.image = image 처럼 set 하는 과정을 처리하고 있는데

"나 이미지 다 불러와가지구~ Section instance 만들었어 tableview야!" 라고 먼저 말해버린 것.

 

임시 해결..?

Refresh를.... 시킨다. 핳. 사실 상 이미지는 다 캐싱되어 있어서 refresh 하면 cache에서 끄집어내면 되므로 모두 제자리에 잘 놓인다.

하지만 Rx로 바꾸면 onCompleted를 내가 지정할 수 있으니 해결할 수 있지 않을까 하는 희망...이 있...다

 

새로운 해결?

개발자 분들이 합류함에 따라 그 분들의 코드를 읽고 있는데, 개별 cell 내에서 Kingfisher로 setImage 해주시더라...