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

1. List 형태 UI - @State를 활용하여 로딩 상태, 로드 상태, 실패 상태 띄우기2. List 형태 UI - pull to refresh, 페이지네이션 구현 방법 (List, refreshable, pagination, @Sendable)3. List 형태 UI - 검색된 결과 UI에 보여지게 하는 방법 (검색창, searchable)1, 2번 글 복습)SwiftUI에서는 @State 프로퍼티를 사용하면 손쉽게 상태 변경이 가능단순히 @State 프로퍼티만 변경해도 알아서 바인딩되어 뷰도 변경pull to refresh는 List의 메소드인 refreshable를 사용하면 되고, pagination은 onAppear을 통해서 쉽게 구현이 가능전체 코드: https://github.com/JK..

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. List 형태 UI - @State를 활용하여 로딩 상태, 로드 상태, 실패 상태 띄우기 2. List 형태 UI - pull to refresh, 페이지네이션 구현 방법 (List, refreshable, pagination, @Sendable) 3. List 형태 UI - 검색된 결과 UI에 보여지게 하는 방법 (searchable) 상태 처리 핵심 개념 - @State List형태의 UI를 구현하면 항상 로딩, 성공, 실패에 따라 UI를 다르게 보여주어야 하는데 이 때 SwiftUI의 @State를 활용하면 매우 쉽고 빠르게 구현이 가능 enum으로 로딩, 성공, 실패에 관한 정의를 하고 이 enum 타입의 프로퍼티를 @State로 선언하면 쉽게 상태 관리가 가능 목표) @State로 3가지 ..

List, Grid, FittedGrid 개념 List - 1줄로 된 스크롤 뷰 Grid - n줄로 된 스크롤 뷰이며, 각각의 크기가 Fixed로 정해진 값으로 표출 FittedGrid - 이미지와 같은 경우, width는 디바이스의 크기만큼 고정하면서 height값은 이미지의 비율만큼 유지하는 그리드 뷰 List Grid FittedGrid 구현 아이디어 모두 ScrollView, Stack, ForEach, NavigationLink로 구현 List에도 List라는 SwiftUI에서 제공해주는 컴포넌트가 있지만, 디폴트값으로 패딩이 적용되어 있고 disclosure indicator가 있는 경우가 존재하여 불필요 예제에 사용할 API 사용 API - 이미지 리스트를 불러오는 Flickr https:/..

1. Pagination 방법 (페이지네이션, Combine) - 기초 2. Pagination 방법 (페이지네이션, Combine) - 메인 스레드 최적화, 이미지 캐싱 이미지를 불러올때 고려할 것 url을 가지고 이미지를 불러올 때, main thread에서 이미지를 가져오면 앱이 버벅이는 현상이 존재 심지어 AsyncImage를 통해서 async하게 이미지를 불러와도 앱이 버벅이는 현상이 존재 background thread에서 url을 통해 이미지를 불러오도록 구현 Image Caching 적용을 통해 조금 더 빠른 로딩이 되도록 구현 이미지 캐싱이 없다면 매번 url을 네트워킹을 통해서 이미지를 획득하므로 캐싱이 필수 구현 아이디어 url을 통해 이미지를 불러오는 코드는 background th..

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

가장 일반적인 List 형태 List 하위에 NavigationLink가 있는 형태 import SwiftUI struct ContentView: View { var items = (0...100).map(String.init).map(SomeModel.init) var body: some View { NavigationView { List(items){ item in NavigationLink( destination: { Text(item.val) }, label: { Text(item.val) } ) } .navigationTitle("List 예제") } } } struct SomeModel: Identifiable { let val: String var id: String { val } } 오른쪽..

목차) SwiftUI의 기본 - 목차 링크 List 형태 Hashable을 따르고, View를 준수하는 두 개의 제네릭스로 구성 struct List where SelectionValue : Hashable, Content : View 사용방법은 List 후 클로저안에 subviews들을 넣어서 구현 struct ContentView: View { var body: some View { List { Text("A List Item") Text("A Second List Item") Text("A Third List Item") } } } List(:) { } 형태로도 사용이 가능 struct Ocean: Identifiable { let name: String let id = UUID() } privat..