#Preview Xcode에서 CoreData, SwiftData를 Preview에서 보기 위해서는 @Query로 조회한 데이터를 사용할 수 없습니다. 이럴 때는 직접 데이터를 만들어서 테스트하는 방법이 있습니다. 우선 ModelConfiguration 객체를 인 메모리 only 행태로 생성합니다. 그리고 테스트 객체를 만들기 위해 ModelConfiguration 를 통해 ModelContainer를 만듭니다. 마지막으로 만들 때 사용할 모델을 추가해 줍니다. 그리고 이제 Preview에서 사용할 새로운 테스트 객체를 생성합니다. Container를 만들 config 객체는 isStoredInMemoryOnly를 true로 설정합니다. #Preview(traits: .sizeThatFitsLayout)..
처음 스위프트 UI를 사용하면 죄다 Struct로 구성되는 것을 보고 조금 익숙하지 않을 수 있습니다. 그러나 계속 공부를 하다 보면 왜 그런지 알게 되는데 그 이유를 5가지로 정리해 보겠습니다. struct ContentView: View { @State private var count = 0 var body: some View { VStack { Text("Hello") } } } 1. Struct는 단순합니다. 일단 스트럭트는 클래스에 비해 가볍습니다. 그리고 구조자체가 단순합니다. 이는 값타입이기 때문에 복사도 쉽고 참조타입인 클래스보다 메모리에도 사용에도 유리합니다. 이는 성능에 영향을 주고 아무래도 스토리보드나 xib로 만들어진 커다란 객체 덩어리 보다 훨씬 가볍고 구조적으로 UI를 만들 수 ..
스위프트 UI 버튼 비 활성화 스위프트 UI 에서 버튼을 비 활성화는 disabled(_:) modifier를 사용해 변경할 수 있습니다. boolean 값을 가지며 true 일 경우 disabled 상태가 되며 반대인 false 일 때는 enabled 상태가 됩니다. (false 값이 기본값) 비 활성일 경우 버튼의 색상이 Gray 색으로 변경됩니다. var body: some View { VStack { Button("비 활성 버튼") { } .disabled(true) Button("활성 버튼") { } .disabled(false) } .font(.title) } 활용 예제 다음 예제에서는 두 개의 컨트롤이 있습니다. TextField 에 값이 비어 있다면 그 값을 참조하는 name을 바인딩 한 ..
스크롤 뷰 scrollTo 이동 SwiftUI 에서 스크롤 뷰를 강제 이동시키려면 ScrollViewReader를 통해 값을 가져와서 scrollTo 메서드를 사용해서 이동시켜야 합니다. 다음과 같이 횡으로 스크롤 되는 캘린더에서 오늘 날짜에 중앙으로 위치 시킬 수 있는 예제로 공부해 보겠습니다. 우선 화면을 드로잉 해보겠습니다. 필요한 데이터를 간단히 정의해보겠습니다. 우선 선택한 날짜가 필요하고 캘린더 객체 그리고 시작일이 필요합니다. 이번달 전체 날짜를 그리기 위해서 components 라는 변수를 선언해 해당 달의 모든 날짜를 map을 사용해서 배열 형태로 가져옵니다. struct HCalView: View { @State private var selectedDate = Date.now priva..
아이폰 개발 시 스크롤 뷰를 사용하면 델리게이터를 이용해서 스크롤의 오프셋 값을 쉽게 알 수 있습니다. 하지만 스위프트 UI를 사용하면 어떻게 가져올지 막막합니다. 특정 위치에 스크롤을 강제로 하로 싶을 때 ScrollViewReader를 사용해서 이동시킬 수는 있지만 Offset값을 실시간으로 알기 위해서는 PreferenceKey를 통해서 값을 값을 실시간으로 추적해야 합니다. PreferenceKey 프로토콜 구현 우선 위의 PreferenceKey를 구현해보겠습니다. defaultValue와 reduce 함수를 정의해줍니다. struct ScrollPreferenceKey: PreferenceKey { static var defaultValue: CGFloat = .zero static func ..
뷰 모델 생성 뷰 모델을 생성합니다. 이름은 UsersViewModel 이고 ObservableObject를 상속합니다. 다음 두 개의 속성을 @Publised 래퍼로 가지고 있습니다. users : 통신의 결과 값인 User 객체의 배열 isLoading : 통신 중을 확인하는 Boolean 값 fetchUsers()라는 함수를 만들어서 통신 결과 값 데이터를 반환합니다. final class UsersViewModel: ObservableObject { @Published var users: [User] = [] @Published var isLoading = false func fethUsers() async throws { isLoading = true defer { isLoading = fals..
▼ 우선 데이터를 만들기 위해서 Store 객체를 만듭니다. @Published 선언을 해서 2개의 색상을 만듭니다. updateDisplay 함수는 단순히 색상을 바꾸는 역할을 합니다. 처음 blue, green 색 에서 updateDisplay 함수가 호출되면 red, orange 색으로 바뀝니다. class Store: ObservableObject { @Published var colors: [Color] = [.blue, .green] func updateDisplay() { colors = [.red, .orange] } } ▼ 다음으로 ContentView에 Store() 객체를 생성해서 포함시킵니다. @main struct Test1App: App { @StateObject var stor..
스위프트 UI URLSession 통신 보통 앱을 만들때 API 통신을 하려면 Alamofire를 많이 사용합니다. 오늘은 SwiftUI에서 Alamofire가 아닌 URLSession 객체를 통해 통신을 하고 값을 표출하는 테스트를 해보겠습니다. 우선 사용될 URL은 다음과 같습니다. 브라우저에 입력해보면 JSON 형태의 데이터로 된 것을 확인 할 수 있습니다. JSON 데이터 URL와 데이터 Struct 정의 https://itunes.apple.com/search?term=taylor+swift&entity=song ▼ 우선 JSON 형태에 맞게 Codable를 상속 받은 데이터 Struct를 만들어줍니다. Response는 응답 받는 데이터 형태이며 Result 타입의 데이터를 배열형태로 가지게 ..
SwiftUI에서 UIKit을 사용해 화면을 표현할 수 있다는 것은 스위프트 UI 개발을 하시는 분이라면 대부분 알고 계실겁니다. 이 UIView 또는 ViewController를 프리뷰(Preview)를 이용해서 띄워보겠습니다. ▼ 다음과 같이 ViewController를 하나 생성합니다. 만약 PreviewProvider 프로토콜을 구현한 preivews 반환 값이 View 타입이 아니라면 보시다시피 에러가 납니다. UIKit의 뷰 컨트롤러를 반환하기 때문입니다. ▼ 이제 Preview 를 extension해서 UIViewControllerRepresentable 프로토콜을 구현합니다. 이때 필요한 함수가 makeUIController, updateUIViewController입니다. updateUI..
UIKit과 SwiftUI 통합하기 SwiftUI 이전에는 iOS 개발을 위해 UIKit을 사용하였습니다. SwiftUI로 화면을 개발한다고 해도 UIKit을 사용할 수 밖에 없는데요. SwiftUI 화면을 UIKit에서 사용하려면 UIHostingController를 사용해서 쉽게 사용할 수 있는 것처럼 SwiftUI에서는 UIViewRepresentable이라는 프로토콜을 구현함으로써 UIView를 쉽게 SwiftUI에 반영할 수 있습니다. ▼ UIViewRepresentable 프로토콜은 UIKit을 SwiftUI에서 사용하기 위해 SwiftUI 형태의 화면으로 만들기 위한 프로토콜입니다. 다음과 같이 일반 UIKit 화면을 UIViewRepresentable를 구현을 통해 SwiftUI 에서 손쉽..
▼ 스위프트 UI는 선언형 UI를 사용합니다. 예를 들면 다음과 같이 Color.red 에 .ignoresSafeArea() 라는 ViewModifier를 추가해서 화면에 SafeArea를 포함해서 전체화면을 빨간색으로 채울 수 있습니다. 마찬가지로 .frame을 이용해서 화면 사이즈를 변경할 수도 있습니다. ▼ 이번에는 ZStack을 사용해서 Color와 Text를 중첩해서 표현하겠습니다. ZStack의 alignment를 .bottomTrailing 옵션으로 Text를 우측 하단에 포함시킵니다. Text에도 역시 font, foregroundColor 와 같은 다양한 modifer가 추가되어있습니다. 때문에 코드가 복잡해지고 재사용하기 힘든 코드가 됩니다. ▼ ViewModifier를 확장한 Wate..
▼ 텍스트 필드를 만들기 위해서 다음과 같이 TextField 요소를 추가합니다. 첫 번째 파라미터는 Placeholder를 의미하며 두 번째 파라미터는 실제 입력 텍스트로 Binding 값이 들어갑니다. 때문에 @State 지시자를 통해서 새로운 변수를 추가합니다. @State는 내부적으로만 사용하기 때문에 private로 선언하는 것이 기본이며 값은 빈 문자열로 해줍니다. ▼ 텍스트를 입력하면 첫 글자가 대문자인 것을 알 수 있습니다. textInputAutocapitalization 를 .never로 설정하면 대문자가 아닌 소문자로 시작합니다. 그리고 틀린 문자에 대해 자동으로 수정해주는 기능이 있는데 사용자가 불편할 수 있습니다. .disableAutocorrection(true) 로 방지할 수 ..