요구사항 확인

• 이미지 메세지를 보낼 때, 읽음 여부와 보낸 시각 Label을 제외한 최대 너비를 가지면서도 각 이미지들의 크기가 동일한 정사각형의 ImageView가 포함된 TableViewCell을 만들어야 한다.
• ImageView에 이미지를 Firebase에서 비동기적으로 불러와서 표기해야 한다.

문제 확인

• 이미지가 비동기적으로 불러와지면 ImageView의 크기가 변경되며 읽음 여부와 보낸 시각 Label이 사라졌다.
• TableView에서 ImageCell이 안보이도록 스크롤을 올렸다가 다시 내리면 ImageView가 기존의 정사각형 크기가 아닌 Image의 높이에 맞춰 ImageView의 높이가 늘어나는 현상이 생겼다.

원인 추론

• ImageView의 크기가 명시적으로 정해져있어야 이미지가 들어갔을 때 ImageView의 크기가 변하지 않는데, 최대 크기이면서 동일한 너비를 가져야 한다는 조건 때문에 명시적으로 정할 수 없었고, 우선 레이아웃이 먼저 잡혀야 너비를 알 수 있었다.
• print문을 찍어가면서 TableViewCell이 재사용되는 과정에서 어떤 함수들이 동작하는지 알 수 있었고, 셀이 재사용되면서 레이아웃 설정들과 imageView의 이미지 높이 간 충돌이 발생함을 알 수 있었다.

해결 방안

• 읽음 여부와 보낸 시각 Label의 크기를 구하고 그 너비에 맞게 Label의 너비를 명시했다. 그래서 레이아웃을 정하는 과정에서 imageView들의 너비를 확정할 수 있었다.

• 셀이 재사용될 때 layoutSubviews() 함수가 동작한다는 것을 알았고, 이 때 이미 정해진 너비를 이용해 높이를 명시할 수 있었다. 그래서 이미지가 비동기적으로 불러와질 때, 셀이 재사용될 때 imageView들의 크기가 변하는 것을 막을 수 있었다.

• 이미지 메세지를 보낼 때, 읽음 여부와 보낸 시각 Label을 제외한 최대 너비를 가지면서도 각 이미지들의 크기가 동일한 정사각형의 ImageView가 포함된 TableViewCell을 만들어야 한다.

• ImageView에 이미지를 Firebase에서 비동기적으로 불러와서 표기해야 한다.