Philip’s Blog

안녕하세요. SwiftUI에는 SafeAreaRegions라는 구조체가 있고, ignoreSafeArea 함수에서 자주 사용됩니다. 그래서 이번에는 SafeAreaRegions의 3가지 static property가 ignoreSafeArea 함수랑 같이 사용될 때 동작이 어떻게 다른지 알아보려고 해요. # SafeArea 우선, SafeArea(안전 영역)이 뭔지 알아야 할 것 같습니다. (iPhone 기준으로 설명할게요ㅎㅎ) safe area는 navigation bar, tab bar, toolbar, Keyboard layout guide로 인해 덮이지 않는 영역을 의미합니다. (user interaction, 즉 사용자에게 콘텐츠가 화면에 보이는 것이 보장되는 영역을 의미하기도 합니다.) saf..

안녕하세요. 오늘은 SwiftUI의 zIndex(_:) 수식어에 대해 알아보려고 해요. 정의 먼저 살펴보면, Controls the display order of overlapping views. Use zIndex(_:) when you want to control the front-to-back ordering of views. 곂친(overlapping) 뷰의 표시 순서를 조절하는 것. 뷰의 앞뒤 순서를 제어할 때 zIndex(_:)를 사용한다. 쉽게 말해서 다른 뷰에 의해 가려져 있는 특정 뷰를 위로 올릴 때 사용하는 수식어라 볼 수 있습니다. Parameter로는 value를 입력받습니다. (value는 어떤 뷰를 위로 올릴지에 대한 우선순위(?) 같은 개념이라고 보면 될 것 같아요.) valu..

안녕하세요. 이번에는 SwiftUI의 mask 수식어에 대해 알아볼게요. # mask Masks this view using the alpha channel of the given view. 현재 뷰를 주어진 뷰의 알파 채널을 사용해서 마스크 하는 것. 저는 여기서 mask가 어떤 의미인지 이해가 잘 안 갔어요. 마스크(mask)의 사전적 의미는 '가리다' 입니다. 즉, mask 수식어를 사용하면 현재 뷰(mask 수식어를 적용한 뷰)에서 주어진 뷰(mask 시킬 뷰) 영역만큼만 보이고 주어진 뷰 바깥은 가려지게 된다는 의미입니다. (mask 시킬 뷰만큼 가리는 게 아니고, mask 시킬 뷰만큼 보여준다 라고 이해하면 될 것 같아요.) 그리고 mask 수식어를 잘 살펴보면 파라미터가 Mask 타입, 즉 ..

안녕하세요. 이번에는 SwiftUI 환경에서 WKWebView가 JavaScript의 함수를 호출하고, JavaScript가 WKWebView의 함수를 호출하는 방법에 대해 알아볼게요. iOS 전체 코드: https://github.com/phillip5094/SwiftUI-WebView-JS JavaScript 전체 코드: https://github.com/phillip5094/MyTestPage/blob/main/iOSWebViewCommunication.html # 1. SwiftUI에서 WKWebView 사용 현재 SwiftUI는 Text View, Image View처럼 웹뷰용 View를 제공해주고 있지 않습니다. 따라서, UIViewRepresentable을 활용하여 WKWebView를 wra..

안녕하세요. 이번에는 matchedGeometryEffect에 대해 공부해 볼게요. # matchedGeometryEffect matchedGeometryEffect는 SwiftUI의 수식어 중 하나입니다. Defines a group of views with synchronized geometry using an identifier and namespace that you provide. Identifier(ID)와 namespace를 사용해서 동기화된 geometry로 뷰 그룹을 정의한다. 잘 모르겠....;; Discussion을 좀 더 살펴볼게요. If inserting a view in the same transaction that another view with the same key is r..

안녕하세요. 이번에는 SwiftUI 수식어 중 하나인 contentShape에 대해 공부해 봤습니다. # contentShape Defines the content shape for hit testing hit testing을 위한 영역을 정의할 수 있다. (hit testing에 대해선 Zedd님 글에 아주 잘 정리되어 있으니 읽어보시면 좋습니다ㅎㅎ) 즉, hit testing이란 터치나 드래그 같은 이벤트를 받는 것을 말합니다. 즉, contentShape 수식어는 터치나 드래그 같은 이벤트를 받기 위해 영역을 정의한다고 볼 수 있어요. ## 예시 가장 대표적인 예시 먼저 소개할게요. 아래처럼 View를 구성할 경우 Spacer 영역에는 onTapGesture 이벤트가 발생하지 않습니다. 이때 con..

안녕하세요. 이번에는 SwiftUI의 ScenePhase에 대해 알아볼게요. # 1. ScenePhase ScenePhase는 현재 Scene의 상태(=lifecycle)를 관리하는 값입니다. (아이폰 앱의 경우 단일 Scene이기 때문에 App이라고 봐도 무관할 듯..?) Environment에서 scenePhase를 observing 해서 현재 상태값을 읽을 수 있고, onChange(of:perform:) method를 사용해서 값이 변할 때마다 이벤트를 받도록 구현할 수 있어요. # 2. ScenePhase 종류 ScenePhase에는 총 3가지 값이 있습니다. (1) active 말 그대로 Scene이 foreground에 있고 interactive(상호작용 할 수 있는) 상태인 경우를 의미합니..

안녕하세요. 이번에는 SwiftUI의 @FocusState라는 프로퍼티 래퍼에 대해 알아볼게요. # @FocusState는 현재 포커스(커서) 위치 또는 상태를 나타냅니다. @FocusState 프로퍼티 래퍼로 선언된 값은 현재 포커스의 위치나 상태를 의미합니다. @FocusState 프로퍼티를 사용할 때는 focused라는 수식어를 함께 사용합니다. @FocusState 변수에 값을 대입하면 그 값에 대응하는 특정 뷰로 포커스가 이동하게 됩니다. 마찬가지로 사용자가 임의로 포커스를 다른 뷰로 이동시키면 @FocusState 변수값도 자동으로 바뀌게 됩니다. @FocusState 변수값에 nil 또는 false 값을 대입하면 포커스가 사라지게 됩니다. 뭔가... 말로 설명하는 게 어렵네요...;;; 예시..

안녕하세요. 이런 뷰가 있다고 했을 때, 아래처럼 텍스트 길이의 맞춰서 너비를 통일시켜주고 싶을 때가 간혹 있습니다. SwiftUI에서 이렇게 만드는 방법에 대해서 알아볼게요. VStack을 활용해서 아래처럼 뷰를 만들었다고 해볼게요. 자식뷰의 너비가 모두 제각각이죠?? 아래처럼 Text 뷰에 고정 너비를 줘서 모든 너비를 통일시켜줄 수는 있지만, 이런 경우 텍스트가 길어지거나 짧아지는 경우 텍스트에 딱 맞은 너비로 설정이 되지 않는 문제가 있어요. 텍스트 길이에 동적으로 대응하면서 모든 자식뷰들의 너비를 통일시키는 방법 중 하나는 maxWidth와 fixedSize를 활용하는 것입니다. Text 뷰에 frame(maxWidth: .infinity) 수식어를 사용함으로써, 뷰의 너비를 최대한으로 늘려주..

안녕하세요. 이번에는 SwiftUI에서 View의 identity와 transition이 어떤 관계에 있으며 어떻게 화면이 렌더링 되는지에 대해 알아볼게요. SwiftUI View의 identity는 2가지가 있어요. structual identity: View 계층에서 type과 위치에 따라 구분되는 암시적인 identity explicit identity: id 수식어를 사용해서 명시적으로 identity 선언 이런 Identity는 transition과 밀접한 관계를 가지고 있습니다. (View의 identity가 바뀔 때, transition이 동작하게 됩니다.) structual identity와 explicit idenity 별로 transition이 어떻게 동작하는지 알아볼게요. ## Str..