김종권의 iOS 앱 개발 알아가기

dataSource 관리 방법 dataSource를 관리하다보면 보통 UI에서 사용되는 데이터와 비즈니스로직이 들어갈 ViewModel에서 사용되는 dataSource 두 벌을 관리하는 경우가 있는데, 상태 관리를 한곳에서 사용하지 않으면 데이터 정합성 문제가 발생 protocol을 사용하여 dataSource를 관리하면 해결 viewController에서 dataSource에 접근할 때는 protocol에 의존하게끔하면 해결 MVVM 구조 먼저 준비 MVVM구조를 쉽게 구현하기 위해 예제에 사용할 라이브러리 pod 'RxSwift' pod 'RxCocoa' View ViewModel 구현체에 의존하지 않도록, ViewModelable 프로토콜을 생성하고 이것에 의존하도록 구현 UI에 관한 input을 ..

UITableView에서 셀 간 간격 설정 방법 * CustomCell에서 layoutSubviews를 이용하여 설정 방법은 해당 포스팅 글 참고 가장 단순한 방법은 UICollectionView를 사용하여 UITableView처럼 사용 아래에서 볼 것이지만, UITableView는 contentInset 설정도 버그가 있으므로 UICollectionView 사용을 지향 UICollectionView와 UICollectionViewFlowLayout를 사용 let layout = UICollectionViewFlowLayout() layout.minimumLineSpacing = 8.0 // CGSize { .init(width: collectionView.bounds.width - 60, height:..

구현 아이디어 tableView의 커스텀 Cell에 collectionView를 넣어서 구현 tableView의 커스텀 Cell은 collectionView를 가지고 있으므로, 커스텀 Cell에서 컬렉션 뷰에 뿌려줄 dataSource를 가지고 있는 상태 예제코드에서 사용한 프레임워크 코드로 UI 구현 시 편리함을 위해 사용 pod 'SnapKit' pod 'Then' 샘플 Model 정의 tableView와 collectionView에 표출될 샘플 모델 정의 collectionViewCell에 사용될 데이터: Subcategory의 colors tableViewCell에 사용될 데이터: SubCategory의 name tableViewHeader에 사용될 데이터: CategoryModel의 name s..

아이디어 Cell 타입이 총 3개 존재 (3개의 커스텀 셀 정의) Cell 타입 하나 당 Section 하나씩 배치 Cell로만 이루어지지 않고 Section으로 나눈 이유? 분류 - TableView / Section / Cell -> Cell들은 서로 연관되어 있는지? 연관이 적으면 Section으로 나누기 -> Section들은 표현하려는 방향이 같은지? 표현하려는 방향이 같으면 하나의 TableView에 표현 Section으로 분리해야하는 구체적인 이유 - 멀티 Section에 관한 글 참고 준비 Unsplash API 사용 (이미지 데이터 획득) framework # Rx pod 'RxSwift' pod 'RxCocoa' pod 'RxGesture' # UI pod 'SnapKit' pod 'T..

* 주의: Section이 한개밖에 없는 경우 해당 방법 사용하고, 만약 Section이 여러개면 RxDataSource 사용 방법 포스팅 글 참고 Cell 준비 // MyCell.swift import UIKit final class MyCell: UITableViewCell { private let label: UILabel = { let label = UILabel() label.font = .systemFont(ofSize: 24) label.textColor = .black return label }() override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) { super.init(style: style, reuseId..

사용한 기초 프레임워크 참고 ReactorKit RxCocoa Moya/RxSwift Kingfisher 사용 API Unsplash API page별로, 랜덤 이미지를 로드하는 API PrefetchItems tableView, collectionVIew와 같이 ScrollView의 스크롤할때 아직 화면에서 보이지 않지만 그 다음 보여야하는 cell에 관한 정보를 미리 얻어오는 것 정보를 미리 얻어와서, 불러와야할 이미지 url을 알고 스크롤 하기전에 prefetchItems 이벤트가 발생할때 미리 로딩하는 것 Pagination API 호출 시 page정보를 가지고 있어서, 정보를 한꺼번에 가져오지 않고 page=1, page=2, page=3와 같이 page별로 쪼개서 API호출하고 이미지를 업데이..

RxCocoa에서 제공하는 방법으로 tableView의 ControlEvent 처리 방법 RxCocoa의 UITableView+Rx 파일에 존재 itemSelected: 선택한 셀의 IndexPath 값 획득 // viewDidLoad()에서 호출 private func setupTableViewDelegate() { tableView.rx.itemSelected .map { "셀 선택 indexPath = \($0)" } .bind(to: titleLabel.rx.text) .disposed(by: disposeBag) } modelSelected: 선택한 셀의 model 값을 획득 itemDeleted tableView.rx.itemDeleted .map { "아이템 제거 = \($0)" } .bin..

* Section별, Item별로 dataSource 사용 모델 구현 패턴 방법은 이곳 참고 Cocoa Pods 종속성 pod 'RxSwift' pod 'RxCocoa' pod 'RxDataSources' 모델 정의 RxTableViewSectionedReloadDataSource를 사용하여 DataSource에서 사용되는 데이터형은 `AnimatableSectionModelType`를 준수하는 모델이어야 가능 AnimatableSectionModelType은 SectionModelType을 준수하는 프로토콜 original에 해당되는 모델은 Section에 해당되고, items에 해당되는 인수는 rows값 AnimatableSectionModelType을 준수하는 모델 정의하기 전에 [Item] 타입..