SwiftUI/MVVM 알아보기
-
lottie-ios 프레임워크와 UIViewRepresentable 을 이용한 LoadingView 구현SwiftUI/MVVM 알아보기 2020. 8. 27. 20:44
로띠(lottie) 는 json 형식의 움직이는 이미지 포맷으로 aribnb에서 개발되었고 많은 웹이나 앱에서 사용되고 있다. UIKit과 SwiftUI에서는 직접 이를 지원하지 않으므로 lottie-ios 프레임워크를 Pod을 통해 설치하고 이를 통해서 LottieView를 구현할 수 있다. SwiftUI는 지원하지 않는 UIKit의 WebView 나 MapView등 사용하기 위해 UIViewRepresentable 프로토콜을 정의하고 있고 이를 구현함으로 써 쉽게 이를 SwiftUI로 전환 할 수 있다. 여기서는 lottie-ios 프레임워크와 UIViewRepresentable 프로토콜 구현을 통해 LottieView를 구현하고 이를 통해 날씨 정보를 로딩 하는 중 이를 화면에 표시하는 Loding..
-
SwiftUI 에서 CoreLocation 사용SwiftUI/MVVM 알아보기 2020. 8. 27. 15:49
이 전 블러그에서 텍스트 필드에서 입력받은 도시의 날씨를 표현하는 앱을 구현하였다. 이미지 location.fill 위치에 버튼을 추가하고 CoreLocation을 이용해 현재 좌표에 대한 날씨를 조회하도록 기능을 추가해 보자. 이 보다 먼저 ContentView의 body에서 상단 바와 날씨 정보를 보여주는 위젯을 Extract Subview를 이용해 두 영역을 하위 뷰로 분리한다. 위의 그림처럼 분리하고자 하는 VStack에 커서를 두고 ⌘ 누르고 마우스의 왼쪽키를 클릭하면 메뉴바가 나오는데 여기서 Extract Subview를 통해서 쉽게 분리할 수 있다. 뷰는 아래와 같은 구조를 가진다. struct ContentView: View { ... var body: some View { ZStack {..
-
SwiftUI MVVM 모델SwiftUI/MVVM 알아보기 2020. 8. 27. 04:45
이전 블러그에서 스트리보드를 이용한 MVC 모델에 대해서 살펴 보았다. MVC 모델은 ViewController 에 대부분의 코드가 위치하게 되고 UI 에 대한 액션도 ViewController에서 처리하고 데이터 모델을 직접 뷰에 설정해야 했다. SwiftUI 에서는 뷰 모델은 모델 데이터가 변경된 경우 이를 뷰에 통지한다. 뷰는 변경사항에 대한 통지를 받은 경우 뷰를 다시 그리게 된다. 이는 Obsever 패턴과 바인딩을 이용해 구현되어 있다. 이제 실제 어떻게 MVVM을 이용해 날씨 앱을 변경할 수 있는지를 살펴 보자 . ContentView.swift import SwiftUI struct ContentView: View { // ViewModel의 통지를 받을 수 있도록 @ObservedObje..
-
iOS 의 MVC 모델SwiftUI/MVVM 알아보기 2020. 8. 26. 00:21
iOS 앱을 제작 시 스토리 보드를 이용하는 경우는 MVC 패턴에 따라 프로젝트를 구성하고 구현하게 된다. 이는 iOS의 프레임워크가 이를 기반으로 구성되어있기 때문이다. openweather api 를 통해 도시에 대한 현재 날씨를 가져와 화면에 보여주는 간단한 예제를 통해 MVC 패턴에 대해 알아보고 SwiftUI 가 MVVM 패턴을 적용한 이유에 대해서 살펴보자. openweather api 는 REST API로 해당 요청에 대해 JSON 포맷에 대해 결과 값을 반환하는 구조로 이루어진다. 이를 사용하기 위해서는 openweather 웹사이트에서 무료로 키를 발급 받고 이 키값을 HTTP 요청에 다른 파라미터와 함께 전달해야한다. urlString = https://api.openweathermap..