스택 오버플로우의 답변을 참고하자. ZStack은 ZStack 자체의 프레임과 내부 컨테이너 뷰의 프레임이 동일하지 않을 수 있고, ZStack의 특성상 가장 layoutPriority가 큰 자식을 기준으로 컨테이너의 크기가 결정된 후 ZStack 생성자에 명시된 alignment를 적용하기 때문에 원하는 결과가 나오지 않는다.

원래대로라면 ZStack은 자신의 child 들에 의해 자신의 프레임 크기도 결정되어 두 개가 같지만, 질문에서처럼 명시적으로 ZStack의 프레임을 선언한 경우 그렇지 않게된다.

이를 방지하려면 암시적으로 .infinity의 maxWidth, maxHeight를 가지는 Color.clear 를 추가하거나 동일한 동작을 하는 뷰들을 이용해야 한다.

Layout Debugger에서 보면

이처럼 ZStack 자체의 width와 height는 50 이지만 바로 위의 ContentView는 142x142 을 가진다.

이것은 ContentView 자체가 Layout Neutral 속성을 가지기 때문에 ContentView와 ZStack 사이에 어떤 뷰가 크기가 200을 가지게 된다는 뜻이다.

그런데 그 뷰는 뷰 계층에 안보인다.

frame modifier의 설명을 보면 invisible frame을 추가한다고 하는데 아마 그것과 관련이 있지않나 싶다.

여하튼 Color.clear 같은걸 추가하게 되면 컨테이너가 그 프레임에 맞춰 Expand되기 때문에 넓어진 컨테이너의 뷰에서 텍스트도 올바르게 정렬이 된다.

Answer 2

상위 VStack 은 alignment 를 지정하지 않았으므로 하위 VStack는 중앙정렬된 상태이다. 따라서 하위 VStack에 alignment 생성자 인자를 줘봤자 동작하지 않는다. 크기가 저렇게 결정되었기 때문이다.

이를 해결하는 방법은 하위 VStack의 frame 을 maxWidth=.infinity 를 주고 최대로 넓힌다음 alignment 를 사용하면 된다.

Answer 3

다른거없다.

두 개 다 자식의 배치를 동일하게 결정한다.

하지만 두개 중 어떤것을 쓰느냐에 따라 결과에 차이가 나는 이유는 XStack 들의 프레임과 내부 컨테이너의 크기가 일치하지 않는 경우에 대해 XStack에 frame modifier를 쓰면 그 컨테이너를 배치해주는 것이고, XStack의 생성자에서 alignment를 쓰면 컨테이너 안의 자식들의 배치를 결정해주는 것이다.

확실한 이해를 위해 예시를 첨부한다.

struct ContentView: View {
	var body: some View {
		VStack {
			VStack {
				Text("Hello").border(.blue)
				Text("Hello Hello Hello").border(.blue)
			}
		}
		.frame(maxWidth: .infinity)
		.border(.red)
		.padding(.horizontal, 24)
	}
}

이렇게 되어있으면 대략 이렇다.

여기서 내부 VStack 의 alignment 를 이용하면 위의 Hello가 정렬이 될 것이다.

왜냐면 내부 VStack의 크기가 가장 긴 자식인 Hello * 3 에 의해 결정이 된 상태이고, 이제 나머지 것들이 어떻게 배치될 지를 결정해줄 수 있기 때문이다.

struct ContentView: View {
	var body: some View {
		VStack {
			VStack(alignment: .leading) {
				Text("Hello").border(.blue)
				Text("Hello Hello Hello").border(.blue)
			}
		}
		.frame(maxWidth: .infinity)
		.border(.red)
		.padding(.horizontal, 24)
	}
}

이제 외부 VStack의 alignment를 변경해보자.

struct ContentView: View {
	var body: some View {
		VStack {
			VStack(alignment: .leading) {
				Text("Hello").border(.blue)
				Text("Hello Hello Hello").border(.blue)
			}
		}
		.frame(maxWidth: .infinity, alignment: .trailing)
		.border(.red)
		.padding(.horizontal, 24)
	}
}

차이점을 알게 되었을 것이라 생각한다.

뷰들이 어떻게 넓이를 차지하고 어떻게 배치가 되는지를 직접 Xcode에서 이것저것 만져보며 숙련시켜야 될 것이다.

How to Use Alignments in SwiftUI — The Alignment Process✅

How to Use Alignments in SwiftUI — Custom Alignments✅

How to Use Alignments in SwiftUI — Container Expansion using Alignments✅

How to Use Alignments in SwiftUI — Z-Stack Alignment✅

Custom modifiers✅

Mastering AsyncImage in SwiftUI✅

Official Tutorial - Animating Views and Transition⭐️ ✅

Official Tutorial - Composing Complex Interfaces✅

23-07-27

Official Tutorial - Working With UI Controls✅

SwiftUI Animations: A Beginner’s Guide✅

Basics of SwiftUI Animations✅

How to draw a border around a view✅

Transactions and Animations✅

Transitions in SwiftUI✅

Animation in SwiftUI: Get to Know Transactions✅

The missing manual to SwiftUI animations✅

How to apply multiple animations to a view✅

애니메이션과 관련된 개념들이 궁금해 글을 몇개 찾아보았다.

Swift UI의 애니메이션은 다음과 같다.

Implicit Animation
- animation modifier로 설정 가능
Explicit Animation
- withAnimation closure안에서 State 의 업데이트 필요
- 암시적 애니메이션이 더 높은 우선순위를 갖지만 disablesAnimations 플래그를 Transaction에서 설정하면 이를 다르게 동작하게 할 수 있다.
Transition
- if 같은 조건문에 의해 뷰가 사라지거나 생길 때 발생하는 애니메이션
- Transaction이 Animation을 갖고 있어야 동작한다.
Animatable Modifier
- AnimatableModifier 를 구현하여 직접 custom modifier를 생성해 값을 전달받아

Official Tutorial - Interfacing With UIKit✅

Integrate UIKit View into SwiftUI View

Official Tutorial - Creating a watchOS App ✅

Xcode의 Target, Project, Workspace 개념✅

1. 모듈화 개념 - Library vs Framework (static library, dynamic library, static framework, dynamic framework)✅

2. 모듈화 개념 - Binary File 개념 (Mach-O, CPU Architectures, Universal binary, lipo command)✅

3. 모듈화 개념 - XCFramework 생성, 사용 방법✅

Modular iOS Part 1: Strangling the Monolith✅

23-07-28

Modular iOS Part 2: Splitting A Workspace into Modules✅

Modular iOS Part 3: Configuration & Testing of Modules✅

Libraries, frameworks, swift packages… What’s the difference?⭐️ ✅

Xcode에서의 Target, Project, Workspace의 개념부터 시작해서 모듈화를 하는 단위와 그것으로 하는 방법이 무엇인지에 대해서 조금 공부했다.

offset 과 position 의 layout 단계⭐️✅

Official Tutorial - Creating a MacOS App✅

23-07-30

Medium - Our 1 Mistake in iOS App Modularization That Slows our Xcode Build process✅

Medium - 10 quick tips to increase your iOS code quality✅

Medium - Writing a modern iOS Networking Library with Swift Concurrency✅

Medium - Introducing @AppStorage in SwiftUI✅

Absolute positioning for SwiftUI views✅

Swift Docs - About Swift⭐️✅

Swift Docs - Version Compatibility⭐️✅

Swift Docs - Swift Tour⭐️✅

Swift Docs - The Basics⭐️✅

Swift Docs - Basic Operators⭐️✅

Swift Docs - Strings and Characters⭐️✅

Swift Docs - Collection Types⭐️✅

Swift Docs - Control Flow⭐️✅

Swift Docs - Function⭐️✅

Swift Docs - Closures ⭐️✅

Swift Docs - Enumerations ⭐️✅

23-07-31

Swift Docs - Structures and Classes⭐️✅

Swift Docs - Properties⭐️✅

Swift Docs - Method⭐️✅

Swift(스위프트): 타이머(Timer) 만들기✅

Medium - What is a RunLoop Anyway? Swift and iOS Guide✅

Medium - iOS Run Loop, What Why When✅

잠시 RunLoop 를 보았는데, 정확히 modern Swift에서 Concurrency를 어떻게 다루는것이 올바른 방법인지 독스를 읽고 다시 봐야할 것 같다.

Run Loop와 GCD를 헷갈리지 말아야 하며, 이것에 대한 ChatGPT의 답변은 다음과 같다.

이전에 UIKit 으로 개발을 할 땐 그저 GCD 가 모든것을 관리했고 RxSwift 같은 툴들도 Runner로 GCD 의 큐를 설정하는 유틸리티를 제공했었다.

최근엔 Combine 이라든지 Swift 5.5부터 나온 async/await 문법이라든지 해서 Concurrency를 제대로 다루려면 더 알아야 할 API나 개념들이 추가된 것 같다.

Swift Docs - Concurrency⭐️✅

Docs - TaskGroup✅

Task 와 TaskGroup이 Swift에서 Structured Concurrency를 제어하기 위한 도구들인것 같고 Kotlin Coroutine에서 CoroutineScope/Job와 비슷하다고 생각하면 될 것 같다.

23-08-01

Swift Docs - Subscripts⭐️✅

Swift Docs - Error Handling⭐️✅

Swift Docs - Inheritance⭐️✅

23-08-02

Swift Docs - Initialization⭐️✅

Swift 의 생성자 부분은 특히 좀 더 복잡한 편이다.

대개 언어가 이렇겠지만 자세히 설명이 되어있다.

delegation model이나 2 phase로 나눠서 설명한 것이나 이것저것 설명해주는게 많다.

23-08-03

Swift Docs - Deinitialization ⭐️✅

Swift Docs - Optional Chaining ⭐️✅

Swift Docs - Type Casting⭐️✅

Swift Docs - Nested Types⭐️✅

23-08-04

Swift Concurrency에 대해서✅

Swift Docs - Extensions ⭐️✅

Swift Docs - Protocol⭐️✅

Swift Docs - Generics⭐️✅

23-08-05

Swift Docs - Opaque and Boxed Types ⭐️✅

이건 다른 언어에는 없는 Generic의 Swift의 특이한 성질과 관련이 있는것같다.

some을 이용하는 opaque 타입과 any 를 사용하는 boxed 타입에 대해 설명한다.

내가보기엔 associatedtype 을 프로토콜이 사용하게되면 발생하는 문제점들을 해결하려고 만든것같다.

아직 깊은 이해가 불가능하다.

웬만하면 some을 사용하고(성능상 이점), 그게 불가능할 때 타입을 잃게 되더라도(당연히 그로 인해 다른 문제가 생길 수 있음) any 를 써서 보완하는 방식으로 코딩을 함이 옳다고 한다.

Swift Docs - Patterns✅

How to generate random numbers in Swift ✅

Swift Docs - Automatic Reference Counting ⭐️✅

이런 메모리 관리 모델관련 공부는 흔하게 Skip되기 마련인데, Swift에서는 그러지 않는것을 추천한다.

Root부터 더이상 도달할 수 없으면 메모리를 해제하는 일반적인 Garbage Collection방식과 달리 ARC모델은 Strong 참조 개수가 하나라도 안없어지면 그 인스턴스가 당신의 코드에서 사용가능하든 아니든 메모리 누수로 이어지게 된다.

weak 와 unowned 가 필요한 이유와 써야하는 상황들을 숙지하자.

또한, 클로저의 사용이 빈번하기 때문에 capture list같은 개념도 정확히 숙지해두는 것이 좋다.

Swift Docs - Memory Safety⭐️✅

Swift Docs - Access Control⭐️✅

Medium - Swift Actor 뿌시기⭐️✅

Concurrency를 async/await, Task, Actor에 대한 개념을 잘 잡고 이해하기에 좋은 글이다.

저번에 Concurrency관련 글을 찾을 때 왜 못봤었는지 모르겠다.

모두 읽어보았고 설명도 깔끔하다.

여기서 actor가 MainActor에서 Task 를 통해 다른 비동기 작업을 호출해도 await 가 되는 async 함수가 어디에 격리되어 있냐에 따라 실제 그 코드가 실행되는 쓰레드가 변경된다는 내용이 있다.

즉, 오래 걸리는 작업을 다른 쓰레드에서 실행할 책임은 그 작업을 정의한 쓰레드가 가지고 있게 되고, MainActor에서 Task 를 돌려도 Task 내부의 컨텍스트는 Main thread지만 사용하는 입장에서 async 함수들이 제대로 정의가 되어 있다면 쓰레드를 신경쓰지 않고 Main Safety하게 작동시킬 수 있다.

이는 Kotlin Coroutine의 Main Safety와 동일한 개념이다.

Swift Task✅

ButtonStyle을 이용한 커스텀 버튼 구현 방법✅

SwiftUI Components: Beginners Guide✅

SwiftUI — Basic components✅

How to change SwiftUI list background color✅

Official Tutorial - Using stacks to arrange views✅

Official Tutorial - Creating a card view✅

Official Tutorial - Displaying data in a list✅

23-08-06

Towards a Design System in iOS: Colors✅

What a Designer Needs to Know About iOS Dark Mode When Working with a Developer✅

UI element colors✅

Official Tutorial - Creating a navigation hierarchy✅

Official Tutorial - Managing data flow between views✅

Should We Learn UIKit or SwiftUI in 2023?✅

Xcode 15 — What’s New ✅

How to Customize SwiftUI Bottom Sheet✅

Official Tutorial - Creating the edit view✅

Official Tutorial - Passing data with bindings✅

Official Tutorial - Making classes observable✅

Official Tutorial - Making classes Observable⭐️✅

iOS 17부터 Macro를 이용해 지원되는 Observable() 도 있는 모양이지만, 일단은 현재는 상태 관리를 위해

@State, @Binding, @StateObject, @ObservedObject, ObservableObject, @Published, @EnvironmentObject 등을 사용해서 잘 구현하면 되는 것 같다.

처음 SwiftUI 문법을 보고 뭔 @를 이렇게 붙여대고 $ 를 이렇게 붙여대는지 의아했는데, Swift Docs를 완독하니 이것이 Property Wrapper의 문법이고 Projected Value에 접근하는 방법이 $ 를 붙여주는 거라서 Binding<T> 를 $ 로 얻어올 수 있다는 것을 알 수 있었다.

Official Tutorial - Responding to events⭐️✅

Official Tutorial - Managing state and life cycle✅

Official Tutorial - Updating app data✅

Official Tutorial - Adopting Swift concurrency✅

Official Tutorial - Persisting data✅

Official Tutorial - Adopting new API features✅

How to run some code when state changes using onChange()✅

Mastering SwiftUI’s onChange✅

Official Tutorial - Handling errors✅

Official Tutorial - Drawing the timer view✅

Official Tutorial - Examining data flow in Scrumdinger ✅

Official Tutorial - Transcribing speech to text✅