Jacob's DevLog ✍️

07.Authentication in SwiftUI

Sun, 02 Apr 2023 00:00:00 +0000

1.Email Authentication

2.Google Authentication

3.Apple Authentication

4.Anonymous Authentication

5.Deleting Authentication

🔶 🔷 📌 🔑

Reference

Firebase - https://firebase.google.com/docs/ios/setup?hl=ko

swiftui thinking - https://youtu.be/sHWX5j6wUjA

06.Connect Firebase to Xcode in SwiftUI

Tue, 28 Mar 2023 00:00:00 +0000

1.Project 기본적인 Setup

Firebase 사이트가서 신규 프로젝트 생성하기

https://firebase.google.com/?hl=ko

Xcode 프로젝트에서 Singing & Capablities 에서 Bundle Indentifier 에서 주소를 복사해서 Apple bundle ID 에 붙여 넣기

Download config file 에서 GoogleService-info.plist 를 다운받아서 xcode 에 plist 파일을 추가한다.

2.SPM 으로 Firebase 설치하기

Add Firebase SDK

Xcode 에서 File -> Add package 로 가서 firebase github 주소를 복사 넣기 하면 됨

여기서는 사용할 Package Product 를 사용해서 firebase-ios-sdk 를 설치하여 원하는 것만 설치한다 기본적으로 analytic 과 Swift 는 기본적으로 선택해주고 필요한것은 나중에 추가로 설치해주면 된다

3.SDK 설정

페키지를 설정하면 SwiftUI 상에서 initialize 초기화를 해주어야 함

Xcode App 최상단에서 Firebase 불러오기

import SwiftUI
import Firebase

@main
struct SwiftUIFirebaseBootCampApp: App {

	// App Delegate 불러오기
	@UIApplicationDelegateAdaptor(AppDelegate.self) var delegate

	var body: some Scene {
		WindowGroup {
			ContentView()
		}
	}
}


// UIKit 에서 AppDelegate 를 사용하는데 app 의 root 뿌리 시작점이라고 보면 됨 -> 앱이 구동될때 가정 먼저 실행되는 함수라고 보면 됨

class AppDelegate: NSObject, UIApplicationDelegate {
	func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {

		FirebaseApp.configure()
		print("Firebase 초기화!")

		return true
	}
}

🔶 🔷 📌 🔑

Reference

Firebase - https://firebase.google.com/docs/ios/setup?hl=ko

swiftui thinking - https://youtu.be/sHWX5j6wUjA

TCA Architecture in SwiftUI

Sun, 05 Feb 2023 00:00:00 +0000

1. TCA 이란?

The Composable Architecture 의 약자로서 PointFree 에서 소개된 앱구조 라이브러리 입니다

TCA Official Github - https://github.com/pointfreeco/swift-composable-architecture

TCA는 단방향 Flow architecture 로써 단방형으로는 Redux, MVI, ReactorKit 과 같은 구조와 비슷한 Architecture 입니다.

2. TCA Diagram

크게 2가지로 나누면 View 와 Store 가 있고, 그 Store 안에는 Action, Reduce, State 이 있습니다

State

A type that describes the data your feature needs to perform its logic and render its UI.
상태값인데 action 에 따라서 로직이 랜더되고 그것이 UI View 에 나타 내는것

Action

A type that represents all of the actions that can happen in your feature, such as user actions, notifications, event sources and more.
상태와 연결되어 있는데 Action 은 State 에 어떠한 이벤트 동작을 가리킴

Reducer

A function that describes how to evolve the current state of the app to the next state given an action. The reducer is also responsible for returning any effects that should be run, such as API requests, which can be done by returning an Effect value.
실제로 Action 들이 들어 왔을때, 상태를 어떻게 변경을 할 건지에 대해서 나옴 예시로 API 요청하면 Effect 을 return 을 함

Store

The runtime that actually drives your feature. You send all user actions to the store so that the store can run the reducer and effects, and you can observe state changes in the store so that you can update UI.
Store 가 View를 제외한 나머지부분을 관할한다고 보면됨. Store 를 통해서 Action 들이 들어오고, Reducer 를 통해서 비지니스 로직을 변경이 되면서 State 를 변경시킴 -> Store 에서 View로 UI 를 업데이트 시켜줌

데이터의 흐름은 다음과 같습니다.

View 에서 어떠한 상태 변화나, 이벤트를 실행을 하게 되면 Action 에 신호를 전달합니다
그 이후에 Reduce 는 그 로직을 처리하고 결과 값을 State 에 넘겨 줍니다
그러면 새로운 State 값은 update 되어서 새로운 View 에 적용하게 됩니다

3. MVVM 과의 차이점

MVVM 을 ViewModel 이 State를 가지고 있다고 보면되는데, MVVM 자체로는 ViewModel 안에서 로직처리도 있지만, State 와 Action 들이 같이 묶여져 있지 않고 즉, 바인딩 되지 않아서 따로 논다는 점
TCA 는 스토어에서 종합적으로 로직, state, action 등을 하나로 종합적으로 처리한다는 것임. 쌍으로 묶어서 처리한다고 보면 됨

4. TCA 를 사용해야되는 이유?

Better State Management: State 를 View 에서 분리를 시켜서 Reduce function 에서만 State 를 변경할 수 있고, functional 하게 state 를 처리할 수 있다는 장점이 있고 -> 로직이 간결해짐
Easy to debug: 데이터의 흐름이 단방향이기 때문에 Reduce 함수 내부에서 Action 과 State 가 어떻게 처리되는지만 보기때문에 Debugging 이 쉬워짐 (양방향인 MVVM 같은경우 코드가 복잡해질때 debug 가 찾아내기가 어려움)
Enhance Testability: View 와 Logic 을 아예 분리 했기 때문에 Reduce 에 있는 로직만 test 하면되기때문에 Test 효과 향상됨
Modularization (Composability): Reduce 라는 것이 하나의 모듈로 분리를 할 수 있기 때문에 재사용 가능하게 reduce 를 사용할 수 있음

🗃 Reference

개발하는 정대리 - https://youtu.be/fYQ9YnbvasU

스위프트하이 - https://www.youtube.com/watch?v=vU_pRzQMoho

코드 스쿼드 - https://www.youtube.com/watch?v=2DO420E9lvs

UICollectionView

Fri, 03 Feb 2023 00:00:00 +0000

🔷 UICollectionView

UICollectionView official docs - https://developer.apple.com/documentation/uikit/uicollectionview

특징

UICollectionView 유연하게 변경 가능한 레이아웃을 사용하여, 특정 타입 형태로 정렬된 데이터 집합을 표시하는 방법임.
일반적으로 항목을 격자와 같은 배열 형태로 나타내는것이지만, iOS 의 CollectionView 는 행과 열의 나열 뿐만 아니라, 다양한 배열 구현을 가능하게 하여 Grid, Stack, 원형 레이아웃, 동적으로 변경되는 레이아웃 모두 UICollectionView 로 만들 수 있음

🔷 UICollectionView 를 구현하기 위한 Class 와 Protocol

데이터가 화면에 배열 되고, 표시되는 방식과 표시되는 데이터를 분리하도록 디자인 되어 있음 표시할 데이터를 엄격하게 관리 하는 동시에, 시각적인 다양한 객체에서 관리가 되게 된다

위의 표에서 대부분의 class 는 하위 클래스 화 할 필요 없이 있는 그대로 사용하도록 설계 되었기 때문에, 상대적으로 적은 코드로도 복잡한 UI 를 쉽게 구현할 수 있음

🔷 Top-level Containment and Management

최상위 레벨에서 관리 역활을 하는 UICollectionView, UICollectionViewController 는 최상위 UIScrollView 를 상속하기 때문에 Layout 정보 기반 데이터를 쉽게 표시함

🔷 Content Management

데이터 소스는 UICollectionView 와 연결된 가장 중요한 객체로써, 반드시 제공해야되는 객체임

CollectionView 에서 발생하는 특정 action 이나, 상황을 catch 해서 View 의 동작을 사용자 지정 할 수 있음, 이거는 Optional 임, 즉 DataSource 를 구현하지 않고서는 UICollectionView 를 나타 낼 수 없음

🔷 Presentation

UICollectionView 에 표시되는 모든 View 는 Collection reusable class 에 instance 이어야 함 재사용 메커니즘을 지원하는데, 매번 새로운 View 를 만드는 대신해서 같은형태로 재사용 가능하게 함.

🔷 Layout

하위 클래스들을 layout 객체로 묶어서 가리키며, 위치, 크기, 시작적 속성 이런것들을 정의하는 역활을 함. App 에서 관리하는 데이터 객체를 관리하지 않고도 Layout 을 동적으로 변경할 수 있음

🔷 Flow Layout

Grid 나 기타 선 기반의 레이아웃을 사용하는데, class 를 있는 그대로, delegate 와 함께 사용하기 때문에 layout 을 동적으로 사용자 정보를 지정할 수 있게 도와줌

Layout metric 을 나타내는 layout 객체

세로 스크롤의 flow 레이아웃이 cell, header, footer 이러한 supplementally 뷰를 정렬할때를 나타냄

🔷 5가지 요소를 합쳐 CollectionView 가 표시되는 모습

🔶 🔷 📌 🔑 👉

🗃 Reference

인프런 강의 제작 후기 - SwiftUI Basic with iOS 16

Fri, 03 Feb 2023 00:00:00 +0000

SwiftUI Basic 강의 제작 후기 - 인프런

누구나 할 수 있는 SwiftUI Basic with iOS 16 - https://inf.run/fufJ

🔷 강의 제작 배경

2023년 1월 12일 인프런에서 SwiftUI Basic 강의를 기획, 제작, 편집을 한 Jacob Ko 입니다. 작년 22년 3월쯤? 강의를 한번 제작해봐야겠다고 결심한 이후로 출시까지 약 10개월의 시간이 걸렸습니다.

제작하기로 결심한 계기는, SwiftUI 가 최신 Framework 이다 보니, 국내 자료가 많이 없고 제가 배운 내용들을 정리하면서 영상 제작 하기로 마음 먹었었습니다.

🔷 강의 특징

Basic Core - SwiftUI 기본적인 부분에서 실무에서 꼭 알아둬야 하는 것들을 정리 하였습니다.

Clone Coding - AppStore “멸종위기동물사전” App을 클론코딩하면서 배운 내용들을 복습하면서 재대로된 App 을 만드는 실습 부분을 다뤘습니다.

Latest Version - 최신 업데이트된 iOS15, iOS16 부분에 대한 사항을 Bonus 강의로 다뤘습니다.

🔷 강의 제작 후기

제작 초반에는 스크립트도 잘 만들고, 녹음도 순조롭게 진행되었지만, 시간이 갈수록 편집의 압박이 컸습니다. 전문적으로 영상 편집을 직업으로 하는 사람이 아니기때문에 시간도 많이 걸리고, 중간에 음… 아… 부분을 컷편집하는게 많아서 꽤 힘든 작업이였습니다.

처음에는 3개월이면 만들수 있다는 계획을 잡았으나, 하면할 수록 처음에 강의 계획한 범위가 너무 크다는 것을 깨달았지만, 그래도 매일매일 조금씩 하다보니 23년 1월이 되서야 완료했습니다.

나름 뿌듯하고, 잘 운영되고 있어서 영상제작하면서 많은 배움이 된거 같아서 감사했습니다.

앞으로도 중급 강의도 잘 준비해서, 인프런에서 찾아 뵙겠습니다~

🔷 강의 쿠폰

Blog 를 통해 강의를 수강하시는 분들을 위해 수강 할인 쿠폰을 제공합니다 (선착순 100명 - 2023년 12월 31일 까지)

쿠폰 번호 9848-f20856241127

누구나 할 수 있는 SwiftUI Basic with iOS 16 - https://inf.run/fufJ

iOS 16 in SwiftUI

Mon, 28 Nov 2022 00:00:00 +0000

iPhone 14 출시와 함께, iOS 16버전이 출시 되었습니다. SwiftUI 에서도 어떠한 점들이 변경 되었는지 알아보겠습니다

1.Chart

SwiftUI 에서 기본적으로 Chart 기능이 생겨서 여러가지 형태의 그래프를 쉽게 만들수 있게 되었습니다.

struct WeightModel: Identifiable {
	var id = UUID().uuidString
	var day: String
	var weight: Double
}

var weigthData: [WeightModel] = [
	WeightModel(day: "Sun", weight: 77),
	WeightModel(day: "Mon", weight: 80),
	WeightModel(day: "Tue", weight: 90),
	WeightModel(day: "Wed", weight: 82),
	WeightModel(day: "Thu", weight: 70),
	WeightModel(day: "Fri", weight: 60),
	WeightModel(day: "Sat", weight: 88)

]

struct ChartBasic: View {
	var body: some View {
		// custom 색 array
		let barColors: [Color] = [.red, .black, .blue, .green, .yellow, .purple, .teal]
		ScrollView {

			VStack (spacing: 20) {

				Text("1.바형 차트")
				Chart(weigthData) { item in
					BarMark(
						x: .value("Day", item.day),
						y: .value("Weight", item.weight)
					)
					.foregroundStyle(by: .value("Day", item.day))
					//				.annotation(position: .top) {
					//					Image(systemName: "square.and.arrow.down")
					//						.foregroundStyle(.red)
					//				}
				} //: CHARTS
				// customColor
				.chartForegroundStyleScale(
					domain: weigthData.compactMap({ weight -> String in
						weight.day
					}),
					range: barColors
				)
				.frame(height: 200)

				Text("2.라인 차트")
				Chart(weightData) { item in
					LineMark(
						x: .value("Day", item.day),
						y: .value("Weight", item.weight)
					)
					//				.lineStyle(StrokeStyle(lineWidth: 10))
					.symbol(by: .value("Day", item.day))
					//				.foregroundStyle(.red)
					.interpolationMethod(.catmullRom) // 약간 곡선 형태
					//				.interpolationMethod(.stepEnd) // 계단식 형태

				} //: CHARTS
				.frame(height: 200)

		Text("3.사각형 차트")
				Chart(weightData) { item in
					RectangleMark(
						x: .value("Day", item.day),
						y: .value("Weight", item.weight)
					)
				} //: CHARTS
				.frame(height: 200)

				Text("4.범위 차트")
				Chart(weightData) { item in
					AreaMark(
						x: .value("Day", item.day),
						y: .value("Weight", item.weight)
					)
					.interpolationMethod(.catmullRom)

					RuleMark(
						y: .value("Mid", 75)
					)
					.foregroundStyle(.red)
				} //: CHARTS
				.frame(height: 200)

2.Half, Small Sheet

Sheet 사이즈를 Custom 해서 적용할 수 있습니다

struct HalfSheetBasic: View {
	@State var showSheet: Bool = false

    var body: some View {
		Button {
			showSheet.toggle()
		} label: {
			Text("Sheet 보이기")
				.font(.title)
		}
		.sheet(isPresented: $showSheet) {
			Text("Half Sheet 입니다")
			// Custom Size
				.presentationDetents([.small, .medium, .large])
				.presentationDragIndicator(.hidden)
		}

    }
}

// Sheet Size 더 작게 Custom
extension PresentationDetent {
	static let small = Self.height(100)
}

3.LinkShare

인터넷 사이트 링크, 텍스트, 이미지등을 SwiftUI 에서 쉽게 내보낼 수 있는 기능입니다.

struct ShareLinkBasic: View {
    var body: some View {
		var natureImage = ImageFile(image: Image("nature"))
		VStack (spacing: 20) {
			// New ShareLink
			ShareLink(item: URL(string: "https://jacobko.info")!) {
				Text("링크 Share")
			}

			// Share Images with the help of Transferable
			ShareLink(item: natureImage, preview: SharePreview("Nature 사진", image: natureImage.image)) {
				Text("이미지 Share")
			}
		}
    }
}

struct ShareLinkBasic_Previews: PreviewProvider {
    static var previews: some View {
        ShareLinkBasic()
    }
}

struct ImageFile: Transferable {
	var image: Image
	static var transferRepresentation: some TransferRepresentation {
		ProxyRepresentation(exporting: \.image)
	}
}

4.New Grid

Grid 에서 CellSize 라던지 Anchor 위치를 설정할 수 있게 되었습니다.

struct NewGridBasic: View {
	var body: some View {

		VStack (spacing: 20) {
			Grid {
				GridRow {
					Color.red
					Color.red
					Color.red
				} //: GRIDROW
				GridRow {
					Color.red
						.frame(width: 100, height: 100)
					Color.red
						.frame(width: 30, height: 30)
						.gridCellColumns(1) // Custom Cell Size
						.gridCellAnchor(.center) // Anchor point 위치 조절 가능
				} //: GRIDROW

			} //: GRID
			.frame(height: 200)

			Divider()

			Grid {
				GridRow {
					Color.blue
						.frame(width: 30, height: 30)
					Color.blue
						.frame(width: 30, height: 30)
					Color.blue
						.frame(width: 30, height: 30)
				} //: GRIDROW
				.gridCellUnsizedAxes(.horizontal) // Horizontal Axis 기준으로 배치

				GridRow {
					Color.blue
						.frame(width: 30, height: 30)
				} //:GRIDROW
			}  //: GRID
			.frame(height: 200)
		}  //: VSTACK
		.padding(20)
	}
}

5.NavigationStack

기존의 NavigationView 을 대채해서 NavigationStack 이 생겼습니다. Navigation 방식에 스택을 적용해서 page 간의 이동을 할 수 있게 되었습니다

struct NavigationStackBasic: View {

	// 스택 생성
	@State var stack = NavigationPath()

    var body: some View {
		NavigationStack(path: $stack) {
			NavigationLink("2번째 페이지 이동", value: 40)
				.navigationDestination(for: Int.self) { value in
					VStack (spacing: 20) {
						NavigationLink("3번째 페이지 이동", value: 100) // 3번째 페이지로 이동
						Text("나의 나이는 \(value) 입니다")
						Button {
//							stack.removeLast() // 이전 페이지로 이동 stack 의 마지막 부분 없앰
							stack = .init() // 완전 초기화면으로 이동
						} label: {
							Text("초기 화면으로 이동")
						}

					}  //: VSTACK
				}
		}  //: NAVIGATION
    }
}

6.Gauge View

게이지 표시를 쉽게 할수 있는 Gauge View 기능이 추가 되었습니다

struct GaugeViewBasic: View {
    var body: some View {
		let gradient = Gradient(colors: [.green, .yellow, .orange, .red])
		Gauge(value: 0.4, label: {

		}, currentValueLabel: {
			Text("40%")
				.font(.caption)
		})
		.gaugeStyle(.accessoryLinear)
		.tint(gradient)
		.padding()
    }
}

🗃 Reference

개발하는 정대리 - https://youtu.be/sADVK2mJ_XE parkgyurim - https://velog.io/@parkgyurim/iOS-SwiftUI-Kakao-Login x

카카오톡 로그인 in SwiftUI

Tue, 02 Aug 2022 00:00:00 +0000

카카오톡 로그인 기능 구현하기

Kakao API Docs - https://developers.kakao.com/docs

SNS 로그인 기능중 자주 사용하는 카카오 서비스를 통해서 사용자의 DB 정보를 카카오로부터 토큰값을 받아와서 SwiftUI 에서 구현하는 것입니다

1.프로젝트 생성

먼저 Kakao Page 에서 내 애플리케이션 에서 test 용 어플리케이션을 만듭니다.

아래의 그림과 같이 앱키 가 발급되는데 여기서 사용되는것이 네이티브 앱키 입니다

그리고 iOS 플랫폼을 등록 시켜줘야 하는데 여기서 필요한 것이 bundleID 입니다 (앱의 주소라고 보시면 됩니다)

2.iOS SDK 카카오톡 설치 (SPM)

https://developers.kakao.com/docs/latest/ko/getting-started/sdk-ios#apply-sdk-spm

앱내에서 설정해주기

info.plist 파일에서 커스텀 url 스킴을 넣어줘야 합니다

 <key>LSApplicationQueriesSchemes</key>
  <array>
      <!-- 카카오톡으로 로그인 -->
      <string>kakaokompassauth</string>
      <!-- 카카오톡 공유 -->
      <string>kakaolink</string>
  </array>

URL Schemes 설정하기

네이티브 앱키를 넣어주면 되는데, 이 키같은 경우에는 소스코드를 공유시 공유가 안되도록 하는것이 중요하기 때문에, 보안작업이 필요합니다

command + n 새파일 생성에서 검색 창에 config 치면 Configuration Setting File 을 생성해줍니다

그다음엔, info.plist 에서 KAKAO_NATIVE_APP_KEY 값을 등록 해줍니다

이렇게 하면 KAKAO_NATIVE_APP_KEY 을 메인 bundle 로써 가져 올 수 있게 됩니다

추가로 App Project 내에서 생성된 Config 파일을 사용할 수 잇도록 Debug, Release 환경에서 사용할 수 있도록 연결 시켜 줘야 합니다

🔑 장점은 보안이 필요한 API Key 라던지 app key 를 환경변수로 만들어서 사용하게 되면 관리도 편하고 키 노출을 막을 수 있습니다 또한 github 올릴때 .gitignore 에 등록하면 됩니다

# in .gitignore
# API Key 값 감추기
*.xcconfig

초기화 하기

SwiftUI 자체에서 초기화 하기

import SwiftUI
import KakaoSDKCommon
import KakaoSDKAuth

@main
struct KakaoAuthApp: App {
	init() {

		// 메인번들에 있는 카카오 앱키 불러오기
		let kakaoAppKey = Bundle.main.infoDictionary?["KAKAO_NATIVE_APP_KEY"] ?? ""

		// kakao SDK 초기화
		KakaoSDK.initSDK(appKey: kakaoAppKey as! String)
	}

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

App Delegate 을 설정해서 초기화 하기

// in MyAppDelegate.swift

import Foundation
import UIKit
import KakaoSDKCommon

class MyAppDelegate: UIResponder, UIApplicationDelegate {

	func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {

		// 메인번들에 있는 카카오 앱키 불러오기
		let kakaoAppKey = Bundle.main.infoDictionary?["KAKAO_NATIVE_APP_KEY"] ?? ""

		// kakao SDK 초기화
		KakaoSDK.initSDK(appKey: kakaoAppKey as! String)
		return true
	}
}

@main
struct KakaoAuthApp: App {

	@UIApplicationDelegateAdaptor var appDelegate : MyAppDelegate
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

3.카카오 로그인 Delegate 설정하기

카카오톡으로 로그인을 구현하기 전에 필수 설정인 AppDelegate 설정법입니다.

https://developers.kakao.com/docs/latest/ko/kakaologin/ios

import Foundation
import UIKit
import KakaoSDKAuth


class MySceneDelegate: UIResponder, UIWindowSceneDelegate {

	func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
		if let url = URLContexts.first?.url {
			if (AuthApi.isKakaoTalkLoginUrl(url)) {
				_ = AuthController.handleOpenUrl(url: url)
			}
		}
	}
}

import UIKit
import KakaoSDKCommon
import KakaoSDKAuth

class MyAppDelegate: UIResponder, UIApplicationDelegate {

	func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {

		// 메인번들에 있는 카카오 앱키 불러오기
		let kakaoAppKey = Bundle.main.infoDictionary?["KAKAO_NATIVE_APP_KEY"] ?? ""

		// kakao SDK 초기화
		KakaoSDK.initSDK(appKey: kakaoAppKey as! String)
		return true
	}

	func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
		if (AuthApi.isKakaoTalkLoginUrl(url)) {
			return AuthController.handleOpenUrl(url: url)
		}

		return false
	}

	// appDelegate 에서 sceneDelegate 연결 하기
	func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {

		let sceneConfigutation = UISceneConfiguration(name: nil, sessionRole: connectingSceneSession.role)

		sceneConfigutation.delegateClass = MySceneDelegate.self

		return sceneConfigutation
	}
}

Internet 추가 설정

info.plist 에서 App Transport Security Settings 에서 Allow Arbitrary Loads 에서 No 추가 하기

카카오 로그인 활성화

카카오 Developer page 에서 상단 내애플리케이션 -> 가서 생성된 app 에 들어간다음에 좌측 메뉴에 카카오 로그인에서 활성화를 설정 ON 해줍니다

그리고 하단의 Redirect URI 을 설정해 줍니다

좌측메뉴 동의 항목에 가서 사용자의 개인 항목을 가져오기 때문에 사용자로 부터 동의를 받아와야되는 단계입니다

4.카카오톡 설치 여부 확인

사용자의 환경에 따라서, 카카오톡이 설치 또는 안되어 있는지 확인 하는 절차입니다

https://developers.kakao.com/docs/latest/ko/kakaologin/ios#login-through-kakaotalk

5.ViewModel 에서 카카오톡 로그인 로직 생성

// in ViewModel

import Foundation
import Combine
import KakaoSDKAuth
import KakaoSDKUser


class KakaoAuthVM: ObservableObject {

	func handleKakaoLogin() {
		// 카카오톡 설치 여부 확인 - 사용자의 앱에 카카오톡 설치 여부 확인

		// 카카카톡 앱을 통해서 로그인 하기
		if (UserApi.isKakaoTalkLoginAvailable()) {
			UserApi.shared.loginWithKakaoTalk {(oauthToken, error) in
				if let error = error {
					print(error)
				}
				else {
					print("loginWithKakaoTalk() success.")

					//do something
					_ = oauthToken
				}
			}
		} else { // 카카오톡이 설치가 안되어 있을 경우
			// 카카오 계정으로 로그인 하기 - 웹뷰를 열러서 로그인 하기
			UserApi.shared.loginWithKakaoAccount {(oauthToken, error) in
					if let error = error {
						print(error)
					}
					else {
						print("loginWithKakaoAccount() success.")

						//do something
						_ = oauthToken
					}
				}
		}

	}
}

6.카카오톡 계정 로그아웃하기

https://developers.kakao.com/docs/latest/ko/kakaologin/ios#logout

	// MARK: - 카카오톡 로그아웃
	func handleKakaoLogout() {
		UserApi.shared.logout {(error) in
			if let error = error {
				print(error)
			}
			else {
				print("logout() success.")
			}
		}
	}

🗃 Reference

개발하는 정대리 - https://youtu.be/sADVK2mJ_XE parkgyurim - https://velog.io/@parkgyurim/iOS-SwiftUI-Kakao-Login x

React Native Core Components

Tue, 19 Jul 2022 00:00:00 +0000

React Native 에서 가장 자주 사용되며, 중요한 component 들로는 View. Text, Image, Button, Touchable, Alert 이 있습니다

https://reactnative.dev/docs/components-and-apis

1.View

View 는 가장 기본적인 UI 상태에서의 UIView 를 가리키며, View 에도 몇개의 Component 종류가 있습니다

SafeAreaView

iphone 기준에 상단 노치 부분에 요소들을 위치 시키지 않으려면 SafeAreaView 가 필요합니다

return (
  <SafeAreaView style={styles.container}>
    <Text>Welcome React Native </Text>
    <StatusBar style="auto" />
  </SafeAreaView>
);

2.Text

https://reactnative.dev/docs/text

App 상에서 Text 를 사용할때 Text component 를 사용해야 합니다. 또한 Text 를 꾸미기 위해서 여러가지 Props 도 있으니, 익혀야 합니다 몇가지 중요한 props 를 다루자면

numberOfLines

https://reactnative.dev/docs/text#numberoflines

Text 가 길게 되면 UI 화면에서 복잡해지게 되는데 그럴때 numberOfLines 를 설정하게 되면, 최대 텍스트 라인을 설정하면서 뒤에는 생략되게 … 으로 표시되게 됩니다

<Text numberOfLines={3}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</Text>

onPress

https://reactnative.dev/docs/text#onpress

Text 를 누르게 되면 Event 이벤트 동작을 실행하는 props 입니다

export default function App() {
  // Property
  const handlePress = () => console.log("Text pressed");

  return (
    <SafeAreaView style={styles.container}>
      <Text numberOfLines={3} onPress={handlePress}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </Text>
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

3.Image

Image 를 불러오늘 component 입니다.

<Image source={require("./assets/icon.png")} />

네트워크 상에서의 이미지를 불러올때는 다음과 같습니다

여기서 체크해야될 사항은 네트워크 이미지 상에서의 사이즈는 모르기 때문에 불러올 이미지의 사이즈 weight, height 을 넣어줘야 합니다

<Image
  source=
/>

official docs 에 나오듯이 Image 에 관한 여러 props 들이 있는데 자주 사용되는 몇 가지 props 를 소개하겠습니다

blurRadius

https://reactnative.dev/docs/image#blurradius

이미지에 blur 효과를 주는 props 로써 예시 코드는 다음과 같습니다

<Image
  blurRadius={10}
  source=
/>

4.Touchable

Touchable component 는 다른 event props 없이 유저가 터치를 했을때, 이벤트를 실행 시켜주는 component 로써

종류로는 TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback 이 있습니다

TouchableWithoutFeedback 을 하게 되면 터치 했을때, 피드백 없이 event 가 동작이 되며,

TouchableOpacity 은 클릭하게되면 opacity 효과가 들어가는 component 입니다

<TouchableOpacity onPress={() => console.log("Image touch")}>
  <Image
    source=
  />
</TouchableOpacity>

TouchableHighlight 는 event 실행시, Highlight 효과를 나타냅니다

<TouchableHighlight onPress={() => console.log("Image touch")}>
  <Image
    source=
  />
</TouchableHighlight>

5.Button

6.Alert

🗃 Reference

Programming with Mash - https://youtu.be/ANdSdIlgsEw

React Native Intro

Tue, 28 Jun 2022 00:00:00 +0000

1.React VS React Native

React는 사용자 인터페이스 또는 UI 구성 요소를 구축하기 위한 오픈 소스 프론트 엔드 JS 라이브러리입니다. 페이스북과 개인 개발자 및 기업 커뮤니티에 의해 유지됩니다. 우리는 웹 앱을 만들기 위해 웹 개발에서 React를 사용합니다. React는 DOM에 데이터를 렌더링하는 데만 관심이 있으므로 React 응용 프로그램을 만들려면 일반적으로 상태 관리 및 라우팅을 위한 추가 라이브러리를 사용해야 합니다. Redux와 React Router는 이러한 라이브러리의 각각의 예입니다.

리액트 네이티브(React Native)는 페이스북이 만든 오픈 소스 모바일 애플리케이션 프레임워크이다. 개발자들이 네이티브 플랫폼 기능과 함께 리액트 프레임워크를 사용할 수 있게 함으로써 안드로이드와 iOS용 애플리케이션을 개발하는 데 사용된다. React Native는 Android와 iOS의 네이티브 플랫폼과 대화하는 방법과 네이티브 위젯을 렌더링하는 방법을 알고 있으며 이러한 위젯을 React 구성 요소로 제공하여 이러한 구성 요소로 사용자 인터페이스를 구축할 수 있습니다. 그래서 네이티브 코드에는 그것과 직접적인 동등한 것이 없다. React Native는 또한 일부 네이티브 플랫폼 API에 대한 액세스를 제공합니다. 예를 들어 장치 카메라 사용을 돕고 JS 코드를 네이티브 플랫폼 코드에 연결하는 도구를 제공합니다.

2.Expo CLI VS React Native CLI

React Native Environment Setup - https://reactnative.dev/docs/environment-setup

Expo CLI

Expo 는 서드파티 서비스로 무료로 사용가능하며, 앱을 빌드 할때도 따로 금액을 지불하지 않아도 됩니다. React Native App 과 비교하였을때 쉽고 적용을 빠르게 할 수 있습니다. 큰 장점은 많은 네이티브 와 비슷한 기능들을 추가 설치를 하여 쉽게 사용할 수 있습니다 예를 들어 카메라, 위치, 알림설정, 센서 등을 일일히 설정을 하지 않아도 package 설치만으로도 사용이 가능합니다. Android Studio 또는 Xcode 없이도 preview 상태의 App 을 사용할 수 있습니다. 단점은 정해진 범위해서 앱을 개발해야 되기때문에, Native Code 에 접근할 수 없습니다 (오직 JS Code 로만 App 개발을 해야된다는 단점임!!)

React Native CLI

React Native 개발 팀에서 지원하는 CLI 툴로서, 세세한 설정을 다룰 수 있으며, Java, Swift 등 Native code 와 연결해서 App 개발을 사용할 수 있습니다. Android Studio 와 Xcode 를 접속해서 개발자 스스로 앱 설정을 변경 할 수 있습니다. 하지만, 큰 단점은 하나하나 개발자가 다 설정해줘야 된다는 점입니다. 그렇게 때문에 앱 구조가 복잡하며, 시간이 오래 걸립니다

결론

App 개발을 시작하는 단계 에서는 접근성이 쉬운 Expo CLI 로 도 간단한 앱을 충분히 만들 수 있어서 그것을 토대로 앱개발을 할 수 있습니다. 만약 더 많은 기능을 추가 및 설정을 하려면 나중에 Eject project 로 해서 React Native CLI 상태에서 변경할 수 있습니다

3.Creating First App with Expo

expo - https://docs.expo.dev/

Node-JS 가 설치되어 있다는 가장하에 expo CLI 설치

npm i -g expo-cli

그리고, 생성하고 싶은 폴더에서 프로젝트 생성

npx create-expo-app my-app

앱을 초기 생성하고, 터미널 창에 yarn start 하게 되면 localhost 로 dev 빌드가 되면서 web 브라우저 상에 simulator 가 실행이 됩니다

Android 시뮬레이터, iOS 시뮬레이터 등 각각의 디바이스에 실행을 할 수 있습니다

Developer menu 를 통해서 여러가지 debugging option 들을 설정할 수 있습니다

단축키 control + command + z

5.Android Simulator

https://docs.expo.dev/workflow/android-studio-emulator/

Expo doc 에서 Android Studio 설정을 통해서 SDK 설치 및 Android Emulator 를 설정 합니다

# in .bash_profile
export ANDROID_HOME=/Users/jacobko/Library/Android/sdk
export PATH=/Users/jacobko/Library/Android/sdk:$PATH

# in .zshrc
export ANDROID_HOME=/Users/jacobko/Library/Android/sdk
export PATH=/Users/jacobko/Library/Android/sdk:$PATH

Emulator 설정을 마치면 react native App 에서 Android Studio를 실행하게 되면

Developer Menu 단축키는 command + m

🗃 Reference

Programming with Mash - https://youtu.be/ANdSdIlgsEw

Actor

Tue, 31 May 2022 00:00:00 +0000

1.What is the problem that actor are solving?

In the actual apps a lof of times we are using background threads that use URL session fetch data from server. The important thing that as developers is background threads are all accessing the same class that you know class are not thread safe

So, if two or more threads access the same object in memory at the same time you can run into really bad problems in your app you can run into data races if not worse crashes

If you want to check thread safe to turn on Thread Sanitizer in edit Scheme

// MARK: - DATAMANAGER
class MyDataManager {
static let instance = MyDataManager()
private init() {}

var data: [String] = []

func getRandomData() -> String? {
self.data.append(UUID().uuidString)
print(Thread.current)
return data.randomElement()
}
}

// MARK: - HOME
struct HomeView: View {

let manager = MyDataManager.instance
@State private var text: String = ""
let timer = Timer.publish(every: 0.1, tolerance: nil, on: .main, in: .common, options: nil).autoconnect()

var body: some View {
ZStack {
Color.gray.opacity(0.8).ignoresSafeArea()
Text(text)
  .font(.headline)
} //: ZSTACK
.onReceive(timer) { _ in
DispatchQueue.global(qos: .background).async {
  if let data = manager.getRandomData() {
    DispatchQueue.main.async {
      self.text = data
    }
  }
}
}
}
}

// MARK: - BROWSER
struct BrowserView: View {

let manager = MyDataManager.instance
@State private var text: String = ""
let timer = Timer.publish(every: 0.01, tolerance: nil, on: .main, in: .common, options: nil).autoconnect()

var body: some View {
ZStack {
Color.yellow.opacity(0.8).ignoresSafeArea()

Text(text)
} //: ZSTACK
.onReceive(timer) { _ in
DispatchQueue.global(qos: .default).async {
  if let data = manager.getRandomData() {
    DispatchQueue.main.async {
      self.text = data
    }
  }
}
}
}
}

struct ActorBootCamp: View {
// MARK: -  PROPERTY
// MARK: -  BODY
var body: some View {
TabView {
HomeView()
  .tabItem {
    Label("Home", systemImage: "house.fill")
  }
BrowserView()
  .tabItem {
    Label("Browse", systemImage: "magnifyingglass")
  }
}
}
}

Above the picture, you can see same pointer (0x000107a4d9d0) and different thread 7 and 1 and the same piece of memory in the heap that we can call this problem as data race (multiple threads are accessing the same class (pointer))

This is probably one of the hardest things to debug

2.How was this problem solved prior to actors?

To take the class and to make it thread safe

// MARK: - DATAMANAGER
class MyDataManager {
static let instance = MyDataManager()
private init() {}

var data: [String] = []
private let lock = DispatchQueue(label: "com.MyApp.MyDataManager")

func getRandomData(completionHandler: @escaping (_ title: String?) -> ()) {
lock.async {
  self.data.append(UUID().uuidString)
  print(Thread.current)
  completionHandler(self.data.randomElement())
}
}
}

// MARK: - HOME
struct HomeView: View {

let manager = MyDataManager.instance
@State private var text: String = ""
let timer = Timer.publish(every: 0.1, tolerance: nil, on: .main, in: .common, options: nil).autoconnect()

var body: some View {
ZStack {
Color.gray.opacity(0.8).ignoresSafeArea()
Text(text)
  .font(.headline)
} //: ZSTACK
.onReceive(timer) { _ in
DispatchQueue.global(qos: .background).async {
  manager.getRandomData { title in
    if let data = title {
      DispatchQueue.main.async {
        self.text = data
      }
    }
  }
}
}
}
}

// MARK: - BROWSER
struct BrowserView: View {

let manager = MyDataManager.instance
@State private var text: String = ""
let timer = Timer.publish(every: 0.01, tolerance: nil, on: .main, in: .common, options: nil).autoconnect()

var body: some View {
ZStack {
Color.yellow.opacity(0.8).ignoresSafeArea()

Text(text)
} //: ZSTACK
.onReceive(timer) { _ in
DispatchQueue.global(qos: .default).async {
manager.getRandomData { title in
  if let data = title {
    DispatchQueue.main.async {
      self.text = data
    }
  }
}
}
}
}
}

That’s pretty much the solution to making classes thread safe. It is purely put all of your functions into a dispatchQueue a lock or a queue and then they will be thread safe because this will basically when all the functions reach this line

3.Actors can solve the problem!

So more or less an actor is a class that automatically for the thread safe because we are in the asynchronous swift concurrency environment we no longer have to use completion handlers either

// MARK: - DATAMANAGER
class MyDataManager {
static let instance = MyDataManager()
private init() {}

var data: [String] = []
private let lock = DispatchQueue(label: "com.MyApp.MyDataManager")

func getRandomData(completionHandler: @escaping (_ title: String?) -> ()) {
lock.async {
  self.data.append(UUID().uuidString)
  print(Thread.current)
  completionHandler(self.data.randomElement())
}
}
}

actor MyActorDataManager {
static let instance = MyActorDataManager()
private init() {}

var data: [String] = []

func getRandomData() -> String? {
  self.data.append(UUID().uuidString)
  print(Thread.current)
  return self.data.randomElement()
}
}

// MARK: - HOME
struct HomeView: View {

let manager = MyActorDataManager.instance
@State private var text: String = ""
let timer = Timer.publish(every: 0.1, tolerance: nil, on: .main, in: .common, options: nil).autoconnect()

var body: some View {
ZStack {
  Color.gray.opacity(0.8).ignoresSafeArea()
  Text(text)
    .font(.headline)
} //: ZSTACK
.onReceive(timer) { _ in
  Task {
    if let data = await manager.getRandomData() {
      await MainActor.run(body: {
        self.text = data
      })
    }
  }//: TASK
}
}
}

// MARK: - BROWSER
struct BrowserView: View {

let manager = MyActorDataManager.instance
@State private var text: String = ""
let timer = Timer.publish(every: 0.01, tolerance: nil, on: .main, in: .common, options: nil).autoconnect()

var body: some View {
ZStack {
  Color.yellow.opacity(0.8).ignoresSafeArea()

  Text(text)
} //: ZSTACK
.onReceive(timer) { _ in
  Task {
    if let data = await manager.getRandomData() {
      await MainActor.run(body: {
        self.text = data
      })
    }
  }//: TASK
}
}
}

4.nonisolated

So, every time we want to access something inside the actor we then need to await to get into that actor because all of the code inside the actor is isolated. It is isolated to that actor so then thread safe

Sometimes, where you have some code in your actor that actually does not need to be isolated to the actor

// MARK: - DATAMANAGER
class MyDataManager {
static let instance = MyDataManager()
private init() {}

var data: [String] = []
private let lock = DispatchQueue(label: "com.MyApp.MyDataManager")

func getRandomData(completionHandler: @escaping (_ title: String?) -> ()) {
  lock.async {
    self.data.append(UUID().uuidString)
    print(Thread.current)
    completionHandler(self.data.randomElement())
  }
}
}

actor MyActorDataManager {
static let instance = MyActorDataManager()
private init() {}

var data: [String] = []

nonisolated let myRandomText = "Someting new"

func getRandomData() -> String? {
  self.data.append(UUID().uuidString)
  print(Thread.current)
  return self.data.randomElement()
}

// this function is not really worried about thread safety because we know just going to get this returned new data back
// in the actor, but we don't want to get the data await -> add nonisolated
nonisolated func getSaveData() -> String {
  return "New Data"
}
}

// MARK: - HOME
struct HomeView: View {

let manager = MyActorDataManager.instance
@State private var text: String = ""
let timer = Timer.publish(every: 0.1, tolerance: nil, on: .main, in: .common, options: nil).autoconnect()

var body: some View {
ZStack {
  Color.gray.opacity(0.8).ignoresSafeArea()
  Text(text)
    .font(.headline)
} //: ZSTACK
.onAppear(perform: {
  let newString = manager.getSaveData()
  let newString2 = manager.myRandomText
  Task {
    await manager.data
  }
})
.onReceive(timer) { _ in
  Task {
    if let data = await manager.getRandomData() {
      await MainActor.run(body: {
        self.text = data
      })
    }
  }//: TASK
}
}
}

4.globalActor

Global Actor is basically actors that you can access the actor from outside of the actor so if you want to put other functions other classes, structs onto that actor you can do that using a global actor

// MARK: - Global Actor
@globalActor struct MyFirstGlobalActor {
static var shared = MyNewDatamanager()
}


// MARK: - DATAMANAGER
actor MyNewDatamanager {

func getDataFromDB() -> [String] {
return ["One", "Two", "Three", "Four"]
}
}

// MARK: - VIEWMODEL
class GlobalActorBootCampViewModel: ObservableObject {
// MARK: -  PROPERTY
@Published var dataArray: [String] = []
let manager = MyFirstGlobalActor.shared
// MARK: -  INIT
// MARK: -  FUNCTION
@MyFirstGlobalActor
func getData()  {

// Heavy Complex Methods
// synchronization is performed through the shared actor instance to ensure
// mutually-exclusive access to the declaration.
  Task {
    let data = await manager.getDataFromDB()
    self.dataArray = data
  }
}
}

// MARK: - VIEW
struct GlobalActorBootCamp: View {
// MARK: -  PROPERTY
@StateObject private var vm = GlobalActorBootCampViewModel()
// MARK: -  BODY
var body: some View {
ScrollView {
  VStack {
    ForEach(vm.dataArray, id: \.self) {
      Text($0)
        .font(.headline)
    }
  } //: VSTACK
} //: SCROLL
.task {
  await vm.getData()
}
}
}

🗃 Reference

SwiftUI Thinking - https://youtu.be/UUdi137FySk

Struct vs Class vs Actor

Mon, 30 May 2022 00:00:00 +0000

06.Struct vs Class vs Actor

Compare with Struct and Class

To Compare them, creating the same object using a struct and a class dive into the differences

Struct Object Code

When we create struct don’t actually have to create an init

struct StructClassActorBootCamp: View {
// MARK: -  PROPERTY

// MARK: -  BODY
var body: some View {
Text("Hello, World!")
  .onAppear {
    runTest()
  }
}
}

// MARK: -  PREVIEW
struct StructClassActorBootCamp_Previews: PreviewProvider {
static var previews: some View {
StructClassActorBootCamp()
}
}

struct MyStruct {
var title: String
}

// MARK: - EXTENSTION
extension StructClassActorBootCamp {
private func runTest() {
print("Test Started")
structTest1()
}

private func structTest1() {
let objectA = MyStruct(title: "Starting title!")
print("ObjectA: ", objectA.title)

var objectB = objectA
print("ObjectB: ", objectB.title)

objectB.title = "Second title!"
print("ObjectB title changed.")

print("ObjectA: ", objectA.title)
print("ObjectB: ", objectB.title)
}
}

You will notice that when you change the title of objectB did not update, only object b’s title did update because this struct is a value type and when you pass a value type. ObjectB is actually totally distinct and separate from ObjectA because it passed the values and not a reference

Class Object Code

Class we do have to give them an actual explicit initializer

struct StructClassActorBootCamp: View {
// MARK: -  PROPERTY

// MARK: -  BODY
var body: some View {
  Text("Hello, World!")
    .onAppear {
      runTest()
    }
}
}

// MARK: -  PREVIEW
struct StructClassActorBootCamp_Previews: PreviewProvider {
static var previews: some View {
  StructClassActorBootCamp()
}
}

struct MyStruct {
var title: String
}

class MyClass {
var title: String

init(title: String) {
  self.title = title
}
}

// MARK: - EXTENSTION
extension StructClassActorBootCamp {
private func runTest() {
  print("Struct Test")
  structTest1()
  printDivider()
  print("Class Test")
  classTest1()
}

private func printDivider() {
  print("""

  -----------------------------
  """)
}

private func structTest1() {
  let objectA = MyStruct(title: "Starting title!")
  print("ObjectA: ", objectA.title)

  print("Pass the VALUES of objectA to objectB")
  var objectB = objectA
  print("ObjectB: ", objectB.title)

  objectB.title = "Second title!"
  print("ObjectB title changed.")

  print("ObjectA: ", objectA.title)
  print("ObjectB: ", objectB.title)
}

private func classTest1() {
  let objectA = MyClass(title: "Starting Title")
  print("ObjectA: ", objectA.title)

  // When we are changing the title here not chaning the object itself. We are changing the title inside the object
  print("Pass the REFERENCE of objectA to objectB")
  let objectB = objectA
  print("ObjectB: ", objectB.title)

  objectB.title = "Second title!"
  print("ObjectB title changed.")

  print("ObjectA: ", objectA.title)
  print("ObjectB: ", objectB.title)
}
}

You can notice the big difference is that both objectA and B’s title changed. The struct is passing the VALUE from objectA to objectB Otherwise, the class is passing the REFERENCE from them. Here, main point is Class objectA,B are both actually pointing to the same object in memory, so that underlying reference is connected to anywhere that is pointing to that reference so both object

https://blog.onewayfirst.com/ios/posts/2019-03-19-class-vs-struct/

Value type creates the copy (a new instance) and stores the data (on Stack Memory). Modifying the data (or the instance) does not affect the original.
Reference type creates the shared instance that points the memory location of the data (on Heap Memory). Modifying the data affects the original.
Mutating Struct example code

// mutating anywhere but, it is mutating it when you change the title
struct MyStruct {
var title: String
}

// Immutable struct
struct CustomStruct {
let title: String

func updateTitle(newTitle: String) -> CustomStruct {
  CustomStruct(title: newTitle)
}
}

// MutatingStruct you have to add the workd mutaing and want to restuct maybe the way this struct gets updated
struct MutatingStruct {
private(set) var title: String

init(title: String) {
  self.title = title
}

mutating func updaterTile(newTilte: String) {
  title = newTilte
}
}


extension StructClassActorBootCamp {

private func structTest2() {
  print("structTest2")

  var struct1 = MyStruct(title: "Title1")
  print("Struct1: ", struct1.title)
  struct1.title = "Title2"
  print("Struct1: ", struct1.title)

  var struct2 = CustomStruct(title: "Title1")
  print("Struct2: ", struct2.title)
  struct2 = CustomStruct(title: "Title2")
  print("Struct2: ", struct2.title)

  var struct3 = CustomStruct(title: "Title1")
  print("Struct3: ", struct3.title)
  struct3 = struct3.updateTitle(newTitle: "Title2")
  print("Struct3: ", struct3.title)

  var struct4 = MutatingStruct(title: "Title1")
  print("Struct4: ", struct4.title)
  struct4.updaterTile(newTilte: "Title2")
  print("Struct4: ", struct4.title)
}
}

Class example code

The difference of struct and class, in the struct, it has to make this variable because when we mutated the title we were chaining the object we were literally mutating this object tha actually changed. Mutating means we are going to take the current values we’re going to change them we’re going to create a new object with new values

class MyClass {
var title: String

init(title: String) {
  self.title = title
}

func updaterTile(newTilte: String) {
  title = newTilte
}
}
extension StructClassActorBootCamp {

private func classTest2() {
  print("classTest2")

  let class1 = MyClass(title: "Title1")
  print("Class1: ", class1.title)
  class1.title = "Title2"
  print("Class1: ", class1.title)

  let class2 = MyClass(title: "Title1")
  print("Class2: ", class2.title)
  class2.updaterTile(newTilte: "Title2")
  print("Class2: ", class2.title)
}
}

https://stackoverflow.com/questions/24217586/structure-vs-class-in-swift-language

https://medium.com/@vinayakkini/swift-basics-struct-vs-class-31b44ade28ae

https://stackoverflow.com/questions/27441456/swift-stack-and-heap-understanding

https://stackoverflow.com/questions/24232799/why-choose-struct-over-class/24232845

What is ARC in Swift and how is it used (Automatic Reference Counting) in Object-C developers used to have to actually keep track of the count in Swift this is mostly done automatically for us. ARC is only for objects that are in the heap such as classes and actors

Value types which store on stack memory such as structures and enumerating are just copying the data to data. Therefore it is not affected by ARC

ARC is to track and manage the app’s memory usage. Arc automatically frees up the memory used by class instances when those instances are no longer needed.

Every instance of a class has a property called reference count so if reference count is greater than 0, the instance is still kept in memory otherwise, it will be removed from the memory.

Weak and Strong reference

When you create a strong reference without using weak self, you are telling the compiler that we absolutely need self this class we need it to to still be in memory when we come back the asynchronous code if the user moves away to another screen in the app and the system tries to de-allocate this class it will then understand because there is still a reference so, Strong reference class is not going to de-allocate

What is weak self? This is making class as optional that if the class wants to de-allocate that’s totally fine because if when the code comes back the asynchronous code if the class is still in memory we’ll handle the response but if it is de-allocated for whatever reason

If you keep that strong reference you are keeping at least on reference count to that object in memory and so that object in memory being the class is never going to get de-allocated until all of the references are gone

So, if we make it a weak reference it’s then going to make this reference an optional this reference being weak will not count towards the reference count when it is trying to figure our if this instance needs to be kept in memory still.

https://medium.com/doyeona/automatic-reference-counting-in-swift-arc-weak-strong-unowned-925f802c1b99

Class vs Actor

Actors are more or less the same thing as classes except they are thread safe

https://www.backblaze.com/blog/whats-the-diff-programs-processes-and-threads/

In the Multi Thread, it might access an object in the heap and then this thread might also access the same object in the heap. Now the heap is going to synchronize them and that’s basically because there is noting by default that’s going to stop two different threads from accessing the same object in memory.

Now both classes and actors are stored in the heap cause they are more or less the same thing the only big difference is that the actors are going to be thread safe

In the class if two different threads are accessing that class they can function at the exact same time. But in an actor if two threads are accessing the same actor one of them is probably going to have to await that other thread to finish its processes before the second thread can get into that actor

Actors require to be in an asynchronous environment and when you want to access anything inside the actor you need to await on it. If they are accessing at the same time you might run into a situation where one thread might have to literally await for the other thread to finish

actor MyActor {
	var title: String

	init(title: String) {
		self.title = title
	}

	func updaterTile(newTilte: String) {
		title = newTilte
	}
}

private func actorTest1() {
Task {
  let objectA = MyActor(title: "Starting Title")
  await print("ObjectA: ", objectA.title)

  print("Pass the REFERENCE of objectA to objectB")
  let objectB = objectA
  await print("ObjectB: ", objectB.title)

  // actor is now thread safe so we can't chnage the value from outside the actor itself
  // objectB.title = "Second title!"
  await objectB.updaterTile(newTilte: "Second title!")
  print("ObjectB title changed.")

  await print("ObjectA: ", objectA.title)
  await print("ObjectB: ", objectB.title)
}
}

Warp up

Value vs Reference type

Value Types : Struct, Enum, String Int, etc
- Stored in the stack
- Faster
- Thread safe
- When you assign or pass value type a new copy of data is created.
Reference Types: Class, Function, Actor
- Stored in the Heap
- Slower, but synchronized
- Not thread safe (by default)
- When you assign or pass reference type a new reference to original instance will be created (pointer)

Stack vs Heap

Stack
- Stored value types
- Variables allocated on the stack are stored directly to the memory, and access to this memory is very fast
- Each thread has it’s own stack
Heap
- Stored reference types
- Shared across threads

Struct vs Class vs Actor

Struct
- Based on Values
- Can be mutated
- Stored in the Stack!
Class
- Based on Reference (Instance)
- Stored in the Heap!
- Inherit from other classes
Actor
- Same as Class, but thread safe!

Structs: Data Models, View Classes: ViewModels Actors: Shared ‘Manager’ and ‘Data Store’

🗃 Reference

SwiftUI Thinking - https://youtu.be/-JLenSTKEcA

Continuation

Fri, 20 May 2022 00:00:00 +0000

Continuation

When you are working with SDK and API that are not updated for swift concurrency you can use a continuation to convert them to be usable with your asynchrony swift concurrency code

Simple async code with fetched single image from API by using async await and URLSession.shared.data

import SwiftUI

// MARK: - SERVICE
class CheckedContinuationBootCampNetworkManager {
func getData(url: URL) async throws -> Data {
do {
  let (data, _) = try await URLSession.shared.data(from: url, delegate: nil)
  return data
} catch  {
  throw error
}
}
}


// MARK: - VIEWMODEL
class CheckedContinuationBootCampViewModel: ObservableObject {
// MARK: -  PROPERTY
@Published var image: UIImage? = nil
let manager = CheckedContinuationBootCampNetworkManager()
// MARK: -  INIT
// MARK: -  FUNCTION
func getImage() async {
guard let url = URL(string: "https://picsum.photos/300") else { return }

do {
  let data = try await manager.getData(url: url)

  if let image = UIImage(data: data) {
    await MainActor.run(body: {
      self.image = image
    })
  }
} catch {
  print(error)
}
}
}

// MARK: - VIEW
struct CheckedContinuationBootCamp: View {
// MARK: -  PROPERTY
@StateObject private var vm = CheckedContinuationBootCampViewModel()
// MARK: -  BODY
var body: some View {
  ZStack {
    if let image = vm.image {
      Image(uiImage: image)
        .resizable()
        .scaledToFit()
        .frame(width: 200, height: 200)
    }
  } //: ZSTACK
  .task {
    await vm.getImage()
  }
}
}

But unfortunately a lof of SDKs and APIs are not yet updated for async and await some of them maybe will be updated in the future. You want to be able to convert their SDK form as it is to async await

So, use completion handler oen of the original ways that we did asynchronous code in swift and using escaping closures

class CheckedContinuationBootCampNetworkManager {

func getData2(url: URL) async throws -> Data {
return try await withCheckedThrowingContinuation { continuation in
URLSession.shared.dataTask(with: url) { data, response, error in
  // withCheckedThrowingContinuation in we get data and we resume it once perfect
  if let data = data {
    continuation.resume(returning: data)
  } else if let error = error {
    continuation.resume(throwing: error)
  } else {
    continuation.resume(throwing: URLError(.badURL))
  }
  // need to resume it exactly once -> will be crashed APP
  // continuation.resume(throwing: URLError(.badURL))
}
.resume()
}
}
}


// MARK: - VIEWMODEL
class CheckedContinuationBootCampViewModel: ObservableObject {
// MARK: -  PROPERTY
@Published var image: UIImage? = nil
let manager = CheckedContinuationBootCampNetworkManager()
// MARK: -  INIT
// MARK: -  FUNCTION
func getImage() async {
  guard let url = URL(string: "https://picsum.photos/300") else { return }

  do {
    let data = try await manager.getData2(url: url)

    if let image = UIImage(data: data) {
      await MainActor.run(body: {
        self.image = image
      })
    }
  } catch {
    print(error)
  }
}
}

// MARK: - SERVICE
class CheckedContinuationBootCampNetworkManager {
func getHeartImageFromDatabase(completionHandler: @escaping (_ image: UIImage) -> ()) {
DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
  completionHandler(UIImage(systemName: "heart.fill")!)
}
}

func getHeartImageFromDatabase2() async -> UIImage {
await withCheckedContinuation { continuation in
  getHeartImageFromDatabase { image in
    continuation.resume(returning: image)
  }
}
}
}


// MARK: - VIEWMODEL
class CheckedContinuationBootCampViewModel: ObservableObject {
// MARK: -  PROPERTY
@Published var image: UIImage? = nil
let manager = CheckedContinuationBootCampNetworkManager()
// MARK: -  INIT
// MARK: -  FUNCTION

func getHeartImage() async {
manager.getHeartImageFromDatabase { [weak self ] image in
  self?.image = image
}
}

func getHeartImage2() async {
self.image = await manager.getHeartImageFromDatabase2()
}
}

// MARK: - VIEW
struct CheckedContinuationBootCamp: View {
// MARK: -  PROPERTY
@StateObject private var vm = CheckedContinuationBootCampViewModel()
// MARK: -  BODY
var body: some View {
ZStack {
  if let image = vm.image {
    Image(uiImage: image)
      .resizable()
      .scaledToFit()
      .frame(width: 200, height: 200)
  }
} //: ZSTACK
.task {
  // await vm.getImage()
  // await vm.getHeartImage()
  await vm.getHeartImage2()
}
}
}

🗃 Reference

SwiftUI Thinking - https://youtu.be/Tw_WLMIfEPQ

TaskGroup

Thu, 12 May 2022 00:00:00 +0000

TaskGroup

If we have a whole bunch of asynchronous functions that we need to run like maybe 10 or 20. async let isn’t scalable how can we run a whole bunch a group of tasks at the same time concurrently.

Apple has actually given us something called a task group in which we can create a single group of tasks and run a whole bunch of tasks concurrently

Fetch multiple images without Task Group

You could image in that if the fetch images went to 10 or 20 or more. This is not very scalable

// MARK: -  DATA MANAGER
class TaskGroupBootCampDataManager {

func fetchImageWithAsyncLet() async throws -> [UIImage] {
  async let fetchIamge1 = fetchImage(urlString: "https://picsum.photos/300")
  async let fetchIamge2 = fetchImage(urlString: "https://picsum.photos/300")
  async let fetchIamge3 = fetchImage(urlString: "https://picsum.photos/300")
  async let fetchIamge4 = fetchImage(urlString: "https://picsum.photos/300")

  let (image1, image2, image3, image4) = await (try fetchIamge1, try fetchIamge2, try fetchIamge3, try fetchIamge4)
  return [image1, image2, image3, image4]
}

private func fetchImage(urlString: String) async throws -> UIImage {
  guard let url = URL(string: urlString)  else {
    throw URLError(.badURL)
  }
  do {
    let (data, _) = try await URLSession.shared.data(from: url, delegate: nil)
    if let image = UIImage(data: data) {
      return image
    } else {
      throw URLError(.badURL)
    }
  } catch  {
    throw error
  }
}
}

// MARK: -  VIEWMODEL
class TaskGroupBootCampViewModel: ObservableObject {
@Published var images: [UIImage] = []
let manager = TaskGroupBootCampDataManager()

func getImages() async {
if let images = try? await manager.fetchImageWithAsyncLet() {
self.images.append(contentsOf: images)
}
}
}

// MARK: -  VIEW
struct TaskGroupBootCamp: View {
// MARK: -  PROPERTY
@StateObject private var vm = TaskGroupBootCampViewModel()
let columns = [GridItem(.flexible()), GridItem(.flexible())]
// let url = URL(string: "https://picsum.photos/300")!
// MARK: -  BODY
var body: some View {
NavigationView {
ScrollView {
LazyVGrid(columns: columns) {
ForEach(vm.images, id: \.self) { image in
  Image(uiImage: image)
    .resizable()
    .scaledToFit()
    .frame(height: 150)
} //: LOOP
} //: GRID
} //: SCROLL
.navigationTitle("Task Group Practice")
.task {
await vm.getImages()
}
}
}

There’s got to be a better way to write and perform multiple concurrent asynchronous requests and the way we do that again is with the task group.

Fetch multiple images with Task Group

// MARK: -  DATA MANAGER
class TaskGroupBootCampDataManager {

func fetchImageWithAsyncLet() async throws -> [UIImage] {
async let fetchIamge1 = fetchImage(urlString: "https://picsum.photos/300")
async let fetchIamge2 = fetchImage(urlString: "https://picsum.photos/300")
async let fetchIamge3 = fetchImage(urlString: "https://picsum.photos/300")
async let fetchIamge4 = fetchImage(urlString: "https://picsum.photos/300")

let (image1, image2, image3, image4) = await (try fetchIamge1, try fetchIamge2, try fetchIamge3, try fetchIamge4)
return [image1, image2, image3, image4]
}

func fetchImageWithTaskGroup() async throws -> [UIImage] {
let urlStrings = [
  "https://picsum.photos/300",
  "https://picsum.photos/300",
  "https://picsum.photos/300",
  "https://picsum.photos/300",
  "https://picsum.photos/300",
]

return try await withThrowingTaskGroup(of: UIImage?.self) { group in
  var images: [UIImage] = []
  images.reserveCapacity(urlStrings.count)

  for urlString in urlStrings {
    group.addTask {
      try? await self.fetchImage(urlString: urlString)
    }
  }
  for try await image in group {
    if let image = image {
      images.append(image)
    }
  }
  return images
}
}

func fetchImage(urlString: String) async throws -> UIImage {
guard let url = URL(string: urlString)  else {
  throw URLError(.badURL)
}
do {
  let (data, _) = try await URLSession.shared.data(from: url, delegate: nil)
  if let image = UIImage(data: data) {
    return image
  } else {
    throw URLError(.badURL)
  }
} catch  {
  throw error
}
}
}

🗃 Reference

SwiftUI Thinking - https://youtu.be/epBbbysk5cU

Async Let

Tue, 10 May 2022 00:00:00 +0000

Async Let

Async Let can us perform multiple asynchronous methods at the same time. When you write the await keyword and have a bunch of method on after another we are waiting for each method to finish before performing the next one.

Async Let performing the next one a singlet is actually letting us perform multiple methods at the same time and then wait for the result of all of those methods together

The example of multiple fetch images by using async & await

struct AsyncLetBootCamp: View {
// MARK: -  PROPERTY
@State private var images: [UIImage] = []
let columns = [GridItem(.flexible()), GridItem(.flexible())]
let url = URL(string: "https://picsum.photos/300")!
// MARK: -  BODY
var body: some View {
NavigationView {
ScrollView {
LazyVGrid(columns: columns) {
  ForEach(images, id: \.self) { image in
    Image(uiImage: image)
      .resizable()
      .scaledToFit()
      .frame(height: 150)
  } //: LOOP
} //: GRID
} //: SCROLL
.navigationTitle("Async Let Practice")
.onAppear {
Task {
  do {
    let image1 = try await fetchImage()
    self.images.append(image1)

    let image2 = try await fetchImage()
    self.images.append(image2)


  } catch  {

  }
}//: TASK

Task {
  do {
    let image3 = try await fetchImage()
    self.images.append(image3)

    let image4 = try await fetchImage()
    self.images.append(image4)
  } catch  {

  }
}//: TASK
}
} //: NAVIGATION
}

// MARK: -  FUNCTION
func fetchImage() async throws -> UIImage {
do {
let (data, _) = try await URLSession.shared.data(from: url, delegate: nil)
if let image = UIImage(data: data) {
return image
} else {
throw URLError(.badURL)
}
} catch  {
throw error
}
}
}

This is bulking up the code it doesn’t seem very efficient and as you probably guessed there’s a much better way to do

The example of multiple fetch images by using async let

This is to create an async let like creating a constant except it’s an asynchronous constant

struct AsyncLetBootCamp: View {
// MARK: -  PROPERTY
@State private var images: [UIImage] = []
let columns = [GridItem(.flexible()), GridItem(.flexible())]
let url = URL(string: "https://picsum.photos/300")!
// MARK: -  BODY
var body: some View {
NavigationView {
ScrollView {
LazyVGrid(columns: columns) {
ForEach(images, id: \.self) { image in
  Image(uiImage: image)
    .resizable()
    .scaledToFit()
    .frame(height: 150)
} //: LOOP
} //: GRID
} //: SCROLL
.navigationTitle("Async Let Practice")
.onAppear {
Task {
do {

  // No await keyword
  async let fetchImage1 = fetchImage()
  async let fetchImage2 = fetchImage()
  async let fetchImage3 = fetchImage()
  async let fetchImage4 = fetchImage()

  // one await keyword
  let (image1, image2, image3, image4) = await (try fetchImage1, try fetchImage2, try fetchImage3, try fetchImage4)

  self.images.append(contentsOf: [image1, image2, image3, image4])

  // let image1 = try await fetchImage()
  // self.images.append(image1)
  //
  // let image2 = try await fetchImage()
  // self.images.append(image2)
  //
  // let image3 = try await fetchImage()
  // self.images.append(image3)
  //
  // let image4 = try await fetchImage()
  // self.images.append(image4)
} catch  {

}
}//: TASK
}
} //: NAVIGATION
}

// MARK: -  FUNCTION
func fetchImage() async throws -> UIImage {
do {
let (data, _) = try await URLSession.shared.data(from: url, delegate: nil)
if let image = UIImage(data: data) {
return image
} else {
throw URLError(.badURL)
}
} catch  {
throw error
}
}
}

So, async let is great for executing multiple asynchronous functions at once and then await the result of all of those functions at the same time so we can fetch a bunch of different things and then wait for all of the results to come back we update our screen

🗃 Reference

SwiftUI Thinking - https://youtu.be/1OmJJwVF7uQ

Task

Wed, 04 May 2022 00:00:00 +0000

Task

There is a whole bunch of different types of tasks and using task groups and detach tasks

Basic Task with async/await

// MARK: -  VIEWMODEL
class TaskBootCampViewModel: ObservableObject {
// MARK: -  PROPERTY
@Published var image: UIImage? = nil
// MARK: -  INIT
// MARK: -  FUNCTION
func fetchImage() async {
do {
  guard let url = URL(string: "https://picsum.photos/1000") else { return }
  let (data, _) = try await URLSession.shared.data(from: url, delegate: nil)
  self.image = UIImage(data: data)
} catch  {
  print(error.localizedDescription)
}
}
}

// MARK: -  VIEW
struct TaskBootCamp: View {
// MARK: -  PROPERTY
@StateObject private var vm = TaskBootCampViewModel()
// MARK: -  BODY
var body: some View {
VStack(spacing: 40) {
if let image = vm.image {
  Image(uiImage: image)
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
}
} //: VSTACK
.onAppear {
Task {
  await vm.fetchImage()
}
}
}
}

Set up task priority

// MARK: -  VIEW
struct TaskBootCamp: View {
// MARK: -  PROPERTY
@StateObject private var vm = TaskBootCampViewModel()
// MARK: -  BODY
var body: some View {
VStack(spacing: 40) {
if let image = vm.image {
  Image(uiImage: image)
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
}
if let image = vm.image2 {
  Image(uiImage: image)
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
}
} //: VSTACK
.onAppear {

// The order of task priorities
  Task(priority: .high) {
    // Task.yield() just can wait and let other tasks go in front of it if there are other tasks
    await Task.yield()
    print("High: \(Thread.current) : \(Task.currentPriority)")
  }
  Task(priority: .userInitiated) {
    print("UserInitiated: \(Thread.current) : \(Task.currentPriority)")
  }
  Task(priority: .medium) {
    print("Medium: \(Thread.current) : \(Task.currentPriority)")
  }

  Task(priority: .low) {
    print("Low: \(Thread.current) : \(Task.currentPriority)")
  }
  Task(priority: .utility) {
    print("Utility: \(Thread.current) : \(Task.currentPriority)")
  }
  Task(priority: .background) {
    print("Background: \(Thread.current) : \(Task.currentPriority)")
  }

Add child Tasks

// child tasks will inherit all of the metadata from parent tasks
Task(priority: .userInitiated) {
  print("UserInitiated: \(Thread.current) : \(Task.currentPriority)")

  // detached has a different priority than the parent priority
  Task.detached {
    print("detached: \(Thread.current) : \(Task.currentPriority)")
  }
}

Cancel Tasks

There’s one of the most important things about tasks because when you create so many tasks in your app. But, if you move away from the screen or does something else we also want the ability to cancel to save power wise and might want to cancel them if things move off screen

// MARK: -  HOMEVIEW
struct TaskBootCampHomeView: View {
var body: some View {
NavigationView {
  ZStack {
    NavigationLink("Click Me!!") {
      TaskBootCamp()
    }
  } //: ZSTACK
} //: NAVIGATION
}
}


// MARK: -  VIEW
struct TaskBootCamp: View {
// MARK: -  PROPERTY
@StateObject private var vm = TaskBootCampViewModel()
@State private var fetchImageTask: Task<(), Never>? = nil
// MARK: -  BODY
var body: some View {
VStack(spacing: 40) {
if let image = vm.image {
  Image(uiImage: image)
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
}
if let image = vm.image2 {
  Image(uiImage: image)
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
}
} //: VSTACK
.onDisappear(perform: {
// when display off then cancel tasks during process
fetchImageTask?.cancel()
})
.onAppear {
fetchImageTask = Task {
  print(Thread.current)
  print(Task.currentPriority)
  await vm.fetchImage()
}
}
}
}

Task modifier (iOS 15)

.task { code } : Adds an asynchronous task to perform when this view appears

// MARK: -  HOMEVIEW
struct TaskBootCampHomeView: View {
var body: some View {
NavigationView {
  ZStack {
    NavigationLink("Click Me!!") {
      TaskBootCamp()
    }
  } //: ZSTACK
} //: NAVIGATION
}
}


// MARK: -  VIEW
struct TaskBootCamp: View {
// MARK: -  PROPERTY
@StateObject private var vm = TaskBootCampViewModel()
@State private var fetchImageTask: Task<(), Never>? = nil
// MARK: -  BODY
var body: some View {
VStack(spacing: 40) {
if let image = vm.image {
  Image(uiImage: image)
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
}
if let image = vm.image2 {
  Image(uiImage: image)
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
}
} //: VSTACK

// SwiftUI automatically cancels the task if the view disappears before the action completes
.task {
await vm.fetchImage()
}

Task.checkCancellation() throws

If the task is cancelled this will throw an error

for x in array {
  // working loop right here if it was running this after each piece of work it would check if the task is canceled and then it would stop if the task was canceled and it would throw back an error our of this function. Obviously, not throwing so we have to deal with all of that if you have long running tasks and you are going to cancel them you might want to throw in an occasional check for the task actually being cancelled

  try Task.checkCancellation()

}

🗃 Reference

SwiftUI Thinking - https://youtu.be/fTtaEYo14jI

Async, Await

Wed, 04 May 2022 00:00:00 +0000

Async and Await

For the example to do delay task compare with DispatchQueue.main.asyncAfter and Async & Await

DispatchQueue.main.asyncAfter

// MARK: -  VIEWMODEL
class AsyncAwaitBootcampViewModel: ObservableObject {
	// MARK: -  PROPERTY
	@Published var dataArray: [String] = []
	// MARK: -  INIT
	// MARK: -  FUNCTION
	func addTilte1() {
		// main thread
		DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
			self.dataArray.append("Title1: \(Thread.current)")
		}
	}

	func addTilte2() {
		// global thread
		DispatchQueue.global().asyncAfter(deadline: .now() + 2.0) {
			let title = "Title2: \(Thread.current)"
			DispatchQueue.main.async {
				self.dataArray.append(title)

				// main thread
				let title3 = "Title3: \(Thread.current)"
				self.dataArray.append(title3)
			}
		}
	}

// MARK: -  VIEW
struct AsyncAwaitBootCamp: View {
	@StateObject private var vm = AsyncAwaitBootcampViewModel()
	// MARK: -  PROPERTY
	// MARK: -  BODY
	var body: some View {
		List {
			ForEach(vm.dataArray, id: \.self) {
				Text($0)
			}
		} //: LIST
		.onAppear {
			vm.addTilte1()
			vm.addTilte2()
		}
	}
}

Async & Await

import SwiftUI

// MARK: -  VIEWMODEL
class AsyncAwaitBootcampViewModel: ObservableObject {
// MARK: -  PROPERTY
@Published var dataArray: [String] = []
// MARK: -  INIT
// MARK: -  FUNCTION
func addAuthor1() async {
let author1 = "Autor1: \(Thread.current)"
self.dataArray.append(author1)

try? await Task.sleep(nanoseconds: 2_000_000_000) // delay 2 secs like DispachQueue.main.asyncAfter(dealine: .now() + 2.0)
// try? await doSomething() // all processing tasks on main thread

// author2 : global thread
let author2 = "Autor2: \(Thread.current)"
await MainActor.run(body: {
  self.dataArray.append(author2)

  // author3: main thread
  let author3 = "Autor3: \(Thread.current)"
  self.dataArray.append(author3)
})
}

func addSomething() async {
try? await Task.sleep(nanoseconds:  2_000_000_000)
let something1 = "Something1: \(Thread.current)"
await MainActor.run(body: {
  self.dataArray.append(something1)

  let something2 = "Something2: \(Thread.current)"
  self.dataArray.append(something2)
})
}
}

// MARK: -  VIEW
struct AsyncAwaitBootCamp: View {
@StateObject private var vm = AsyncAwaitBootcampViewModel()
// MARK: -  PROPERTY
// MARK: -  BODY
var body: some View {
List {
  ForEach(vm.dataArray, id: \.self) {
    Text($0)
  }
} //: LIST
.onAppear {
  Task {
    await vm.addAuthor1()
    await vm.addSomething()

    let finalText = "FINAL TEXT: \(Thread.current)"
    vm.dataArray.append(finalText)
  }
}
}
}

Download image with Async and Await

Compare with different asynchronous way such as @escaping, combine and Async & Await when it comes from downloading image

Case 1. Download image with @escaping

import SwiftUI

// MARK: -  SERVICE
class DownloadImageAsyncImageLoader {
let url = URL(string: "https://picsum.photos/200")!

func handleResponse(data: Data?, response: URLResponse?) -> UIImage? {
guard
  let data = data,
  let image = UIImage(data: data),
  let response = response as? HTTPURLResponse,
  response.statusCode >= 200 && response.statusCode < 300 else {
    return nil
  }
return image
}

func downloadWithEscaping(completionHandler: @escaping (_ image: UIImage?, _ error: Error?) -> ()) {
URLSession.shared.dataTask(with: url) { [weak self] data, response, error in
  let image = self?.handleResponse(data: data, response: response)
  completionHandler(image, error)
}
.resume()
}
}

// MARK: -  VIEWMODEL
class DownloadImageAsyncViewModel: ObservableObject {
// MARK: -  PROPERTY
@Published var image: UIImage? = nil
let loader = DownloadImageAsyncImageLoader()
// MARK: -  INIT
// MARK: -  FUNCTION
func fetchImage() {
loader.downloadWithEscaping { [weak self] image, error in
  DispatchQueue.main.async {
    self?.image = image
  }
}
}
}

// MARK: -  VIEW
struct DownloadImageAsync: View {
// MARK: -  PROPERTY
@StateObject private var vm = DownloadImageAsyncViewModel()
// MARK: -  BODY
var body: some View {
ZStack {
  if let image = vm.image {
    Image(uiImage: image)
      .resizable()
      .scaledToFit()
      .frame(width: 250, height: 250)
  }
} //: ZSTACK
.onAppear {
  vm.fetchImage()
}
}
}

Case 2. Download image with Combine

import SwiftUI
import Combine

// MARK: -  SERVICE
class DownloadImageAsyncImageLoader {
let url = URL(string: "https://picsum.photos/200")!

func handleResponse(data: Data?, response: URLResponse?) -> UIImage? {
guard
  let data = data,
  let image = UIImage(data: data),
  let response = response as? HTTPURLResponse,
  response.statusCode >= 200 && response.statusCode < 300 else {
    return nil
  }
return image
}


func downloadWithCombine() -> AnyPublisher<UIImage?, Error> {
URLSession.shared.dataTaskPublisher(for: url)
  .map(handleResponse)
  .mapError({ $0 })
  .eraseToAnyPublisher()
}
}

// MARK: -  VIEWMODEL
class DownloadImageAsyncViewModel: ObservableObject {
// MARK: -  PROPERTY
@Published var image: UIImage? = nil
let loader = DownloadImageAsyncImageLoader()
var cancellables = Set<AnyCancellable>()
// MARK: -  INIT
// MARK: -  FUNCTION
func fetchImage() {
  loader.downloadWithCombine()
    .receive(on: DispatchQueue.main)
    .sink { _ in

    } receiveValue: { [weak self] image in
        self?.image = image
    }
    .store(in: &cancellables)
}
}

Case 3. Download image with Async and Await

// MARK: -  SERVICE
class DownloadImageAsyncImageLoader {
let url = URL(string: "https://picsum.photos/200")!

func handleResponse(data: Data?, response: URLResponse?) -> UIImage? {
guard
  let data = data,
  let image = UIImage(data: data),
  let response = response as? HTTPURLResponse,
  response.statusCode >= 200 && response.statusCode < 300 else {
    return nil
  }
return image
}
func downloadWithAsync() async throws -> UIImage? {
  do {
    let (data, response) = try await URLSession.shared.data(from: url, delegate: nil)
    return handleResponse(data: data, response: response)
  } catch  {
    throw error
  }
}
}

// MARK: -  VIEWMODEL
class DownloadImageAsyncViewModel: ObservableObject {
	// MARK: -  PROPERTY
	@Published var image: UIImage? = nil
	let loader = DownloadImageAsyncImageLoader()
	var cancellables = Set<AnyCancellable>()
	// MARK: -  INIT
	// MARK: -  FUNCTION
	func fetchImage() async {
		let image = try? await loader.downloadWithAsync()
		await MainActor.run {
			self.image = image
		}
	}
}

// MARK: -  VIEW
struct DownloadImageAsync: View {
// MARK: -  PROPERTY
@StateObject private var vm = DownloadImageAsyncViewModel()
// MARK: -  BODY
var body: some View {
ZStack {
if let image = vm.image {
  Image(uiImage: image)
    .resizable()
    .scaledToFit()
    .frame(width: 250, height: 250)
}
} //: ZSTACK
.onAppear {
Task {
  await vm.fetchImage()
}
}
}
}

🗃 Reference

SwiftUI Thinking - https://youtu.be/-5kIzkBqAzc

Do-Catch, Try and Throws

Tue, 26 Apr 2022 00:00:00 +0000

Do-Catch, Try and Throws

import SwiftUI

// MARK: -  DATA SERVICE
class DoCatchTryThrowsBootCampDataManager {
let isActive: Bool = false

func getTitle() -> String? {
  if isActive {
    return "New Text"
  } else {
    return nil
  }
}
}

// MARK: -  VIEWMODEL
class DoCatchTryThrowsBootCampViewModel: ObservableObject {
// MARK: -  PROPERTY
@Published var text: String = "Starting text."
let manager = DoCatchTryThrowsBootCampDataManager()

// MARK: -  INIT
// MARK: -  FUNCTION
func fetchTitle() {
  let newTilte = manager.getTitle()
  if let newTilte = newTilte {
    self.text = newTilte
  }
}
}

// MARK: -  VIEW
struct DoCatchTryThrowsBootCamp: View {
// MARK: -  PROPERTY
@StateObject private var vm = DoCatchTryThrowsBootCampViewModel()
// MARK: -  BODY
var body: some View {
  Text(vm.text)
    .frame(width: 300, height: 300)
    .background(Color.blue)
    .onTapGesture {
      vm.fetchTitle()
    }
}
}

Above code, an optional right as a developer we know that is returning optional because it failed to get the text but if you’re sharing this code if other people are using this code that’s not ve bry clear and it might look like a bug in your app if maybe things are just not updating. Take it a step further and maybe return an error instead

This is good this is a bit better in our code now the ability to check for real values and also check for errors but This is kind of a hassle for us as developers because really we want to return a result here either this function should be successful or it should fail it shouldn’t really return us a title end an error. It’s probably only be getting one or the other there’s never really a use case where we’re going to get both of these

// MARK: -  DATA SERVICE
class DoCatchTryThrowsBootCampDataManager {
let isActive: Bool = false

func getTitle() -> (title:String?, error: Error?) {
  if isActive {
    return ("New Text",nil)
  } else {
    return (nil, URLError(.badURL))
  }
}
}

// MARK: -  VIEWMODEL
class DoCatchTryThrowsBootCampViewModel: ObservableObject {
// MARK: -  PROPERTY
@Published var text: String = "Starting text."
let manager = DoCatchTryThrowsBootCampDataManager()

// MARK: -  INIT
// MARK: -  FUNCTION
func fetchTitle() {
  let returnedValue = manager.getTitle()
  if let newTilte = returnedValue.title {
    self.text = newTilte
  } else if let error = returnedValue.error {
    self.text = error.localizedDescription
  }
}
}

So, It’s like little but better now because this is if you’re sharing this with other developers or even if you’re just coming back to this successful, failure state. It’s no longer giving us back both and then we have to kind of manage which one is which and look at both cases and look at all the data instead now we just get back a result

class DoCatchTryThrowsBootCampDataManager {
	let isActive: Bool = false

	func getTitle2() -> Result<String, Error> {
		if isActive {
			return .success("New Text!")
		} else {
			return .failure(URLError(.appTransportSecurityRequiresSecureConnection))
		}
	}
}

// MARK: -  VIEWMODEL
class DoCatchTryThrowsBootCampViewModel: ObservableObject {
	// MARK: -  PROPERTY
	@Published var text: String = "Starting text."
	let manager = DoCatchTryThrowsBootCampDataManager()

	// MARK: -  INIT
	// MARK: -  FUNCTION
	func fetchTitle() {
		let result = manager.getTitle2()

		switch result {
		case .success(let newTitile):
			self.text = newTitile
		case .failure(let error):
			self.text = error.localizedDescription
		}
	}
}

To use throw keyWord and then handle error using do try catch statement

// MARK: -  DATA SERVICE
class DoCatchTryThrowsBootCampDataManager {
let isActive: Bool = false

func getTitle() -> (title:String?, error: Error?) {
  if isActive {
    return ("New Text",nil)
  } else {
    return (nil, URLError(.badURL))
  }
}

func getTitle2() -> Result<String, Error> {
  if isActive {
    return .success("New Text!")
  } else {
    return .failure(URLError(.appTransportSecurityRequiresSecureConnection))
  }
}

// throws meaning it can throw
func getTile3() throws -> String {
  if isActive {
    return "New Text!"
  } else {
    throw URLError(.badServerResponse)
  }
}
}

// MARK: -  VIEWMODEL
class DoCatchTryThrowsBootCampViewModel: ObservableObject {
// MARK: -  PROPERTY
@Published var text: String = "Starting text."
let manager = DoCatchTryThrowsBootCampDataManager()

// MARK: -  INIT
// MARK: -  FUNCTION
func fetchTitle() {
  do {
    let newTitle = try manager.getTile3()
    self.text = newTitle
  } catch {
    self.text = error.localizedDescription
  }
}
}

When you use throw statement and then initialized code to use try? include return nil when it comes error (Not necessary Do catch statement)

// MARK: -  DATA SERVICE
class DoCatchTryThrowsBootCampDataManager {
	let isActive: Bool = true


	func getTile4() throws -> String {
		if isActive {
			return "Final Text!"
		} else {
			throw URLError(.badServerResponse)
		}
	}
}

// MARK: -  VIEWMODEL
class DoCatchTryThrowsBootCampViewModel: ObservableObject {
// MARK: -  PROPERTY
@Published var text: String = "Starting text."
let manager = DoCatchTryThrowsBootCampDataManager()

// MARK: -  INIT
// MARK: -  FUNCTION
func fetchTitle() {

  let newTitle = try? manager.getTile3()
  if let newTitle = newTitle {
    self.text = newTitle
  }
}
}

// MARK: -  FUNCTION
func fetchTitle() {
do {
  let newTitle = try? manager.getTile3()
  if let newTitle = newTitle {
    self.text = newTitle
  }
  let finalTile = try manager.getTile4()
  self.text = finalTile

} catch {
  self.text = error.localizedDescription
}
}

Most of our asynchronous code in our asynchronous functions are going to actually be functions that throw errors so this syntax is going to be really common in async await and when you’re using throws you’re almost always using do catch statement

🗃 Reference

SwiftUI Thinking - https://youtu.be/ss50RX7F7nE

문자열 내 마음대로 정렬하기 (Lv1. Swift)

Fri, 15 Apr 2022 00:00:00 +0000

문자열 내 마음대로 정렬하기 (Lv1. Swift)

🔍 문제

문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 [“sun”, “bed”, “car”]이고 n이 1이면 각 단어의 인덱스 1의 문자 “u”, “e”, “a”로 strings를 정렬합니다.

🔶 제한사항

strings는 길이 1 이상, 50이하인 배열입니다.
strings의 원소는 소문자 알파벳으로 이루어져 있습니다.
strings의 원소는 길이 1 이상, 100이하인 문자열입니다.
모든 strings의 원소의 길이는 n보다 큽니다.
인덱스 1의 문자가 같은 문자열이 여럿 일 경우, 사전순으로 앞선 문자열이 앞쪽에 위치합니다.

🔹 입출력 예

🔹 입출력 예 설명

입출력 예 1 “sun”, “bed”, “car”의 1번째 인덱스 값은 각각 “u”, “e”, “a” 입니다. 이를 기준으로 strings를 정렬하면 [“car”, “bed”, “sun”] 입니다.

입출력 예 2 “abce”와 “abcd”, “cdx”의 2번째 인덱스 값은 “c”, “c”, “x”입니다. 따라서 정렬 후에는 “cdx”가 가장 뒤에 위치합니다. “abce”와 “abcd”는 사전순으로 정렬하면 “abcd”가 우선하므로, 답은 [“abcd”, “abce”, “cdx”] 입니다.

📌 풀이

각 문자열의 n번째의 문자를 맨 앞에다가 “_“와 함께 붙여준다.

예를 들어 [abce, abcd, cdx] -> [b_abce, b_abcd, d_cdx] 이렇게 바꿔준다.

이걸 오름차순으로 정렬하고!
“_“를 기준으로 문자열을 잘라내어 나머지만 출력하면 된다.

func solution(_ strings:[String], _ n:Int) -> [String] {
    var temp: [String] = []
    var result: [String] = []

    // 1. 각 문자열의 n번째의 문자를 "_"와 함께 제일 앞에 붙여준다
    for i in strings {
        temp.append("\(i[i.index(i.startIndex, offsetBy: n)])_\(i)")
    }

    // 2. 오름차순으로 정렬한다
    temp.sort()

    // 3. 위에서 붙였던 "n번째 문자 _"를 다시 잘라내준다
    for word in temp {
        result.append(word.components(separatedBy: "_")[1])
    }
    return result
}

print(solution(["sun", "bed", "car"], 1)) // ["car", "bed", "sun"]

// 한줄로 작성하기

func solution(_ strings:[String], _ n:Int) -> [String] {
    return strings.sorted{  Array($0)[n] == Array($1)[n] ? $0 < $1 :  Array($0)[n] < Array($1)[n] }
}
print(solution(["sun", "bed", "car"], 1)) // ["car", "bed", "sun"]

Reference

프로그래머스 -

시지 암호 (Lv1. Swift)

Fri, 15 Apr 2022 00:00:00 +0000

시지 암호 (Lv1. Swift)

🔍 문제

어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 “AB”는 1만큼 밀면 “BC”가 되고, 3만큼 밀면 “DE”가 됩니다. “z”는 1만큼 밀면 “a”가 됩니다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보세요.

🔶 제한사항

공백은 아무리 밀어도 공백입니다.
s는 알파벳 소문자, 대문자, 공백으로만 이루어져 있습니다.
s의 길이는 8000이하입니다.
n은 1 이상, 25이하인 자연수입니다.

🔹 입출력 예

📌 풀이

index를 이용해 n번만큼 밀어내기 위해, 알파벳 순서대로 String타입의 배열을 만든다.

: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]

해당 문자가 대문자 인지 체크한다

.isUppercase
알파벳 배열에서 해당 문자가 몇번 째에 있는 지 확인한다. 모든 문자는 알파벳 배열에 맞춰 소문자로 변환해 주어 사용한다.

: alphabet.firstIndex(of: letter.lowercased())

해당 문자를 n번만큼 이동시킨 index를 계산한다.

: index + n > 25 ? index + n - 26 : index + n

알파벳 문자열에는 총 26개의 문자열만 존재하므로 index는 0~25까지 사용할 수 있다. 따라서 현재 index에서 +n을 한 값이 25보다 크다면 index 0부터 다시 셀 수 있도록 -26을 해주어야 한다.

해당 문자가 대문자인 경우(.isUppercase가 true일 경우), 대문자로 변환하여 result값에 저장되도록 한다.

: isUpperCase ? alphabet[nIndex].uppercased() : alphabet[nIndex]

// 반복문을 통한 풀이
func solution(_ s:String, _ n:Int) -> String {

let alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]
var result = ""

for letter in s {
let isUpperCase = letter.isUppercase

if let index = alphabet.firstIndex(of: letter.lowercased()) {
    let nIndex = index + n > 25 ? index + n - 26 : index + n
    result += isUpperCase ? alphabet[nIndex].uppercased() : alphabet[nIndex]
} else {
    result += " "
}
}
return result
}

print(solution("AB", 1)) // "BC"

func solution(_ s:String, _ n:Int) -> String {
let alphabets = "abcdefghijklmnopqrstuvwxyz".map { $0 }
return String(s.map {
  guard let index = alphabets.firstIndex(of: Character($0.lowercased())) else { return $0 }
  let letter = alphabets[(index + n) % alphabets.count]
  return $0.isUppercase ? Character(letter.uppercased()) : letter
})
}

Reference

프로그래머스 - https://programmers.co.kr/learn/courses/30/lessons/12926

Dependency Injection in SwiftUI

Thu, 14 Apr 2022 00:00:00 +0000

Dependency Injection in SwiftUI

Nowadays, Dependency injection is a really hot term. This is actually injecting your dependencies but what that really means is when we create a struct or class that has dependencies instead of referencing the dependencies from within the class or within the struct themselves.

We’re going to actually inject the dependencies into the struct through the initializer. So if you’ve been using custom and inits in your struct in you classes you’ve already been doing a little bit of dependency injection

We can programmatically change what is injected into the class so we can change our inputs we can customize the init so that the structure of the class maybe performs or acts differently. It is important thing is your app architecture cause when you’ve using dependency injection at some point in your code you’re going to create your dependencies and then you’re going to inject and pass those dependencies throughout all your views your classes your ViewModels

To figure out when we should actually create those dependencies and what is the flow where we should actually pass those dependencies to all of those structs and classes

Before dependency Injection, Fetch fakeData from JSONplaceholder by using Combine

JSONplaceholder : https://jsonplaceholder.typicode.com/posts

import SwiftUI
import Combine

// MARK: -  MODEL
struct PostModel: Identifiable, Codable {
let userId: Int
let id: Int
let title: String
let body: String
}

// MARK: -  DATA SERVICE
class ProductionDataService {
static let instance = ProductionDataService() // Singleton

let url: URL = URL(string: "https://jsonplaceholder.typicode.com/posts")!

func getData() -> AnyPublisher<[PostModel], Error> {
  URLSession.shared.dataTaskPublisher(for: url)
    .map({ $0.data })
    .decode(type: [PostModel].self, decoder: JSONDecoder())
    .receive(on: DispatchQueue.main)
    .eraseToAnyPublisher()
}
}

// MARK: -  VIEWMODEL
class DependencyInjectionViewModel: ObservableObject {
// MARK: -  PROPERTY
@Published var dataArray: [PostModel] = []
var cancellables = Set<AnyCancellable>()
// MARK: -  INIT
init() {
loadPosts()
}
// MARK: -  FUNCTION
private func loadPosts() {
ProductionDataService.instance.getData()
  .sink { _ in

  } receiveValue: { [weak self] returnedPosts in
    self?.dataArray = returnedPosts
  }
  .store(in: &cancellables)

}
}

// MARK: -  VIEW
struct DependencyInjectionBootCamp: View {
// MARK: -  PROPERTY
@StateObject private var vm = DependencyInjectionViewModel()
// MARK: -  BODY
var body: some View {
ScrollView {
  VStack {
    ForEach(vm.dataArray) { post in
      Text(post.title)
    }
  } //: VSTACK
} //: SCROLL
}
}

Dependency Injection is basically the solution or an alternative to using the singleton design pattern. Singleton Pattern great for when you are learning out of code but there are a lot of flaws and problems with using singletons

The Problem of using Singletons
- Singleton’s are GLOBAL : We can access this instance from anywhere in our code. When you start making larger apps It’s going to get confusing if you have a bunch of global variables. Additionally, if you have singleton instance and it’s being accessed from a bunch of different places in your app at the same time you could run into some really big problems if maybe you’re using a multi-threaded environment so you’re doing different tasks on different threads and those different threads are trying to access the same instance at the same time you could end up getting a bunch of crashes in your app
- Can’t customize the init! : When we initialize our production data service as a singleton we’re not initializing it with any data. It is important when you start trying to add testing to your app
- Can’t swap out dependencies : We can use protocols to swap things in an out of app. But if your app is always referencing the production data service instance always going to end up referencing this exact class and therefore we have to use this exact data service we can’t use another data service

So, avoid to these problems in Singleton is to use dependency injection.

If the data service we want to initialize it pretty much early on in our app almost at the beginning of our app and then inject it into the res of our app all the Views and ViewModels that need a reference to the data service

import SwiftUI
import Combine

// MARK: -  MODEL
struct PostModel: Identifiable, Codable {
	let userId: Int
let id: Int
let title: String
let body: String
}

// MARK: -  PROTOCOL
// To use Protocol swap in and out whatever we want to use as the data service
// if we were testing or maybe just developing quickly we could then use our mock data service
protocol DataServiceProtocol {
func getData() -> AnyPublisher<[PostModel], Error>
}

// MARK: -  DATA SERVICE
class ProductionDataService {
let url: URL

init(url: URL) {
self.url = url
}

func getData() -> AnyPublisher<[PostModel], Error> {
URLSession.shared.dataTaskPublisher(for: url)
  .map({ $0.data })
  .decode(type: [PostModel].self, decoder: JSONDecoder())
  .receive(on: DispatchQueue.main)
  .eraseToAnyPublisher()
}
}

class MockDataService: DataServiceProtocol {

let testData: [PostModel]

init(data: [PostModel]?) {
self.testData = data ?? [
  PostModel(userId: 1, id: 1, title: "One", body: "one one"),
  PostModel(userId: 2, id: 2, title: "Two", body: "two two")
]
}

func getData() -> AnyPublisher<[PostModel], Error> {
Just(testData)
  .tryMap({ $0 })
  .eraseToAnyPublisher()
}
}



// MARK: -  VIEWMODEL
class DependencyInjectionViewModel: ObservableObject {
// MARK: -  PROPERTY
@Published var dataArray: [PostModel] = []
var cancellables = Set<AnyCancellable>()
let dataService: DataServiceProtocol
// MARK: -  INIT
// Not Global access in ProductionDataService
init(dataService: DataServiceProtocol) {
  self.dataService = dataService
  loadPosts()
}
// MARK: -  FUNCTION
private func loadPosts() {
  dataService.getData()
    .sink { _ in

    } receiveValue: { [weak self] returnedPosts in
      self?.dataArray = returnedPosts
    }
    .store(in: &cancellables)

}
}

// MARK: -  VIEW
struct DependencyInjectionBootCamp: View {
// MARK: -  PROPERTY
@StateObject private var vm: DependencyInjectionViewModel

init(dataService: DataServiceProtocol) {
_vm = StateObject(wrappedValue: DependencyInjectionViewModel(dataService: dataService))
}
// MARK: -  BODY
var body: some View {
ScrollView {
  VStack {
    ForEach(vm.dataArray) { post in
      Text(post.title)
    }
  } //: VSTACK
} //: SCROLL
}
}

// MARK: -  PREVIEW
struct DependencyInjectionBootCamp_Previews: PreviewProvider {

// Can customize init
// static let dataService = ProductionDataService(url: URL(string: "https://jsonplaceholder.typicode.com/posts")!)
static let dataService = MockDataService(data: nil)
static var previews: some View {
DependencyInjectionBootCamp(dataService: dataService)
}
}

🗃 Reference

SwiftUI Thinking - https://youtu.be/E3x07blYvdE

UIViewControllerRepresentable in SwiftUI

Wed, 13 Apr 2022 00:00:00 +0000

UIViewControllerRepresentable in SwiftUI

UIViewRepresentable used to take a view in UIKit convert it into SwiftUI. The only difference between UIViewRepresentable and UIViewControllerRepresentable to control entire controller. Controller essentially a screen and UIKit instead of just a sub view

struct UIViewControllerRepresentableBootCamp: View {
// MARK: -  PROPERTY
@State private var showScreen: Bool = false
// MARK: -  BODY
var body: some View {
VStack {
  Text("Hi")

  Button {
    showScreen.toggle()
  } label: {
    Text("Click Here")
  }
  .sheet(isPresented: $showScreen) {
    BasicUIViewControllerRepresentalbe(lableText: "New Screen!!")
  }
}
}
}

// MARK: -  PREVIEW
struct UIViewControllerRepresentableBootCamp_Previews: PreviewProvider {
static var previews: some View {
  UIViewControllerRepresentableBootCamp()
}
}

// MARK: -  UIViewControllerRepresentable
struct BasicUIViewControllerRepresentalbe: UIViewControllerRepresentable {

let lableText: String

func makeUIViewController(context: Context) -> some UIViewController {
  let vc = MyFirstViewController()
  vc.lableText = lableText
  return vc
}

func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {

}
}

class MyFirstViewController: UIViewController {

var lableText: String = "Starting value"
override func viewDidLoad() {
  super.viewDidLoad()

  view.backgroundColor = .blue

  let label = UILabel()
  label.text = lableText
  label.textColor = UIColor.white

  view.addSubview(label)
  label.frame = view.frame
}
}

Example of UIImagePickerController move to SwiftUI

struct UIViewControllerRepresentableBootCamp: View {
// MARK: -  PROPERTY
@State private var showScreen: Bool = false
@State private var image: UIImage? = nil
// MARK: -  BODY
var body: some View {
VStack {
Text("Hi")

if let image = image {
  Image(uiImage: image)
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
}

Button {
  showScreen.toggle()
} label: {
  Text("Click Here")
}
.sheet(isPresented: $showScreen) {
  UIImagePickerControllerRepresentable(image: $image, showScreen: $showScreen)
}
}
}
}

// MARK: -  PREVIEW
struct UIViewControllerRepresentableBootCamp_Previews: PreviewProvider {
static var previews: some View {
  UIViewControllerRepresentableBootCamp()
}
}

struct UIImagePickerControllerRepresentable: UIViewControllerRepresentable {
@Binding var image: UIImage?
@Binding var showScreen: Bool

func makeUIViewController(context: Context) -> UIImagePickerController {
  let vc = UIImagePickerController()
  vc.allowsEditing = false
  vc.delegate = context.coordinator
  return vc
}

// from SwiftUI to UIKit
func updateUIViewController(_ uiViewController: UIImagePickerController, context: Context) {

}

// from UIKit to SwiftUI
func makeCoordinator() -> Coordinator {
return Coordinator(image: $image, showScreen: $showScreen)
}

class Coordinator: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
@Binding var image: UIImage?
@Binding var showScreen: Bool

init(image: Binding<UIImage?>, showScreen: Binding<Bool>) {
  self._image = image
  self._showScreen = showScreen
}
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
  guard let newImage = info[.originalImage] as? UIImage else { return }
  image = newImage
  showScreen = false
}
}
}

🗃 Reference

SwiftUI Thinking - https://youtu.be/wqa1hCu8yCI

UIViewRepresentable in SwiftUI

Wed, 13 Apr 2022 00:00:00 +0000

UIViewRepresentable in SwiftUI

UIViewRepresentable is the simple wrapper that we can use to take UIKit components and put them into SwiftUI. There are still a lot of components un UIKit that are not available or not as customizable in SwiftUI

Occasionally, you might want to take a UIKit component and then put it in your SwiftUI APP. If you do run into a situation we want to convert an object like how to get a UIKit object onto the screen and how to interact between the UIKit and SwiftUI objects

// Convert a UIView from UIKit to SwiftUI
struct UIViewRepresentableBootCamp: View {
// MARK: -  PROPERTY
// MARK: -  BODY
var body: some View {
  VStack {
    Text("Hello")
    BasicUIViewRepresentable()
  } //: VSTACK
}
}

// MARK: -  PREVIEW
struct UIViewRepresentableBootCamp_Previews: PreviewProvider {
static var previews: some View {
  UIViewRepresentableBootCamp()
}
}

struct BasicUIViewRepresentable: UIViewRepresentable {

func makeUIView(context: Context) -> some UIView {
  let view = UIView()
  view.backgroundColor = .red
  return view
}

func updateUIView(_ uiView: UIViewType, context: Context) {

}
}

import SwiftUI

// Convert a UIView from UIKit to SwiftUI
struct UIViewRepresentableBootCamp: View {
// MARK: -  PROPERTY
@State private var text: String = ""
// MARK: -  BODY
var body: some View {
VStack {
Text(text)

HStack {
  Text("SwiftUI:")
  TextField("Type here..", text: $text)
    .frame(height: 55)
    .background(Color.gray.opacity(0.2))
}

HStack {
  Text("UIKit")
  UITextFieldViewRepresentable(text: $text)
    .updatePlaceholder("New Placeholder")
    .frame(height: 55)
    .background(Color.gray.opacity(0.2))
}

} //: VSTACK
}
}

// MARK: -  PREVIEW
struct UIViewRepresentableBootCamp_Previews: PreviewProvider {
static var previews: some View {
  UIViewRepresentableBootCamp()
}
}

struct UITextFieldViewRepresentable: UIViewRepresentable {

@Binding var text: String
var placeholder: String
let placeholderColor: UIColor

init(text: Binding<String>, placeholder: String = "Default placeholder...", placeholderColor: UIColor = .red) {
  self._text = text
  self.placeholder = placeholder
  self.placeholderColor = placeholderColor
}

func makeUIView(context: Context) -> UITextField {
  let textfield = getTextField()
  textfield.delegate = context.coordinator
  return textfield
}

// send data from SwiftUI to UIKit
func updateUIView(_ uiView: UITextField, context: Context) {
  uiView.text = text
}

private func getTextField() -> UITextField {
  let textfield = UITextField(frame: .zero)
  let placeholder = NSAttributedString(
    string: placeholder,
    attributes: [
      .foregroundColor : placeholderColor
    ])
  textfield.attributedPlaceholder = placeholder
  // textfield.delegate
  return textfield
}

func updatePlaceholder(_ text: String) -> UITextFieldViewRepresentable {
  var viewRepresentable = self
  viewRepresentable.placeholder = text
  return viewRepresentable
}

// Send data from UIKit to SwiftUI
func makeCoordinator() ->Coordinator {
  return Coordinator(text: $text)
}

class Coordinator: NSObject, UITextFieldDelegate {

  @Binding var text: String

  init(text: Binding<String>) {
    self._text = text
  }
  func textFieldDidChangeSelection(_ textField: UITextField) {
    text = textField.text ?? ""
  }
}
}

🗃 Reference

SwiftUI Thinking - https://youtu.be/1GYKyQHVDWw

Custom NavigationView in SwiftUI

Wed, 13 Apr 2022 00:00:00 +0000

Custom NavigationView in SwiftUI

The default NavigationView comes with swiftUI is not that customizable. But you could build a custom Nav View and Bar are actually create wrappers and wrap them around the default navigation view and link

But on the screen it’s going to appear like we’re using our own custom navigationView. To be possible by using ViewBuilders and PreferenceKeys

// Default NavigationView in Apple's API
struct AppNavBarView: View {
// MARK: -  PROPERTY
// MARK: -  BODY
var body: some View {
NavigationView {
ZStack {
Color.green.ignoresSafeArea()

NavigationLink(destination: Text("Destination")
                .navigationTitle("Title 2")
                .navigationBarBackButtonHidden(false)) {
  Text("Navigate")
}
}
.navigationTitle("Nav title here")
} //: NAVIGATION
}
}

// in CustomNavBarTitlePreferenceKey
import Foundation
import SwiftUI

struct CustomNavBarTitlePreferenceKey: PreferenceKey {
	static var defaultValue: String = ""

	static func reduce(value: inout String, nextValue: () -> String) {
		value = nextValue()
	}
}

struct CustomNavBarSubtitlePreferenceKey: PreferenceKey {
	static var defaultValue: String? = nil

	static func reduce(value: inout String?, nextValue: () -> String?) {
		value = nextValue()
	}
}
struct CustomNavBarBackButtonHiddenPreferenceKey: PreferenceKey {
	static var defaultValue: Bool = false

	static func reduce(value: inout Bool, nextValue: () -> Bool) {
		value = nextValue()
	}
}

extension View {
	func customNavigationTile(_ title: String) -> some View {
		self
			.preference(key: CustomNavBarTitilePreferenceKey.self, value: title)
	}

	func customNavigationSubtitle(_ subtitle: String?) -> some View {
		self
			.preference(key: CustomNavBarSubtitlePreferenceKey.self, value: subtitle)
	}

	func customNavigationBarBackButtonHidden(_ hidden: Bool) -> some View {
		self
			.preference(key: CustomNavBarBackButtonHiddenPreferenceKey.self, value: hidden)
	}

	// combine above three functions
	func customNavBarItems(title: String = "", subtitle: String? = nil, backButtonHidden: Bool = false) -> some View {
		self
			.customNavigationTile(title)
			.customNavigationSubtitle(subtitle)
			.customNavigationBarBackButtonHidden(backButtonHidden)
	}
}

// in CustomNavLink
struct CustomNavLink<Label:View, Destination:View>: View {
let destination: Destination
let label: Label

init(destination: Destination, @ViewBuilder label: () -> Label) {
self.destination = destination
self.label = label()
}

var body: some View {

NavigationLink(
  destination:
    CustomNavBarContainerView(content: {
      destination
    }).navigationBarHidden(true)){
  label
}
}
}

struct CustomNavLink_Previews: PreviewProvider {
static var previews: some View {
CustomNavView {
  CustomNavLink(
    destination: Text("Destination")) {
      Text("Click Me")
    }
}
}
}

// in CustomNavBarContainerView
// MARK: -  VIEW
struct CustomNavBarContainerView<Content: View>: View {
// MARK: -  PROPERTY
let content: Content
@State private var showBackButton: Bool = true
@State private var title: String = ""
@State private var subtitle: String? = nil

init(@ViewBuilder content: () -> Content) {
  self.content = content()
}
// MARK: -  BODY
var body: some View {
  VStack (spacing: 0) {
    CustomNavBarView(showBackButton: showBackButton, title: title, subtitle: subtitle)
    content
      .frame(maxWidth: .infinity, maxHeight: .infinity)
  }
  .onPreferenceChange(CustomNavBarTitilePreferenceKey.self) { value in
    self.title = value
  }
  .onPreferenceChange(CustomNavBarSubtitlePreferenceKey.self) { value in
    self.subtitle = value
  }
  .onPreferenceChange(CustomNavBarBackButtonHiddenPreferenceKey.self) { value in
    self.showBackButton = !value
  }
}
}

// MARK: -  PREVIEW
struct CustomNavBarContainerView_Previews: PreviewProvider {
static var previews: some View {
CustomNavBarContainerView {
ZStack {
  Color.green.ignoresSafeArea()

  Text("Hello")
    .foregroundColor(.white)
    .customNavigationTile("New Title")
    .customNavigationSubtitle("subtitle")
    .customNavigationBarBackButtonHidden(true)
}
}
}
}

// in CustomNavBarView
// MARK: -  VIEW
struct CustomNavBarView: View {
// MARK: -  PROPERTY
@Environment(\.presentationMode) var presentationMode
let  showBackButton: Bool
let title: String
let subtitle: String?
// MARK: -  BODY
var body: some View {
HStack {
  if showBackButton {
    backButton
  }
  Spacer()
  titleSection
  Spacer()
  if showBackButton {
    backButton
      .opacity(0)
  }

} //: HSTACK
.padding()
.accentColor(.white)
.foregroundColor(.white)
.font(.headline)
.background(Color.blue.ignoresSafeArea(edges: .top))
}
}

// MARK: -  PREVIEW
struct CustomNavBarView_Previews: PreviewProvider {
static var previews: some View {
VStack {
  CustomNavBarView(showBackButton: true, title: "Title here", subtitle: "Subtitle goes here")
  Spacer()
}
}
}

extension CustomNavBarView {
private var backButton: some View {
Button {
  presentationMode.wrappedValue.dismiss()
} label: {
  Image(systemName: "chevron.left")
}
}

private var titleSection: some View {
VStack (spacing: 4) {
  Text(title)
    .font(.title)
    .fontWeight(.semibold)
  if let subtitle = subtitle {
    Text(subtitle)
  }

} //: VSTACK
}
}

// in CustomNavView
struct CustomNavView<Content:View>: View {
// MARK: -  PROPERTY
let content: Content

init(@ViewBuilder content: () -> Content) {
self.content = content()
}
// MARK: -  BODY
var body: some View {
NavigationView {
  CustomNavBarContainerView {
    content
  }
  .navigationBarHidden(true)
} //: NAVIGATION
.navigationViewStyle(.stack)
}
}

// MARK: -  PREVIEW
struct CustomNavView_Previews: PreviewProvider {
static var previews: some View {
CustomNavView {
  Color.red.ignoresSafeArea()
}
}
}

// enable drag back gesture in CustomNavBar
extension UINavigationController {
open override func viewDidLoad() {
  super.viewDidLoad()
  interactivePopGestureRecognizer?.delegate = nil
}
}

struct AppNavBarView: View {
// MARK: -  BODY
var body: some View {
CustomNavView {
ZStack {
Color.orange.ignoresSafeArea()

CustomNavLink(destination:
              Text("Destination")
              .customNavigationTile("Second Screen")
              .customNavigationSubtitle("Sibtitle should be showing!!")
) {
Text("Navigate")
}
} //: ZSTACK
.customNavBarItems(title: "New Title!", subtitle: nil, backButtonHidden: true)
}
}
}

// MARK: -  PREVIEW
struct AppNavBarView_Previews: PreviewProvider {
static var previews: some View {
AppNavBarView()
}
}

// MARK: -  EXTENSTION
extension AppNavBarView {
private var defaultNavView: some View {
NavigationView {
ZStack {
Color.green.ignoresSafeArea()

NavigationLink(destination: Text("Destination")
              .navigationTitle("Title 2")
              .navigationBarBackButtonHidden(false)) {
Text("Navigate")
}
}
.navigationTitle("Nav title here")
} //: NAVIGATION
}
}

🗃 Reference

SwiftUI Thinking - https://youtu.be/aIDT4uuMLHc

Custom TabView in SwiftUI

Wed, 13 Apr 2022 00:00:00 +0000

Custom TabView in SwiftUI

There are majority of apps use either a tab bar or a navigation view and those two components in SwiftUI are not that customizable. Actually, model our custom tab view based off of apple’s API for the default tab view

The majority of features in Custom TabView

Generics
ViewBuilder
PreferenceKey
MatchedGeometryEffect

// General style tabView
import SwiftUI

struct AppTabBarView: View {
// MARK: -  PROPERTY
@State private var selection: String = "home"
// MARK: -  BODY
var body: some View {
TabView(selection: $selection) {
Color.red
  .tabItem {
    Image(systemName: "house")
    Text("Home")
  }

Color.blue
  .tabItem {
    Image(systemName: "heart")
    Text("Favorite")
  }

Color.orange
  .tabItem {
    Image(systemName: "person")
    Text("Profile")
  }
}
}
}

// MARK: -  PREVIEW
struct AppTabBarView_Previews: PreviewProvider {
static var previews: some View {
  AppTabBarView()
}
}

// in TabBarItem
import Foundation
import SwiftUI

// struct TabBarItem: Hashable {
// 	let iconName: String
// 	let title: String
// 	let color: Color
// }

// Model is handy when you don't know the actual data tat you're going to get
// TabBar specifically we actually have all that data in our code
// We have all of the data already it will actually be easier to make this tab bar item and enum instead of struct

enum TabBarItem: Hashable {
	case home, favorites, profile, messages

	var iconName: String {
		switch self {
		case .home: return "house"
		case .favorites: return "heart"
		case .profile: return "person"
		case .messages: return "message"
		}
	}

	var title: String {
		switch self {
		case .home: return "Home"
		case .favorites: return "Favorites"
		case .profile: return "Profile"
		case .messages: return "Messages"
		}
	}

	var color: Color {
		switch self {
		case .home: return Color.red
		case .favorites: return Color.blue
		case .profile: return Color.green
		case .messages: return Color.orange
		}
	}
}

// in TabBarItemsPreferenceKey
import Foundation
import SwiftUI

// MARK: -  Create PreferenceKey
struct TabBarItemsPreferenceKey: PreferenceKey {

static var defaultValue: [TabBarItem] = []

static func reduce(value: inout [TabBarItem], nextValue: () -> [TabBarItem]) {
  value += nextValue()
}
}

// MARK: -  ViewModifier
struct TabBarItemViewModifier: ViewModifier {

let tab: TabBarItem
@Binding var selection: TabBarItem

func body(content: Content) -> some View {
  content
    .opacity(selection == tab ? 1.0 : 0.0)
    .preference(key: TabBarItemsPreferenceKey.self, value: [tab])
}
}

// MARK: -  Extenstion
extension View {
func tabBarItem(tab: TabBarItem, selection: Binding<TabBarItem>) -> some View {
  self
    .modifier(TabBarItemViewModifier(tab: tab, selection: selection))
}
}

// in CustomTabBarContainerView
import SwiftUI

struct CustomTabBarContainerView<Content:View>: View {

@Binding var selection: TabBarItem
let content: Content
@State private var tabs: [TabBarItem] = []

init(selection: Binding<TabBarItem>, @ViewBuilder content: () -> Content) {
  self._selection = selection
  self.content = content()
}

var body: some View {
  ZStack(alignment: .bottom) {
      content
      .ignoresSafeArea()
    CustomTabBarView(tabs: tabs, selection: $selection, localSelection: selection)
    } //: ZSTACK
  .onPreferenceChange(TabBarItemsPreferenceKey.self) { value in
    self.tabs = value
  }
}
}

struct CustomTabBarContainerView_Previews: PreviewProvider {

static let tabs: [TabBarItem] = [
  .home, .favorites, .profile, .messages
]

static var previews: some View {
  CustomTabBarContainerView(selection: .constant(tabs.first!)) {
    Color.red
  }
}
}

// in CustomTabBarView
import SwiftUI

// MARK: -  VIEW
struct CustomTabBarView: View {
// MARK: -  PROPERTY
let tabs: [TabBarItem]
@Binding  var selection: TabBarItem
@Namespace private var namespace
@State var localSelection: TabBarItem

// MARK: -  BODY
var body: some View {
// tabBarVersion1
tabBarVersion2
  .onChange(of: selection) { newValue in
    withAnimation(.easeInOut) {
      localSelection = newValue
    }
  }
}
}

// MARK: -  PREVIEW
struct CustomTabBarView_Previews: PreviewProvider {

static let tabs: [TabBarItem] = [
.home, .favorites, .profile
]
static var previews: some View {
VStack {
  Spacer()
  CustomTabBarView(tabs: tabs, selection: .constant(tabs.first!), localSelection: tabs.first!)
}
}
}

// MARK: -  EXTENSTION
extension CustomTabBarView {
private func tabView(tab: TabBarItem) -> some View {
VStack {
Image(systemName: tab.iconName)
  .font(.subheadline)
Text(tab.title)
  .font(.system(size: 10, weight: .semibold, design: .rounded))
} //: VSTACK
.foregroundColor(selection == tab ? tab.color : Color.gray)
.padding(.vertical, 8)
.frame(maxWidth: .infinity)
.background(selection == tab ? tab.color.opacity(0.2) : Color.clear)
.cornerRadius(10)
}

private var tabBarVersion1: some View {
HStack {
ForEach(tabs, id: \.self) { tab in
  tabView(tab: tab)
    .onTapGesture {
      switchToTab(tab: tab)
    }
}
} //: HSTACK
.padding(6)
.background(Color.white.ignoresSafeArea(edges: .bottom))
}

private func switchToTab(tab: TabBarItem) {
selection = tab
}
}

// tabBarVersion2
extension CustomTabBarView {
private func tabView2(tab: TabBarItem) -> some View {
VStack {
Image(systemName: tab.iconName)
  .font(.subheadline)
Text(tab.title)
  .font(.system(size: 10, weight: .semibold, design: .rounded))
} //: VSTACK
.foregroundColor(localSelection == tab ? tab.color : Color.gray)
.padding(.vertical, 8)
.frame(maxWidth: .infinity)
.background(
ZStack {
  if localSelection == tab {
    RoundedRectangle(cornerRadius: 10)
      .fill(tab.color.opacity(0.2))
      .matchedGeometryEffect(id: "background_rectangle", in: namespace)
  }
} //: ZSTACK
)
}

private var tabBarVersion2: some View {
HStack {
ForEach(tabs, id: \.self) { tab in
  tabView2(tab: tab)
    .onTapGesture {
      switchToTab(tab: tab)
    }
}
} //: HSTACK
.padding(6)
.background(Color.white.ignoresSafeArea(edges: .bottom))
.cornerRadius(10)
.shadow(color: Color.black.opacity(0.3), radius: 10, x: 0, y: 5)
.padding(.horizontal)
}

}

import SwiftUI

struct AppTabBarView: View {
// MARK: -  PROPERTY
@State private var selection: String = "home"
@State private var tabSelection: TabBarItem = .home
// MARK: -  BODY
var body: some View {
CustomTabBarContainerView(selection: $tabSelection) {
  Color.blue
    .tabBarItem(tab: .home, selection: $tabSelection)

  Color.red
    .tabBarItem(tab: .favorites, selection: $tabSelection)

  Color.green
    .tabBarItem(tab: .profile, selection: $tabSelection)

  Color.orange
    .tabBarItem(tab: .messages, selection: $tabSelection)
}
}
}

// MARK: -  PREVIEW
struct AppTabBarView_Previews: PreviewProvider {
static var previews: some View {
  AppTabBarView()
}
}

// MARK: -  EXTENSTION
extension AppTabBarView {
private var defaultTabView: some View {
TabView(selection: $selection) {
Color.red
  .tabItem {
    Image(systemName: "house")
    Text("Home")
  }

Color.blue
  .tabItem {
    Image(systemName: "heart")
    Text("Favorite")
  }

Color.orange
  .tabItem {
    Image(systemName: "person")
    Text("Profile")
  }
} //: TAB
}
}

🗃 Reference

SwiftUI Thinking - https://youtu.be/FxW9Dxt896U

PreferenceKey in SwiftUI

Tue, 12 Apr 2022 00:00:00 +0000

PreferenceKey in SwiftUI

Once, you start building custom SwiftUI components you will run into situations where the preference key will come in handy the most common example of a preference key is actually the title in the navigation bar

So, SwiftUI if you use the regular navigation view you probably set the title for that navigation view within the child view of that screen and what you may have realized is that when we are setting the title in a navigation view, we are actually updating the parent title from a child view

In SwiftUI, normally data flows from parent views down to child views and the only way we can get it to flow back is if we use a binding. But you probably noticed that when you’re setting the title on a navigation view there is no binding we just set the title as a string and it updates the parent view and that’s because behind the scenes it is using a preference key.

struct PreferenceKeyBootCamp: View {
// MARK: -  PROPERTY
@State  private var text: String = "Hellow world!"
// MARK: -  BODY
var body: some View {
NavigationView {
  VStack {
    SecondaryScreen(text: text)
      .navigationTitle("Navigation Title")

  } //: VSTACK
} //: NAVIGATION
.onPreferenceChange(CustomTiltePreferenceKey.self) { value in
  self.text = value
}
}
}

// MARK: -  PREVIEW
struct PreferenceKeyBootCamp_Previews: PreviewProvider {
static var previews: some View {
  PreferenceKeyBootCamp()
}
}

struct SecondaryScreen: View {
let text: String
@State private var newValue: String = ""

var body: some View {
Text(text)
  .onAppear(perform: getDataFromDatabase)
  .customTitle(newValue)
}

func getDataFromDatabase() {
// download fake data
DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
  self.newValue = "New Value From DB"
}
}
}

extension View {
func customTitle(_ text: String) -> some View {
    preference(key: CustomTiltePreferenceKey.self, value: text)
}
}

struct CustomTiltePreferenceKey: PreferenceKey {

static var defaultValue: String = ""

static func reduce(value: inout String, nextValue: () -> String) {
  value = nextValue()
}
}

import SwiftUI

struct GeometryPreferenceBootCamp: View {
// MARK: -  PROPERTY
@State private var rectSize: CGSize = .zero
// MARK: -  BODY
var body: some View {
VStack(spacing: 50) {
Text("Hello")
  .frame(width: rectSize.width, height: rectSize.height)
  .background(Color.blue)


HStack {
  Rectangle()

  GeometryReader { geo in
    Rectangle()
      .updateRectangleGeoSize(geo.size)
  }

  Rectangle()
}
.frame(height: 55)
} //: VSTACK
.onPreferenceChange(RectangleGeometrySizePreferenceKey.self) { value in
self.rectSize = value
}
}
}

// MARK: -  PREVIEW
struct GeometryPreferenceBootCamp_Previews: PreviewProvider {
static var previews: some View {
  GeometryPreferenceBootCamp()
}
}

extension View {
func updateRectangleGeoSize(_ size: CGSize) -> some View {
  preference(key: RectangleGeometrySizePreferenceKey.self, value: size)
}
}

struct RectangleGeometrySizePreferenceKey: PreferenceKey {
static var defaultValue: CGSize = .zero

static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
  value = nextValue()
}
}

import SwiftUI

struct ScrollViewOffsetPreferenceKey: PreferenceKey {
static var defaultValue: CGFloat = 0
static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
  value = nextValue()
}
}

extension View {
func onScrollViewoffsetChnaged(action: @escaping (_ offset: CGFloat) -> Void) -> some View {
self
.background(
GeometryReader { geo in
      Text("")
        .preference(key: ScrollViewOffsetPreferenceKey.self, value: geo.frame(in: .global).minY)
    }
  )
.onPreferenceChange(ScrollViewOffsetPreferenceKey.self) { value in
action(value)
}
}
}

struct ScrollViewOffsetPreferenceBootCamp: View {

let title: String = "New title here!!!"
@State private var scrollViewOffset: CGFloat = 0

var body: some View {
ScrollView {
VStack {
titleLayer
  .opacity(Double(scrollViewOffset) / 63.0)
  .onScrollViewoffsetChnaged { value in
    self.scrollViewOffset = value
  }


contentLayer

} //: VSTACK
.padding()
} //: SCROLL
.overlay(Text("\(scrollViewOffset)"))

.overlay(
navBarLayer
.opacity(scrollViewOffset < 40 ? 1.0 : 0.0)
, alignment: .top
)
}
}

struct ScrollViewOffsetPreferenceBootCamp_Previews: PreviewProvider {
static var previews: some View {
ScrollViewOffsetPreferenceBootCamp()
}
}

extension ScrollViewOffsetPreferenceBootCamp {
private var titleLayer: some View {
Text(title)
  .font(.largeTitle)
  .fontWeight(.semibold)
  .frame(maxWidth: .infinity, alignment: .leading)
}

private var contentLayer: some View {
ForEach(0..<100) { _ in
  RoundedRectangle(cornerRadius: 10)
    .fill(Color.red.opacity(0.3))
    .frame(width: 300, height: 300)
} //: LOOP
}

private var navBarLayer: some View {
Text(title)
  .font(.headline)
  .frame(maxWidth: .infinity)
  .frame(height: 55)
  .background(Color.blue)

}
}

🗃 Reference

SwiftUI Thinking - https://www.youtube.com/watch?v=FxW9Dxt896U&list=PLwvDm4Vfkdphc1LLLjCaEd87BEg07M97y&index=11

ViewBuilder in SwiftUI

Tue, 12 Apr 2022 00:00:00 +0000

ViewBuilder in SwiftUI

We can use a view builder to create closures in which we can create custom child views. In order to use the view builder and get the most out of it we actually use the view builder alongside generic types

import SwiftUI

// MARK: -  VIEW
struct ViewBuilderBootCamp: View {
// MARK: -  PROPERTY

// MARK: -  BODY
var body: some View {
  VStack {
    HeaderViewRegular(title: "New Title", description: "Hello", iconName: "heart.fill")
    HeaderViewRegular(title: "Another Title", description: nil, iconName: nil)
    Spacer()
  } //: VSTACK
}
}

// MARK: -  EXTENSTION
struct HeaderViewRegular: View {
let title: String
let description: String?
let iconName: String?

var body: some View {
  VStack(alignment: .leading, spacing: 10) {
    Text(title)
      .font(.largeTitle)
      .fontWeight(.semibold)

    if let description = description {
      Text(description)
        .font(.callout)
    }
    if let iconName = iconName {
      Image(systemName: iconName)
    }

    RoundedRectangle(cornerRadius: 5)
      .frame(height: 2)

  } //: VSTACK
  .frame(maxWidth: .infinity, alignment: .leading)
  .padding()
}
}

Above method here is kind of getting annoying and not super efficient because we have custom logic for this description we’ve custom logic for this icon name what if we wanted to have 10 icons or more. So with this method we can actually just customize and add whatever we want into this view

If you want to be able to customize this view and put whatever we want inside of it we really need to pass a view into the view

To use @ViewBuilder to make customize aspects in Views

// MARK: -  VIEW
struct ViewBuilderBootCamp: View {
// MARK: -  PROPERTY

// MARK: -  BODY
var body: some View {
VStack {
HeaderViewRegular(title: "New Title", description: "Hello", iconName: "heart.fill")
HeaderViewRegular(title: "Another Title", description: nil, iconName: nil)

HeaderViewGeneric(title: "Generic Tilte") {
  HStack {
    Text("Hi")
    Image(systemName: "heart.fill")
  } //: HSTACK
}

CustomHStack {
  Text("Hi 1")
  Text("Hi 2")
}
HStack {
  Text("Hi 3")
  Text("Hi 4")
}
Spacer()
} //: VSTACK
}
}

// MARK: -  EXTENSTION
struct HeaderViewRegular: View {
let title: String
let description: String?
let iconName: String?

var body: some View {
VStack(alignment: .leading, spacing: 10) {
  Text(title)
    .font(.largeTitle)
    .fontWeight(.semibold)

  if let description = description {
    Text(description)
      .font(.callout)
  }
  if let iconName = iconName {
    Image(systemName: iconName)
  }

  RoundedRectangle(cornerRadius: 5)
    .frame(height: 2)

} //: VSTACK
.frame(maxWidth: .infinity, alignment: .leading)
.padding()
}
}

struct HeaderViewGeneric<Content:View>: View {

let title: String
let content: Content

init(title: String, @ViewBuilder content: () -> Content) {
self.title = title
self.content = content()
}

var body: some View {
VStack(alignment: .leading, spacing: 10) {
  Text(title)
    .font(.largeTitle)
    .fontWeight(.semibold)

  content

  // if let description = description {
  // 	Text(description)
  // 		.font(.callout)
  // }
  // if let iconName = iconName {
  // 	Image(systemName: iconName)
  // }
  //
  RoundedRectangle(cornerRadius: 5)
    .frame(height: 2)
} //: VSTACK
.frame(maxWidth: .infinity, alignment: .leading)
.padding()
}
}

struct CustomHStack<Content:View>: View {
let content: Content

init(@ViewBuilder content: () -> Content) {
  self.content = content()
}
var body: some View {
  HStack {
    content
  }
}
}

We can use @ViewBuilder instead of using it inside the init and we can actually just declare custom variables with the view builder attribute

struct LocalViewBuilder: View {
enum ViewType {
  case one, two, three
}
let type: ViewType

@ViewBuilder  private var headerSection: some View {
  switch type {
  case .one:
    viewOne
  case .two:
    viewTwo
  case .three:
    viewThree
  }
  // if type == .one {
  // 	viewOne
  // } else if type == .two {
  // 	viewTwo
  // } else if type == .three {
  // 	viewThree
  // }
}

private var viewOne: some View {
  Text("One!")
}
private var viewTwo: some View {
  VStack {
    Text("Two")
    Image(systemName: "heart.fill")
  }
}
private var viewThree: some View {
  Image(systemName: "heart.fill")
}
var body: some View {
  VStack {
    headerSection
  } //: VSTACK
}

}
/ MARK: -  PREVIEW
struct ViewBuilderBootCamp_Previews: PreviewProvider {
static var previews: some View {
  // ViewBuilderBootCamp()
  LocalViewBuilder(type: .one)
	}
}

🗃 Reference

SwiftUI Thinking - https://www.youtube.com/watch?v=EHhgjOt_KFA&list=PLwvDm4Vfkdphc1LLLjCaEd87BEg07M97y&index=6

핸드폰 번호 가리기 (Lv1. Swift)

Tue, 12 Apr 2022 00:00:00 +0000

핸드폰 번호 가리기 (Lv1. Swift)

🔍 문제

프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요.

🔶 제한사항

phone_number는 길이 4 이상, 20이하인 문자열입니다.

🔹 입출력 예

📌 풀이

마지막 숫자 4개를 제외하고 ‘_’ 를 출력하고 (String(repeating: "_", count: phone_number.count - 4))
마지막 숫자 4개만 그대로 출력되게 한다 (.suffix(4))

repeating을 통해 string을 초기화 해주는 방법과 .suffix를 이용하면 한줄로 구현할 수 있다.

func solution(_ phone_number:String) -> String {
    return String(repeating: "*", count: phone_number.count - 4) + phone_number.suffix(4)
}

print(solution("01033334444")) // *******4444

Reference

프로그래머스 - https://programmers.co.kr/learn/courses/30/lessons/12948

하샤드 수 (Lv1. Swift)

Tue, 12 Apr 2022 00:00:00 +0000

하샤드 수 (Lv1. Swift)

🔍 문제

양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요.

🔶 제한사항

x는 1 이상, 10000 이하인 정수입니다.

🔹 입출력 예

🔹 입출력 예 설명

입출력 예 #1 10의 모든 자릿수의 합은 1입니다. 10은 1로 나누어 떨어지므로 10은 하샤드 수입니다.

입출력 예 #2 12의 모든 자릿수의 합은 3입니다. 12는 3으로 나누어 떨어지므로 12는 하샤드 수입니다.

입출력 예 #3 11의 모든 자릿수의 합은 2입니다. 11은 2로 나누어 떨어지지 않으므로 11는 하샤드 수가 아닙니다.

입출력 예 #4 13의 모든 자릿수의 합은 4입니다. 13은 4로 나누어 떨어지지 않으므로 13은 하샤드 수가 아닙니다.

📌 풀이

x 를 string 으로 변환 (for 문 사용을 위해)
반복문을 통해 한 글자씩 다시 Int 로 변환하여 더하기 (sum)
x를 총 합 (sum) 으로 나누어 보고 0인지 확인하기

func solution(_ x:Int) -> Bool {
  var sum = 0
  for i in String(x) {
    guard let number = Int(String(i)) else { break }
    sum += number
  }
  return x % sum == 0
}

print(solution(10)) // true

Reference

프로그래머스 - https://programmers.co.kr/learn/courses/30/lessons/12947

Shapes, Curves, AnimateableData in SwiftUI

Mon, 11 Apr 2022 00:00:00 +0000

Shapes, Curves, AnimateableData in SwiftUI

Custom Straight lines

By default SwiftUI actually comes with a bunch of shapes out of the box like rectangles rounded rectangles circles. By building custom and unique UI designs eventually you’ll run into a point where actually need a custom shape.

SwiftUI by actually drawing the shape from point to point on a path

// MARK: -  VIEW
struct CustomShapesBootCamp: View {
// MARK: -  PROPERTY
// MARK: -  BODY
var body: some View {
ZStack {
  Triangle()
    // .fill(LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing))
    // .trim(from: 0, to: 0.5)
    .stroke(style: StrokeStyle(lineWidth: 3, lineCap: .round, dash: [10]))
    .foregroundColor(.blue)
    .frame(width: 300, height: 300)
} //: ZSTACK
}
}

// MARK: -  CUSTOM SHAPE
struct Triangle: Shape {

func path(in rect: CGRect) -> Path {
Path { path in
  path.move(to: CGPoint(x: rect.midX, y: rect.minY)) // Set Starting point
  path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
  path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
  path.addLine(to: CGPoint(x: rect.midX, y: rect.minY))
}
}
}

// MARK: -  VIEW
struct CustomShapesBootCamp: View {
// MARK: -  PROPERTY
// MARK: -  BODY
var body: some View {
ZStack {

Image("pic")
  .resizable()
  .scaledToFill()
  .frame(width: 300, height: 300)
  .clipShape(
    Triangle()
      .rotation(Angle(degrees: 180))
  )
} //: ZSTACK
}
}

// MARK: -  CUSTOM SHAPE
struct Triangle: Shape {

func path(in rect: CGRect) -> Path {
  Path { path in
    path.move(to: CGPoint(x: rect.midX, y: rect.minY)) // Set Starting point
    path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
    path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
    path.addLine(to: CGPoint(x: rect.midX, y: rect.minY))
  }
}
}

// MARK: -  VIEW
struct CustomShapesBootCamp: View {
// MARK: -  PROPERTY
// MARK: -  BODY
var body: some View {
  ZStack {

    Diamond()
      .frame(width: 300, height: 300)
  } //: ZSTACK
}
}

// MARK: -  CUSTOM SHAPE


struct Diamond: Shape {
func path(in rect: CGRect) -> Path {
Path { path in
  let horizontalOffset: CGFloat = rect.width * 0.2
  path.move(to: CGPoint(x: rect.midX, y: rect.minY))
  path.addLine(to: CGPoint(x: rect.maxX - horizontalOffset, y: rect.midY))
  path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
  path.addLine(to: CGPoint(x: rect.minX + horizontalOffset, y: rect.midY))
  path.addLine(to: CGPoint(x: rect.midX, y: rect.minY))
}
}
}

// MARK: -  VIEW
struct CustomShapesBootCamp: View {
// MARK: -  PROPERTY
// MARK: -  BODY
var body: some View {
ZStack {

  Trapezoid()
    .frame(width: 300, height: 150)
} //: ZSTACK
}
}

// MARK: -  CUSTOM SHAPE
struct Trapezoid: Shape {
func path(in rect: CGRect) -> Path {
Path { path in
  let horizontalOffset: CGFloat = rect.width * 0.2
  path.move(to: CGPoint(x: rect.minX + horizontalOffset, y: rect.minY ))
  path.addLine(to: CGPoint(x: rect.maxX - horizontalOffset, y: rect.minY))
  path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
  path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
  path.addLine(to: CGPoint(x: rect.minX + horizontalOffset, y: rect.minY))
}
}
}

Custom Curve Lines

Curves and arcs could be a little tricky to implement. To do that, arcs which is basically just a regular symmetrical curve and then quad curves which are a little more advanced and possibly more useful because they can connect two points and create an automatic curve between those two points

/ MARK: -  VIEW
struct CustomCurvesBootCamp: View {
// MARK: -  PROPERTY

// MARK: -  BODY
var body: some View {
  ArcSample()
    .stroke(lineWidth: 5)
    .frame(width: 200, height: 200)
}
}

// MARK: -  PREVIEW
struct CustomCurvesBootCamp_Previews: PreviewProvider {
static var previews: some View {
  CustomCurvesBootCamp()
}
}

// MARK: -  CUSTOM SHAPE
struct ArcSample: Shape {
func path(in rect: CGRect) -> Path {
Path { path in
  path.move(to: CGPoint(x: rect.maxX, y: rect.midY))
  path.addArc(
    center: CGPoint(x: rect.midX, y: rect.midY),
    radius: rect.height / 2,
    startAngle: Angle(degrees: 0),
    endAngle: Angle(degrees: 40),
    clockwise: true)
}
}
}

// MARK: -  VIEW
struct CustomCurvesBootCamp: View {
// MARK: -  PROPERTY

// MARK: -  BODY
var body: some View {
  ShapeWithArc()
    .frame(width: 200, height: 200)
    // .rotationEffect(Angle(degrees: 90))
}
}

// MARK: -  PREVIEW
struct CustomCurvesBootCamp_Previews: PreviewProvider {
static var previews: some View {
  CustomCurvesBootCamp()
}
}

// MARK: -  CUSTOM SHAPE
struct ShapeWithArc: Shape {
func path(in rect: CGRect) -> Path {
Path { path in
  // top left
  path.move(to: CGPoint(x: rect.minX, y: rect.minY))

  // top right
  path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))

  // mid right
  path.addLine(to: CGPoint(x: rect.maxX, y: rect.midY))

  // bottom
  // path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
  path.addArc(
    center: CGPoint(x: rect.midX, y: rect.midY),
    radius: rect.height / 2,
    startAngle: Angle(degrees: 0),
    endAngle: Angle(degrees: 180),
    clockwise: false)

  // mid left
  path.addLine(to: CGPoint(x: rect.minX, y: rect.midY))
}
}
}

Quad curve

// MARK: -  VIEW
struct CustomCurvesBootCamp: View {
// MARK: -  PROPERTY

// MARK: -  BODY
var body: some View {
  QuadSample()
    .frame(width: 200, height: 200)
}
}

// MARK: -  PREVIEW
struct CustomCurvesBootCamp_Previews: PreviewProvider {
static var previews: some View {
  CustomCurvesBootCamp()
}
}

// MARK: -  CUSTOM SHAPE
struct QuadSample: Shape {
func path(in rect: CGRect) -> Path {
Path { path in
  path.move(to: .zero)
  path.addQuadCurve(
    to: CGPoint(x: rect.maxX, y: rect.maxY),
    control: CGPoint(x: rect.minX, y: rect.maxY))
}
}
}

// MARK: -  VIEW
struct CustomCurvesBootCamp: View {
// MARK: -  PROPERTY

// MARK: -  BODY
var body: some View {
WaterShape()
  .fill(LinearGradient(
    gradient: Gradient(colors: [Color.blue, Color.cyan]),
    startPoint: .topTrailing,
    endPoint: .bottomTrailing))
  .ignoresSafeArea()
}
}

// MARK: -  PREVIEW
struct CustomCurvesBootCamp_Previews: PreviewProvider {
	static var previews: some View {
		CustomCurvesBootCamp()
	}
}

// MARK: -  CUSTOM SHAPE
struct WaterShape: Shape {
func path(in rect: CGRect) -> Path {
Path { path in
path.move(to: CGPoint(x: rect.minX, y: rect.midY))

path.addQuadCurve(
  to: CGPoint(x: rect.midX, y: rect.midY),
  control: CGPoint(x: rect.width * 0.25, y: rect.height * 0.40))

path.addQuadCurve(
  to: CGPoint(x: rect.maxX, y: rect.midY),
  control: CGPoint(x: rect.width * 0.75, y: rect.height * 0.60))

path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
}
}
}

Custom animated Lines

// MARK: -  VIEW
struct AnimatableDataBootCamp: View {
// MARK: -  PROPERTY
@State private var animate: Bool = false
// MARK: -  BODY
var body: some View {
ZStack {
  // RoundedRectangle(cornerRadius: animate ? 60 : 0)
  RectangleWithSingleCornerAnimation(cornerRadius: animate ? 60 : 0)
    .frame(width: 250, height: 250)
} //: ZSTACK
.onAppear {
  withAnimation(Animation.linear(duration: 2.0).repeatForever()) {
    animate.toggle()
  }
}
}
}

// MARK: -  PREVIEW
struct AnimatableDataBootCamp_Previews: PreviewProvider {
static var previews: some View {
  AnimatableDataBootCamp()
}
}

// MARK: -  CUSTOM SHAPE
struct RectangleWithSingleCornerAnimation: Shape {

var cornerRadius: CGFloat
var animatableData: CGFloat {
  get { cornerRadius }
  set { cornerRadius = newValue }
}

func path(in rect: CGRect) -> Path {
Path { path in
  path.move(to: .zero)
  path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
  path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY - cornerRadius))

  path.addArc(
    center: CGPoint(x: rect.maxX - cornerRadius, y: rect.maxY - cornerRadius),
    radius: cornerRadius,
    startAngle: Angle(degrees: 0),
    endAngle: Angle(degrees: 360),
    clockwise: false)
  path.addLine(to: CGPoint(x: rect.maxX - cornerRadius, y: rect.maxY ))
  path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
}
}
}

// MARK: -  VIEW
struct AnimatableDataBootCamp: View {
// MARK: -  PROPERTY
@State private var animate: Bool = false
// MARK: -  BODY
var body: some View {
ZStack {
  Pacman(offsetAmount: animate ? 20 : 0)
    .frame(width: 250, height: 250)
} //: ZSTACK
.onAppear {
  withAnimation(Animation.easeInOut.repeatForever()) {
    animate.toggle()
  }
}
}
}

// MARK: -  PREVIEW
struct AnimatableDataBootCamp_Previews: PreviewProvider {
	static var previews: some View {
		AnimatableDataBootCamp()
	}
}

// MARK: -  CUSTOM SHAPE

struct Pacman: Shape {

var offsetAmount: Double
var animatableData: Double {
get { offsetAmount }
set { offsetAmount = newValue }
}

func path(in rect: CGRect) -> Path {
Path { path in
  path.move(to: CGPoint(x: rect.midX, y: rect.midY))
  path.addArc(
    center: CGPoint(x: rect.midX, y: rect.midY),
    radius: rect.height / 2,
    startAngle: Angle(degrees: offsetAmount),
    endAngle: Angle(degrees: 360 - offsetAmount),
    clockwise: false)
}
}
}

🗃 Reference

SwiftUI Thinking - https://www.youtube.com/watch?v=EHhgjOt_KFA&list=PLwvDm4Vfkdphc1LLLjCaEd87BEg07M97y&index=6

자연수 뒤집어 배열로 만들기 (Lv1. Swift)

Sun, 10 Apr 2022 00:00:00 +0000

자연수 뒤집어 배열로 만들기 (Lv1. Swift)

🔍 문제

자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다.

🔶 제한사항

n은 10,000,000,000이하인 자연수입니다.

🔹 입출력 예

📌 풀이

n을 String 타입으로 바꿔준 뒤, .reversed() 를 이용해 순서를 뒤집어 준다.
다시 Int 로 바꿔서 한글자씩 Int 배열에 담아준다

// 반복문을 통한 풀이
func solution(_ n:Int64) -> [Int] {
  var result: [Int] = []
  for i in String(n).reversed() {
    guard let number = Int(String(i)) else { break }
    result.append(number)
  }
  return result
}

print(solution(12345)) // [5, 4, 3, 2, 1]

// compactMap 사용하기
func solution(_ n:Int64) -> [Int] {
	let arr = String(n).compactMap { Int(String($0)) }
	return arr.reversed()
}

print(solution(12345)) // [5, 4, 3, 2, 1]

Reference

프로그래머스 - https://programmers.co.kr/learn/courses/30/lessons/12932