Philip’s Blog

안녕하세요. 이번에는 TCA로 디버깅하는 방법에 대해 알아볼게요. (TCA 0.54.0 기준으로 작성했으며, 전체 코드는 여기를 봐주세요!) __printChanges() 함수를 사용하면 콘솔 로그에서 State 값이 어떻게 바뀌고 있는지 한눈에 볼 수 있으며, 어떤 Action이 발생했는지와 내부에서 어떤 Action이 전달되고 있는지를 확인할 수 있습니다. 참고로 __printChanges는 Debug Configuration 일 때만 로그를 남기므로, #if DEBUG로 분기처리를 할 필요가 없습니다 :) __printChanges는 크게 2군데에서 사용할 수 있으며, 기능에 약간의 차이점이 있습니다. Reducer WithViewStore Reducer에서 __printChanges 함수를 사용할..

안녕하세요. 저번엔 TCA를 활용하여 아주 간단한 예시를 만들어봤습니다. 정확하게는 TCA를 사용해서 사용자 Action 이벤트를 통해 State 값을 동기적으로 바꾸고 바뀐 값이 UI에 반영시키는 것을 경험해 봤어요. 제가 '동기적'이란 말에 강조를 했죠?? '동기'하면 동시에 '비동기'가 떠오르지 않나요??ㅎㅎ.. 맞습니다. 이번에는 TCA를 사용해서 비동기 API를 호출하는 방법에 대해서 알아보고 간단한 예시를 만들어볼게요. (TCA 0.54.0 기준으로 작성했으며, 전체 코드는 여기를 봐주세요!) TCA로 비동기 동작을 하고 싶을 때는 run과 TaskResult를 기억해야 합니다. 저번 TCA 예제를 다시 돌이켜보면, State 값을 (동기적으로) 변경하고 다른 추가 동작이 필요 없을 때 뭘 했..

안녕하세요. 이번에는 대표적인 튜토리얼로 많이 사용되는 카운터를 TCA로 만들어볼게요. TCA 0.54.0 기준으로 작성했습니다. 전체 코드는 여기를 봐주세요! 초기값 0부터 시작해서 간단하게 +/- 버튼이 있고 버튼을 누를 때마다 값이 증가하고 감소하는 앱을 만들어볼게요. 일반적으로 TCA의 State, Action, Reducer는 ReducerProtocol을 준수하는 구조체 안에 정의를 합니다. ReducerProtocol을 채택한 Counter 구조체를 만들어줄게요. 그다음은 ReducerProtocol을 채택한 구조체(=Counter) 안에 State, Action, Reducer를 정의할 차례입니다. 일단 State 먼저!! State는 UI를 그리거나 내부 비즈니스 로직을 수행할 때 필요한..

안녕하세요. 올해 3월쯤, iOS 앱 개발 미션이 들어왔어요. SwiftUI로 개발하기로 결정했고, 어떤 모듈을 사용할까 고민하던 중 The Composable Architecture (일명 TCA) 라는 것을 알게 되었습니다. 짧은 고민 끝에, TCA를 채용하기로 결정했고 현재 앱 개발이 완료된 상태입니다. 그래서 한동안은 실제 앱 개발을 통해 얻은 TCA 관련 지식과 활용 방법에 대해서 시리즈로 정리해 볼까 해요. 이번 글은 TCA 개요 정도에서 글을 마무리하고, 다음 TCA 시리즈부턴 실제 코드를 보면서 글을 써보겠습니다. ## Overview 공식 명칭은 The Composable Architecture 이고, 줄여서 TCA라고 말합니다. TCA는 SwiftUI 뿐만 아니라 UIKit에서도 사용..

안녕하세요. 그동안 대충은 알고 있었던 SwiftUI의 View Lifecycle에 대해서 정확하게 알고 가는 시간을 가져볼게요. 개인적으로 Lifecycle 개념도 중요하지만, Lifecycle이 정확하게 언제 호출되는지 (ex. 렌더링 전? 뷰 계층 제거된 후?)도 중요하다고 생각하기 때문에 로그 찍어보면서 하나씩 살펴보려고 합니다. (관련 공식 문서가 별로 없더라구요.. 그래서 추측성 분석이 될 수도 있을 것 같아요ㅠ) # Lifecycle method ## onAppear View가 보이기 전에 action을 수행하는 함수입니다. View가 첫 렌더링 되기 전에 action 클로저가 끝나는 것을 보장합니다. 그래서 아래처럼 onAppear에 수행시간이 오래 걸리는 action을 등록하면, 그만큼 ..

안녕하세요. overlay와 matchedGeometryEffect 수식어를 잘 활용해서 SwiftUI에서 Hero Animation과 비슷하게 만드는 방법을 가볍게 공부했고 기록 목적으로 글을 쓰려고 합니다ㅎㅎ matchedGeometryEffect 에 대해선 정리해 둔 글이 있으니 참고해 주세요! matchedGeometryEffect 안녕하세요. 이번에는 matchedGeometryEffect에 대해 공부해 볼게요. # matchedGeometryEffect matchedGeometryEffect는 SwiftUI의 수식어 중 하나입니다. Defines a group of views with synchronized geometry using an identifier and namesp phillip5..

안녕하세요. 요즘 SwiftUI 글이 부쩍 많아진 것 같네요ㅎㅎ 이번엔 커스텀 LabelStyle을 만들고 적용까지 해보는 시간을 가져보려고 합니다. (어렵지 않으니 가볍게 예제 몇 개만 살펴보고 마무리하겠습니다.) Label은 기본적으로 아래처럼 Icon & Title 형태로 화면에 출력됩니다. 여기서 LabelStyle을 잘 활용하면 Icon과 Title 사이의 여백을 더 늘린다던지, Icon과 Title 순서를 바꾼다든지 등 원하는대로 커스텀 할 수 있어요. 몇 가지 예시를 살펴볼게요. 아래 코드는 Title의 색깔만 지정한 색으로 설정할 수 있도록 커스텀 LabelStyle을 정의한 것입니다. LabelStyle 프로토콜을 준수하는 구조체를 정의하고, Label 뷰에 labelStyle 수식어의 ..

안녕하세요. 이번에는 정말 간단하지만 몰랐었던... RoundedCornerStyle에 대해 빠르게 알아볼게요. 다들 RoundedRectangle은 아시죠? 저는 RoundedRectangle 뷰를 사용할 때 생성자에 cornerRadius(또는 cornerSize)만 인자로 넘기고 있었는데, 지금 보니까 style이란 파라미터도 있더라구요. RoundedRectangle 생성자에 사용되는 style 파라미터는 RoundedCornerStyle이란 enum으로, RoundedRectangle의 모서리 모양을 정의합니다. case는 총 2가지가 있습니다. circular : RoundedRectangle 모서리가 1/4 원 형태 continuous : RoundedRectangle 모서리가 연속된 곡률 ..

안녕하세요. SwiftUI의 ScrollView는 컨텐츠 영역이 화면 영역보다 크든 작든 항상 스크롤이 가능합니다. 만약, 컨텐츠 영역이 화면 영역보다 작은 경우 스크롤이 안되도록 하고 싶으면 어떻게 구현해야 하지?? 라는 생각이 들었고.. 그 방법을 구글링해서 찾았습니다ㅎㅎ... 제가 구현한 것은 아니기 때문에... 이번에는 구글링한 코드를 분석하는 시간을 가져볼까 합니다. (출처와 함께 전체 코드도 함께 첨부하니, 필요하실 경우 참고해 주세요.) # 출처 https://stackoverflow.com/questions/62463142/swiftui-make-scrollview-scrollable-only-if-it-exceeds-the-height-of-the-screen SwiftUI: Make S..

frame 수식어에 대해 잘못 알고 있었던 것 같아서, 관련해서 내용 정리해보려고 합니다. frame(width:height:alignment:) 수식어를 사용하면 영역 크기를 고정 크기(fixed size)로 설정할 수 있습니다. 그리고 Circle 같은 뷰들은 해당 뷰가 위치한 영역 크기만큼 딱 맞게 설정됩니다. 그래서 아래 예시처럼 Circle이랑 frame 수식어를 같이 사용하면 50x50 짜리 원이 생깁니다. 이번엔 50x50짜리 Circle 뷰에 추가 frame 수식어로 200x200 크기를 줘볼게요. Circle은 가능한 영역만큼 최대한 확장을 할 테니 200x200 짜리 원이 생길 줄 알았는데, 50x50 짜리 원은 그대로 유지되고 추가로 200x200 만큼 영역을 잡더라구요. 위 예시를..