일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- ios
- 스위프트
- Observable
- UICollectionView
- map
- Human interface guide
- uitableview
- clean architecture
- tableView
- Xcode
- MVVM
- swift documentation
- uiscrollview
- combine
- 리펙토링
- 애니메이션
- HIG
- Clean Code
- Refactoring
- UITextView
- swiftUI
- RxCocoa
- 리펙터링
- Protocol
- 리팩토링
- collectionview
- ribs
- 클린 코드
- rxswift
- SWIFT
- Today
- Total
목록2024/12 (9)
김종권의 iOS 앱 개발 알아가기

1. Canvas 개념 (그림 그리기, Path)2. Canvas 사용 방법 (fill, stroke)Canvas 개념SwiftUI에서 2D 그래픽을 그리기 위해 사용되는 뷰View타입이므로 아래처럼 선언하여 사용이 가능인수로 주어지는 context와 size를 사용하여 그림을 그리는 것struct ContentView: View { var body: some View { Canvas( opaque: true, colorMode: .linear, rendersAsynchronously: false ) { context, size in context.opacity = 0.3 ...
플러그인 패턴핵심 기능을 변경하지 않고도 새로운 기능을 추가하거나 확장할 수 있도록 하는 구조적 패턴유연성과 확장성이 높다는 장점플러그인 패턴 구조ex) 계산기 로직을 플러그인 패턴으로 만들기PluginManager가 있고 여기서는 핵심 기능을 담당하며, 이곳에 추가하고 싶은 기능(플러그인)들을 등록하고 실행할 수 있는 관리자 역할let pluginManager = PluginManager()플러그인 인스턴스를 만들어서 플러그인에 등록let additionPlugin = AdditionPlugin()let multiplicationPlugin = MultiplicationPlugin()pluginManager.registerPlugin(additionPlugin)pluginManager.registerP..

토글 버튼 만드는 아이디어토글 버튼을 만드는 방법은 여러가지가 있지만, "토글에 관한 기능"을 생각해보면 여러곳에서 사용될 수 있는 여지가 있으므로 공통화가 필요UIButton에는 selected 상태가 있는데 이 상태는 직접 특정 타이밍에 isSelected 값을 변경해주어서 사용이 가능touchUpInside 시점에 selected 값을 변경해주어서 구현토글 버튼 만들기UIButton을 상속하여 ToggleButton 추가class ToggleButton: UIButton {}touchUpInside 시점에 isSelected 상태를 변경해주는게 필요하므로 addTarget(_:action:for:)를 사용하여 touchUpInside이벤트 처리class ToggleButton: UIButton { ..

명령형 vs 선언형 코드 작성의 흐름명령형 프로그래밍"어떻게" UI를 업데이트할지 명시적으로 작성let label = UILabel()label.text = "Hello, World!"label.textColor = .bluelabel.frame = CGRect(x: 0, y: 0, width: 200, height: 50)view.addSubview(label) 선언형 프로그래밍좀 더 코드가 뷰의 형태와 닮은 형태로 작성struct ContentView: View { var body: some View { Text("Hello, World!") .foregroundColor(.blue) .frame(width: 200, height: 50) ..

LayoutPriority 개념layoutPriority값이 크면, 뷰가 다른 뷰보다 커질 수 있는 힘이 큼기존 swift에서 ContentHuggingPriority, ContentCompressionResistancePriority 두 개를 두어서 헷갈렸던 것을 SwiftUI에서는 layoutPriority하나로 표현HStack에 두 개 의 텍스트가 있을 때 예시참고) 일반적으로는 HStack이 있을때 두 개의 뷰에는 동일한 width로 할당되지만 띄어쓰기가 있으면 내부적인 개행 처리 때문에 아래처럼 균등하지는 않게끔 배치됨struct ContentView: View { var body: some View { HStack { Text("This is a moder..

뷰 속성 순서의 중요성SwiftUI에서는 뷰를 선언하고 속성을 선언적으로 넣어주어서 뷰를 완성해나가는데, 속성을 넣을때 순서도 중요ex) 아래 firstView, secondView는 frame(minHeight:)의 선언 순서만 다르고 나머지는 동일한 코드지만 완전히 다른 뷰가 보여짐@ViewBuilderprivate var firstView: some View { VStack(spacing: 0) { Color.clear .frame(width: 287, height: 0) Text("테스트 문구") } .frame(minHeight: 105) // frame(minHeight:) 순서 위치만 다른데, 아래처럼 두 뷰를 VSt..

투명 뷰로 감싸고 터치 이벤트 받는 방법투명 뷰로 감싸는 경우?뷰를 구성하고 특정 영역을 터치 이벤트 영역으로 잡고 싶거나, 접근성을 위해서 특정 뷰로 덮어서 그 부분만 특정 접근성을 주고 싶을때, 가장 단순한 방법은 투명 뷰로 감싸서 처리SwiftUI에서는 투명 뷰로 감싸기 위해서 아래처럼 사용이 가능감쌀 뷰에 overlay를 선언하고 그 위에 Color.clear를 선언하고 여기에 접근성과 tapGesture를 주어서 간편하게 뷰를 감싸는 방법이 존재struct ContentView: View { var body: some View { VStack { Image(systemName: "globe") .imageScale(.large) ..

VStack, HStack 사용 할 때 주의할 점VStack, HStack은 내부 콘텐츠 크기에 의해서, 자기 자신의 크기가 결정되는 컴포넌트대부분 실수하는 것이 VStack, HStack에 패딩을 넣거나 사이즈를 고정하는 경우가 존재ex) VStack에 width를 120으로 고정하는 경우struct ContentView: View { var body: some View { VStack(alignment: .leading) { Text("start") VStack { Text("1") Text("2") Text("3") ..