1020 새싹 74회차 정리 - MVVM API 통신

iOS 앱 개발자 데뷔 과정 74회차

 

 

 

 

#1. MVVM

74회차의 코드는 MVVM 입문을 위해, 간단하게 CObservable 클래스를 만들어 사용했다.

주의 !! bind 코드는 꼭 dataSource 초기화 코드보다 아래에 작성되어야 한다.

 

 

---

 

- NewsViewController

MVVM의 기본적인 흐름을 이해하기 위해 간단한 기능을 두 가지 구현했다.

두 기능은 편의상 한 뷰에 구현했을 뿐, 전혀 연관이 없다.

 

 

첫번째로는, textField에 숫자를 입력하면 3자리마다 자동으로 콤마가 찍히는 기능이다.

textField의 addTarget 이벤트를 editingChanged으로 설정해, text가 변경될 때마다 numberTextFieldChanged 를 호출한다.

그리고 viewModel에 pageNumber를 선언/초기화 후, pageNumber가 변경되면 textField의 text도 변경하도록 bind 한다.

 

이제 numberTextFieldChanged 가 실행되면 viewModel의 changePageNumberFormat 로직에 따라 pageNumber 의 값도 변경될 것이고, pageNumber가 변경되면 textField의 text도 변경되어 사용자에게 아래와 같은 결과를 보여줄 수 있다.

주의 : 콤마가 들어간 순간부터 text 의 Int 변환이 실패하기 때문에 replacingOccurrences 를 활용해 콤마를 제거하는 코드가 필요하다.

 

두번째로는, News 라는 Model을 활용해 데이터를 보여주고, reset/load 버튼으로 보여줄 데이터를 재설정 하는 기능이다.

보여주고자 하는 데이터를 담을 변수를 sample 이라는 이름으로 선언하고, 초기값을 넣어줘서 실행시 모든 데이터가 보이도록 했다.

그 후로는 어려울 것 없이, sample의 값에 변화가 있을 때마다 snapshot을 업데이트 하도록 bind 하면 된다.

view에 갱신이 필요 할 때마다 snapshot 이나 reload 등의 작업을 해주는 것이 귀찮았는데 정말 편하다...!

 

ViewModel

 

Model

 

ViewController

 

ViewController + Extension

 

 

---

 

- DiffableViewController (feat. UnsplashAPI)

이번에는 73회차에서 구현했던 DiffableViewController를 조금 수정해서, MVVM 형식으로 API 통신을 했다.

searchBar에 검색어를 입력하고 검색 버튼을 누르면 VC는 viewModel 에게 작업을 맡긴다.

그리고 viewModel도 APIService에게 또 넘기고, 최종적으로는 APIService가 통신을 진행하게 된다.

 

 

 

 

여기서 주의해야 할 점은, 커스텀 셀이 아닌 UIListContentConfiguration 를 이용해 collectionView 를 구성했을 경우 그렇게 유용하게 사용했던 Kingfisher 를 사용하지 못하게 된다.

kf는 imageView 에 이미지를 초기화 하도록 동작하기 때문에, content의 image 자체는 변경할 수 없다.

 

따라서 DispatchQueue.global().async 로 이미지를 비동기로 받아오고, DispatchQueue.main.async 에서 이미지를 초기화 하는 방법을 사용했다.

주의 !! content를 적용시키는 코드 (cell.contentConfiguration = content) 를 DispatchQueue.main.asyne 밖에 작성 할 경우, 이미지를 요청하는 코드가 비동기이기 때문에 뷰가 의도대로 갱신되지 않을 수 있다.

 

 

ViewModel

 

APIService

 

Model

 

ViewController

 

ViewController + Extension