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

1. List 형태 UI - @State를 활용하여 로딩 상태, 로드 상태, 실패 상태 띄우기 2. List 형태 UI - pull to refresh, 페이지네이션 구현 방법 (List, refreshable, pagination, @Sendable) 3. List 형태 UI - 검색된 결과 UI에 보여지게 하는 방법 (searchable) 복습) 1번 글까지 한 것 @State로 선언된 프로퍼티를 활용하면 매우 쉽게 상태 표현이 가능 뷰 코드에서 이 프로퍼티에 관한 switch문을 활용하여 상태에 따라 뷰를 다르게 보여주는 코드를 준비해 놓고, 프로퍼티만 변경되면 자동으로 바인딩되어 뷰가 변경됨 코드: https://github.com/JK0369/ExListSwiftUI.git struct Con..

하단 로딩 구현 아이디어1단계) Pagination: tableView의 willDisplay 델리게이트에서 마지막 인덱스 값인지 체크하고, 마지막 인덱스 값이면 페이지네이션 구현2단계) 하단로딩: willDisplay에서 페이지네이션이 되기 전에 tableView의 footerView에 indicator가 있는 UITableViewHeaderFooterView를 대입해주고, 데이터가 들어오면 다시 footerView.tableFooterView를 nil로 초기화하단 로딩 구현pagination 형태 구현class ViewController: UIViewController { private let tableView: UITableView = { let view = UITableView(..

1. Pagination 방법 (페이지네이션, Combine) - 기초 2. Pagination 방법 (페이지네이션, Combine) - 메인 스레드 최적화, 이미지 캐싱 Pagination 개념 List에서 스크롤할 때 필요한 데이터를 계속 추가적으로 받아오는 형태 대용량의 데이터를 한꺼번에 받아오면 부하가 크므로, 10개를 보여주고 그다음 스크롤이 마지막에 도달할때 그 다음 10개를 보여주는 형식 API를 호출할땐 page Int 값을 다르게 보내면서 데이터를 가져오는 방법 SwiftUI 에서의 Pagination 구현 아이디어 List의 마지막 부분에 로딩뷰를 따로 추가하고, 그 부분이 onAppear 될때 페이지네이션 수행 List { ForEach(items) { item in } if !ite..

예제에 사용한 프레임워크 SnapKit Then RxSwift, RxCocoa Kingfisher Alamofire # UI pod 'SnapKit' pod 'Then' # Util pod 'RxSwift' pod 'RxCocoa' pod 'Kingfisher' # Network pod 'Alamofire' 페이지네이션 아이디어 2가지 1번 방법) 스크롤된 위치를 계산하여, 남은 아래 영역이 프레임의 크기보다 작게 남은 경우, 페이지네이션 실행 2번 방법) delegate 메소드인 tableView(_:prefetchRowAt:) 를 사용하여 prefetch 사용 func tableView(_ tableView: UITableView, prefetchRowsAt indexPaths: [IndexPath]..

1. GraphQL - 개념 2. GraphQL - Apollo 사용 준비 3. GraphQL - Apollo 모델 생성 (generate model) 4. GraphQL - Apollo의 request pipeline, Interceptor, token, header 5. GraphQL - Apollo의 fetch 예제 (Pagination) Apollo 준비 1~3 개념을 참고하여 튜토리얼 Sandbox에서 아래 쿼리 생성 & generate query LaunchList { launches { hasMore cursor launches { id site mission { name missionPatch(size: SMALL) } } } } Apollo 접근 singleton 정의 import Apo..

1. GraphQL - 개념 2. GraphQL - Apollo 사용 준비 3. GraphQL - Apollo 모델 생성 (generate model) 4. GraphQL - Apollo의 request pipeline, Interceptor, token, header 5. GraphQL - Apollo의 fetch 예제 (Pagination) Request pipeline, Interceptor 작업이 실행되면 작업이라는 개체가 InterceptorProvider를 생성 - RequestChain이 되는 것 이 chain이 First Interceptor, Second Interceptor들을 실행 Interceptor의 기능 HTTP Header 추가 가능 서버에 request 기능 Intercept..

사용한 기초 프레임워크 참고 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호출하고 이미지를 업데이..

1. 이미지 캐싱, 이미지 효율적으로 로드 방법, 스크롤에 따라 이미지 로드(tableView, collectionView): scrollViewDidScroll, prefetch 2. 이미지 캐싱, 이미지 효율적으로 로드 방법(tableView, collectionView): async + NSCache 아이디어 스크롤이 느려지고, 앱이 꺼지고 이미지들이 사용자에게 보여질 때 느려질 수 있으므로 캐시를 사용 비동기적으로 이미지를 저장하고 cache를 사용 어떻게? request(page:1) API 호출 > 10개의 이미지 url 획득 10개의 이미지 url만 cell의 model에 먼저 저장 (image는 따로 호출하여 반영) image는 최초 10개만 일단 로드하고, 나머지는 아래에서 나오는 내용인..