iOS/SwiftUI19 Swift Enclosure vs Closure, ViewBuilder? SwiftUI의 ViewBuilder 를 공부하다 이런 표현이 나왔다. (Raywenderlich SwiftUI by tutorials p.386) This provides a view inside the ForEach loop that you passed in. ForEach uses a ViewBuilder to create a parameter for the view-producing enclosure. You’ll now update the GridView so it can take such an enclosure to define the contents of each cell in the grid. view-producing enclosure, take such an enclosure to de.. 2020. 10. 27. #15 Complex Interfaces SwiftUI는 UI 디자인의 새로운 패러다임을 제시한다. UIKit 이나 AppKit 이나 다른 framework에서 제공하는 기능이 전부 같진 않다. 좋은 뉴스는 UIKit 이나 AppKit으로 만든 모든걸 SwiftUI로 재창조 할 수 있다는 점이다. SwiftUI 이전에 앱을 만들었다면 이미 만들어 놓은 custom control들이 있을 것 이다. SwiftUI는 UIkit 이나 AppKit과 협력하여 view 와 view controllers에 있던 view 를 재사용 할 수 있다. SwiftUI는 framework 기반으로 build 하고 없는 기능을 추가할 수 있다. 이 기능을 사용하면 기본 프레임워크 내에서 기능을 복제하거나 확장할 수 있다. 이번 챕터에서는 UIKit으로 된 open s.. 2020. 10. 27. #14 Animations Animation의 필요성 good app 과 great app의 차이는 detail 에서 온다. 적재적소에 Animation을 사용하는 건 사용자에게 즐거움과 다른 앱과의 차별성을 줄 수 있다. Animation 은 앱 사용을 더 즐겁게 만들고 특정 영역에 사용자를 집중 시킬 수 있다. 좋은 Animation은 앱을 매력적이고 사용하기 쉽게 만들어 준다. SwiftUI 에서의 Animation AppKit 이나 UIKit 보다 훨씬 간단하다. SwiftUI Animation은 지루한 작업을 모두 처리하는 더 높은 수준의 추상화 이다. animation들을 합치거나 겹치거나 고려할 사항없이 그냥 멈출 수 있다. state 관리의 복잡성은 framework 가 담당한다. 복잡성과 edge case 를 처리.. 2020. 10. 27. #16 Testing & Debugging 앱에 테스트를 추가하면 자동으로 앱이 예상 한대로 작동하는지 확인할 수 있다. 테스트에서 코드가 예상대로 작동하는지 확인할뿐만 아니라 향후 수정으로 인해 기존 기능에 영향을 주는 지 확인 할 수 있다. 이 장에서는 SwiftUI 앱에서 UI 테스트를 구현하는 방법과이 새로운 패러다임에서 UI를 테스트 할 때 주의해야될 점에 대해서 알아본다. Different types of tests 앱에서 사용할 테스트에는 세 가지 유형이 있습니다. 복잡성이 증가하는 순서대로 단위 테스트 (unit test) 통합 테스트 (integration test) 사용자 인터페이스 테스트 (ui test) unit test 모든 테스트의 기초이자 다른 모든 테스트의 기초는 unit test 이다. 각 unit test는 함수가.. 2020. 10. 26. SwiftUI in UIKit vs UIKit in SwiftUI SwiftUI : declare the user insterface and behavior for your app on every platform UIKit : construct and manage a graphical, event-driven user interface for your iOS or tvOS app SwiftUI 프레임워크를 적용할 때 2가지 옵션이 있다. SwiftUI 프로젝트에 UIKit 통합하기 (UIKit 과의 data dependency 가 있는) UIKit 프로젝트에 SwiftUI 통합하기 UIKit 프로젝트에 SwiftUI를 통합하는 방법 SwiftUI 로 작성된 ContentView를 준비한다. storyboard에 Hosting Controller 를 만들고 segue를 .. 2020. 10. 26. SwiftUI size rendering algorithm SwiftUI 에서 size 를 결정하는 방식은 UIKit 과 다르다. UIKit 은 parentView 를 기준으로 childView 의 size를 결정하는 반면 SwiftUI는 childView를 기준으로 parentView 가 resizing 될 수 있다. (물론 parentView 가 몇가지 size를 child 에게 제안한다.) 순서대로 나열해 보자면 1. The parent view determines the available frame at its disposal. 본인이 제공가능한 view size 계산해서 2. The parent view proposes a size to the child view. 그걸 child 에게 제안한다. 3. Based on the proposal from t.. 2020. 10. 26. #13 Drawing & Custom Graphics 더 복잡한 앱을 개발하기 시작하면 SwiftUI가 제공하는 기본 제공 컨트롤보다 더 많은 custom 을 위한 유연함이 필요하다. SwiftUI는 앱 내에서 그래픽 생성을 지원하는 풍부한 라이브러리를 제공한다. 그래픽은 사용자에게 정보를 효율적이고 이해하기 쉽게 전달한다. 예를 들어, 동일한 정보를 그래픽으로 보는게 읽는 것 보다 시간이 덜 걸린다. 이 장에서는 공항 앱을위한 몇 가지 awards 그래픽을 만들어 SwiftUI에서 그래픽을 사용해본다. Creating shapes starter project 에는 작은 공항을 위한 앱이 있다. 3개의 award 뱃지를 만들 것 이다. 뱃지를 그릴 FirstVisitAward.swift 파일을 만들고 AirportAwards.swift 에 FirstVisi.. 2020. 10. 23. #12 Conditional Views 이전 챕터에서는 대표적인 navigation을 연습해봤다. 이번장에서는 특정 조건에서만 보여지는 view (conditional view) 에 대해서 배워본다. conditional view 는 특히 사용자의 현재 상황에서 다음 상황으로 넘어가기 전 중요한 메시지를 보여주거나 사용자로 응답을 받아야 하는 경우에서 유용하게 쓰인다. navigation stack 외부에서 view 를 보여주는 것은 사용자는 해당 view의 작업에 집중할 수 있다. 또한 필수적인 정보를 보여주거나 필요한 정보를 요청하는 방법을 제공한다. starter 프로젝트는 tab-navigation 으로 구성된 구조가 있다. 이 구조에서 SwiftUI 가 제공하는 여러 conditional view 를 사용해 볼 것 이다. Displa.. 2020. 10. 23. #11 Lists & Navigation single view 인 앱은 거의 없다. 대부분의 앱들은 여러개의 view 를 가지고 그들 사이를 부드럽게 navigate 할 수 있는 방법을 제공해야 한다. navigation 을 설계할 때는 여러 요구 사항의 균형을 맞춰야 한다. 데이터를 사용자에게 논리적으로 제공해야 하며 특정 작업을 수행하는 방법을 쉽게 파악할 수 있도록 해야한다. SwiftUI는 데이터를 보여주면서 navigation을 관리할 수 있는 통일화된 interface를 제공한다. 이번 챕터에서는 view 들 간의 여러 type 의 navigation을 쌓으면서 어떻게 데이터를 사용자에게 나타내는지에 대해서 배우게 될 것 이다. Getting started starter 프로젝트를 열면 공항을 위한 앱의 초기버전이 들어있다. 이번 챕.. 2020. 10. 22. #10 Gestures 모바일 앱의 UI를 개발하는데 있어 동적인 요소들은 시각적으로 부드럽게 화면이 업데이트되는 경험을 줄 수 있다. 이번 챕터에서는 제스쳐와 같은 user interaction이 어떻게 추가되고 합쳐지고 custom 하게 전달되서 특별한 사용자 경험을 줄 수 있을 지에 대해서 알아본다. Kuchi 앱에서 탭바를 추가해 새로운 단어를 배우는 화면을 추가할 것 이다. Adding learn feature 두개의 탭으로 구성된 탭바를 만들 것 이다. 배우는 화면 (이번에 만들 것이다) 기존 challenge 화면 먼저 배우는 기능을 할 최상위 empty view 를 만들어 준다. 여러개의 파일로 구성될 것인데 Learn group으로 묶어준다.(practice folder 와 같은 level 에 위치한다.) 그리.. 2020. 10. 22. #9 State & Data Flow 이전 챕터에서는 UI를 만들기 위해 자주 사용되는 UI component를 사용해보았다. 이번 챕터에서는 SwiftUI의 또다른 특징인 state: "상태" 에 대해서 배워본다. MVC: The Mammoth View Controller UIKit 이나 AppKit에서 MVC 컨셉에 대해서 익숙할 것 이다. 원래는 Model-View-Controller 의 개념이지만 Massive View Controller 라는 별명도 가진다. MVC에서 View 는 UI를 담당하고 Model 은 데이터, Controller 는 그 둘을 동기화 시켜주는 접착제 역할을 한다. 하지만 그 역할은 자동으로 되는게 아니라 view 가 update 되고 data가 바뀌는 모든 case 를 고려해 명시적으로 코드를 작성해야 한다.. 2020. 10. 22. #8 Introducing Stacks & Containers 이전까지 TextField, Button, Slider, Toglgle 과 같이 흔히 쓰이는 SwiftUI control 에 대해서 배워봤다. 이번 챕터에서는 연관된 view들을 묶는 container views 에 대해서 배워볼 것이다. Layout and priorities UIKit 과 AppKit 에서는 view 에 제약조건을 주기 위해 Autolayout을 사용했다. 보통의 규칙은 parent view 기준으로 child view의 사이즈를 결정하고 contraint 를 추가하는 것 이였다. (child view의 width 와 height 가 명시되있지 않으면) 반면에 SwiftUI는 반대로 동작한다. child view 가 parent 가 제시한 size 에 따라 크기를 선택한다. 만약 Te.. 2020. 10. 22. Inset이 뭘까 매개 변수를 제공하지 않으면 SwiftUI는 네 방향 (상단, 하단, 선행 및 후행) 및 .stretch resizing mode 모두에 대해 inset 이 없다고 가정합니다. 여기서 말하는 Inset 이 뭘까 더 큰 물체 내에 위치하고 있는 무언가 라고 사전은 설명한다. 그럼 Bound 와 Frame 과 같은 건가 싶기도 한데 iOS - Difference Between Offset And Inset When Setting UIView Shadow? iOS - Difference Between Offset And Inset When Setting UIView Shadow? So I wanted to put a 5 pixel shadow on my UIView on the top, left, and ri.. 2020. 10. 21. #7 Controls & User Input 이전 장에서 Text와 Image를 배워봤다면 이번장에서는 자주 사용하는 control 에 대해서 배워본다 (TextField, Button, Stepper) A simple registration form 이름 적는 등록 화면을 만들어 볼 것이다. A bit of refactoring 대부분의 경우 재사용성과 코드의 간결함을 위해 리팩토링 작업이 필요하다. 그래서 WelcomView 리팩토링 부터 시작한다. 배경화면 이미지 컴포넌트화 배경화면 이미지를 담을 새로운 SwiftUI view 파일을 만들고 배경 코드를 복붙한다. 그리고 다시 ContentView 에서 중복되는 코드 부분을 방금 만든 컴포넌트로 대체한다. 두가지 리팩토링을 더 진행해봐라 LogoImage.swift : Welcome view .. 2020. 10. 21. #6 Intro to Controls: Text & Image Intro SwiftUI 를 배워보니 UIKit은 옛날 방식 같지 않는가? 이전 챕터에서는 SwiftUI 의 수박 겉핥기였다. 이번 챕터에서는 UI 개발에서 가장 많이 사용되는 control들을 가지고 작업해볼 것이다. (UIKit 와 AppKit 에도 있는) Getting started Kunchi 라는 language flashcard 앱을 다음 5장 동안 만들어 볼 것이다. starter 프로젝트를 열어보면 거의 비어있는걸 볼 수 있다. Welcome 그룹에서 새롭게 SwiftUI view 를 추가한다. (이름: WelcomeView.swift) Changing rootview 방금 만든 Welcome.swift 라는 SwiftUI view 를 시작점으로 설정해야한다. SceneDelgate 에서 .. 2020. 10. 21. #5 The Apple EcoSystem 이 챕터의 목적 애플 디바이스 생태계에서 각 플랫폼별 장점(strong) 과 단점?(not-so-strong) 에 대해서 알아보고 BullsEye app 을 iOS 가 아닌 다른 OS를 사용하는 디바이스에 맞게 modify 해본다. 애플에 따르면 SwiftUI는 모든 디바이스를 위한 앱을 가장 간단하게 만들 수 있다. 하지만 그것은 하나의 앱으로 모든 디바이스에서 돌릴 수 있다는 건 아니다. (대부분 그럴 수 있긴 한데 어느정도 device 에 맞는 configure 이 필요함) 다시말하자면 진짜 워치부터 티비랑 맥북까지 다 같은 앱으로 각 플랫폼이 가지는 장점을 무시할거냐 이다. 사람들은 상황에 맞게 다른 device를 다른 시간동안 사용한다. 예를들어 시계는 항상 차고 다니지만 가끔 중요한 정보만을 .. 2020. 10. 20. #4 Integrating SwiftUI SwiftUI 는 너무 씽나서 앱 전체에 사용하는 걸 참을쑤가 없써!! 하지만 많은 앱들은 이미 UIKit으로 개발되어 있어서 코드 전체를 SwiftUI로 다시 짤 수 는 없는데 어떻게 하면 좋을까? 당연히 Apple이 그 생각도 했지. 이미 개발된 UIKit 앱에 SwiftUI view를 추가하는 것을 "super-easy" 하게 만들어 놨다. 조금 코드를 더 작성하면 SwiftUI view 와 데이터를 교환하는 UIKit view 도 만들수 있다. 이런 부분을 통해 SwiftUI Control의 단점을 극복할 수 도 있을 것 이다. *hosting 이라는 용어는 UIKit 앱이 SwiftUI view 를 host 할 수 있어서 붙여진 용어이다. (반대로도 가능) 이번장에서 배울 것은 Host Swif.. 2020. 10. 20. #3 Understanding SwiftUI 선언형 프로그래밍 와 데이터 의존성 알아보고 어떻게 앱 디자인을 다르게 생각할 수 있을지 배운다. 왜 SwiftUI IB의 단점 Interface Builder와 스토리보드는 앱을 빠르게 만드는데 있어 많은 도움이 되었고 적응형 유저 인터페이스와 네이게이션을 위한 segues를 세팅하는걸 쉽게 만들어 주었다. 하지만 많은 개발자들은 view를 코드로 작성하고 싶어했고 왜냐하면 UI 를 코드로 작성했을 때 더 효과적으로 복사하거나 편집을 할 수 있기 때문 대부분 IB 와 스토리보드는 내부적으로 코드들이 적용되어 IBAction 이나 IBOutlet 을 코드에서 지우거나 이름을 수정했을 때 앱이 크래쉬나는걸 볼 수 있었다. (왜냐하면 IB는 코드의 변화를 보지 못하기 때문이다.) segues의 경우도 문자열.. 2020. 10. 19. #2 SwiftUI Getting Started SwiftUI Project 생성시 LifeCycle 선택 UIKit 이랑 SwiftUI 차이점?? SceneDelegate in SwiftUI SceneDelegate 는 그 자체로 SwiftUI 전용이 아니다. 아래 코드가 SwiftUI를 위한 viewController를 만들어준다. if let windowScene = scene as? UIWindowScene { let window = UIWindow(windowScene: windowScene) window.rootViewController = UIHostingController(rootView: contentView) self.window = window window.makeKeyAndVisible() } UIHostingController .. 2020. 10. 19. 이전 1 다음
