하이 D:)veloper

MVVM 아키텍처를 사용해서 앱을 구현했을 때 view model을 구독할 수 있는 property wrapper인 @StateObject 와 @ObservedObject 사이에서 헷갈렸던 적이 많이 있었기 때문에 둘 사이의 공통점과 차이점에 대해 기록하고자 한다. # 🥨 Property Wrapper 우선, @StateObject 와 @ObservedObject 는 구독하고 있는 객체의 변경에 반응해서 화면을 업데이트할 수 있게 해주는 SwiftUI의 프로퍼티 래퍼이다. 두 프로퍼티 래퍼 모두 ObservableObject 프로토콜을 채택한 객체를 필요로 한다. 예를 들어 MVVM 아키텍처로 앱을 구현한다고 했을 때 ViewModel 프로퍼티의 변화를 View에 반영해주고 싶다면 ViewModel을 정..

UIKit의 view controller인 UIImagePickerController를 사용함으로써 SwiftUI에서 사진을 선택할 수 있는 기능을 구현할 수 있다 # 🥨 UIView와 UIViewController - UIView : An object that manages the content for a rectangular area on the screen. UiView는 공식문서에서 말하는 것처럼 화면의 사각형 영역에 대한 내용을 관리하는 객체이다. 우리가 사용하는 UILabel, UIButton, UITextField 등 UI컴포넌트 들의 부모클래스가 UIView인 것이다. https://developer.apple.com/documentation/uikit/uiview UIView | Appl..

SwiftUI기반 앱을 만들면서 UIViewRepresentable를 써줘야하는 실질적 상황이 생겼다. textField에서는 키보드 말고도 다양한 형태의 inputView에서 입력값을 받아줄 수 있어야한다. 나는 커스텀하여 만든 picker에서 선택한 값이 textField의 입력값으로 반영되는 기능을 구현하고싶었다. 하지만 SwiftUI에서는 UIKit에서 처럼 UITextField에서의 inputView를 따로 커스텀해줄 수 없었기에 UIViewRepresentable를 활용해서 UIKit 뷰를 만들어주어야했다. UIViewRepresentable의 개념적 내용이 궁금하다면 아래 두 개의 포스팅이 도움이 될 것 이다. https://heidi-dev.tistory.com/6 SwiftUI에서 UIK..

앞서 SwiftUI에서 UIKit를 사용하기 위해 UIViewRepresentable 프로토콜을 사용하는 방법을 간단히 알아보았다. 이제 여기서 궁금한 것은 SwiftUI와 UIKit 간에 데이터를 주고받고 변화를 감지할 수 있는가이다. 우리는 @Binding property와 Coordinator를 사용하면 적절한 상황에서 SwiftUI와 UIKit 간에 데이터를 주고받을 수 있다. SwiftUI에서 UIKit 사용하기 UIViewRepresentable (1) | TextField에서 clear button 사용하고 싶다면 SwiftUI에서 UIKit 사용하기 UIViewRepresentable(2) | @Binding 이란? Coordinator 란? # 🥨 @Binding property @Bin..

SwiftUI 기반인 앱을 구현하면서 UIKit에서는 지원하지만 SwiftUI에서는 지원하지 않는 뷰들이 아직 존재한다는 것을 알게 되었다. 그럴 때 UIKit에서 제공하는 뷰를 SwiftUI에서 사용할 수 있도록 래핑 해주는 기능의 프로토콜이 바로 UIViewRepresentable이다. SwiftUI에서 UIKit 사용하기 UIViewRepresentable (1) | TextField에서 clear button 사용하고 싶다면 SwiftUI에서 UIKit 사용하기 UIViewRepresentable(2) | @Binding 이란? Coordinator 란? # 🥨 UIViewRepresentable SwiftUI에서 UIKit을 쓸 수 있도록 해주는 프로토콜이며, 사용 시 만들고 싶은 구조체에서 U..

# 🥨 체크박스 를 만들고 싶다면 SwiftUI 에서 제공하는 Toggle 구조체를 사용하지 않고도 SF Symbol의 이미지를 활용해 클릭할 때마다 전환해주면서 체크박스를 구현해줄 수 있다. 코드 예시는 아래와 같다. import SwiftUI struct MyTag { let label : String let value : Int } struct ToggleStylePracticeView: View { @State var selectedTopics : [String] = ["tag1", "tag3"] let myTags : [MyTag] = [ MyTag(label: "tag1", value: 1), MyTag(label: "tag2", value: 2), MyTag(label: "tag3", val..

# 🥨 @ViewBuilder란? 정의 : 클로저로 받은 뷰를 구성하는 custom parameter attribute 즉, 클로저로 받은 (child)view에 대한 어트리뷰트 키워드이며, 우리가 활용할 때 중요한건 closure 내부에 (child)view 를 전달한다는 것이다. * swift에서 말하는 @어트리뷰트 키워드란, 컴파일러에게 추가적인 정보를 알려주는 역할을 한다. # 🥨 SwiftUI에서 정의한 Button에서도 볼 수 있는 @ViewBuilder https://developer.apple.com/documentation/swiftui/button Button | Apple Developer Documentation A control that initiates an action. dev..

재사용되는 SwiftUI 코드를 Custom View Modifier로 만들어주기 UI를 만들다보면 재사용되는 스타일이 생기기 마련이다. 이 경우에 같은 코드를 반복해서 사용하면 매우 길고 가독성이 낮은 코드가 되기 때문에 이러한 상황에서 유용하게 사용할 수 있는 Custom View Modifier를 활용해서 코드를 가독성있게 만들어주었다. 🥨 1. 단순한 Custom View Modifier 만들어주기 1) 우선 나는 다양한 Custom View Modifier를 만들기 위해 폴더를 생성해주고 그 아래에 각각 관련된 Modifier를 작성할 파일을 나누어주었다. 2) 우선 내가 가장 자주 사용한 스타일에 대한 구조체는 이렇게 작성해주었다 import Foundation import SwiftUI st..

자주 쓰이는 컬러를 쉽게 사용할 수 있도록 코드를 설정해주었다 Color 익스텐션을 통해 Hex코드를 활용해서 값을 추출해내는 생성자를 직접 만들어줄수도 있지만 나는 간단히 Asset에 등록하는 방법으로 설정해주었다. 🥨 1. asset파일에 컬러 등록 1) Asset을 관리하는 폴더에 Colors.xcassets 파일을 만들어준다. 2) 우측마우스 클릭하여 New Color Set을 클릭해준다. 3) 컬러의 이름을 지정해주고 Inspector 창을 열어준다. 4) Any Apprearance 혹은 Dark 를 클릭하면 우리가 원하는 컬러를 지정할 수 있게 된다. 나는 Hex 코드 형태로 컬러를 지정하고 싶었기 때문에 input method를 8-bit Hexadecimal 로 선택해주었다. 5) 원하는..