---
# System prepended metadata

title: '[SGS] iOS CREAM 개발기'
tags: ['20211213']

---

[SGS] iOS CREAM 개발기
===
###### tags: `20211213`

author: wankikim@smilegate.com
date: 2022.01.01 ~

[TOC]

### App Settings
#### iOS 버전 선정 - iOS 13 설정
선정 기준
1. 구현하고자하는 기능 구현에 문제가 있는가.
    - UICompositionalLayout -> iOS 13~ 지원
    - 
2. 현재 사용하는 사용자의 비율을 고려
    ![](https://i.imgur.com/2zqHdGP.png =300x)
    2021년 6월 기준, 약 98%의 사용자가 iOS 13 이상의 기기 버전을 사용하고 있음.

### UI / UX

#### Previews
UICompositionalLayout 활용

UIKit을 활용해서 View를 구현하지만, SwiftUI의 Preview를 활용해 생산성을 함께 활용하면 좋겠다고 판단이 들어서 Preview를 추가로 구현하는 방법을 활용하였음.


>Extension Group 내부에 UIViewController+Preview.swift 내부에 다음과 같이 선언

```swift=
import SwiftUI
#if DEBUG
extension UIViewController {
    private struct Preview: UIViewControllerRepresentable {
        let viewController: UIViewController
        
        func makeUIViewController(context: Context) -> UIViewController {
            return viewController
        }
        
        @available(iOS 13.0, *)
        func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
        }
    }
    
    @available(iOS 13.0, *)
    func toPreview() -> some View {
        Preview(viewController: self)
    }
}
#endif
```

>실제로 사용할 뷰 내부에서는 SwiftUI를 import하고, previews를 선언함.
```swift=
// MARK: Preview

import SwiftUI

struct VCPreView:PreviewProvider {
    static var previews: some View {
        MainViewController()
            .toPreview()
            .previewDevice("iPhone 12 Pro")
    }
}

```
![](https://i.imgur.com/WvSDWbX.png =500x)
>실제 코드와 함께 Preview를 놓고 볼 수 있어, 새 컴포넌트를 올릴 때마다 실시간으로 확인 가능

참고 링크 : 
https://fluffy.es/xcode-previews-uikit/
    

#### UICompositionalLayout
UICollectionViewFlowLayout을 적용할 경우, CREAM에서 제공하는 multiple scrolling sections은 물론 다양한 size의 tiled layouts을 구현하기 어렵다는 판단이 들어서 도입.



### Business Logic

### MVVM 바인딩 연습


참고
RxSwift + MVVM : https://pino-day.tistory.com/15
Validation View Model : https://medium.com/swift2go/mvvm-with-rxswift-the-user-login-cc43df423c9e




김완기 iOS

목표 달성을 위한 관리 계획!

1. MVVM 패턴 제대로 이해하고, 적용하기

#### MVVM 구조에 대한 이론적 이해와 코드 동작 방식 이해하기
- Raywenderich MVVM Pattern 및 Mastering MVVM in Swift 바탕으로 이론 학습 
- MVVM 구조의 예제 코드를 작성하고, 코드 흐름 이해하기
- MVVM 형태로 구현된 오픈 소스 프로젝트에서 구현된 코드 구성 분석
    -> 여러 구현 방법 중 한 가지 선택 후 실제 프로젝트에 적용

#### CREAM 앱 구현하며, MVVM 패턴 구조화 -> 코드 구현 -> 점검 과정 반복하기
- 구조화(구현 전, 구현할 뷰 내부 요소들의 영역 분리하기)
    - 뷰 영역: UI요소, 뷰모델 영역: 비지니스 로직, 모델 영역: 데이터
    - 데이터 흐름에서
- 구현(분리했던 영역을 바탕으로 실제 MVVM 구조로 구현하기)
- 점검(구현한 뷰가 실제 MVVM의 구조로 동작하는지 확인)
    - 구조화한 내용과 구현된 코드가 같은 데이터 흐름을 가지는지 확인하기
    - 코드의 흐름이 적합하지 않다고 판단되면, 디버깅을 통해 문제 발생 지점을 찾고, 원인 찾기
    - 충분히 트러블 슈팅 과정에도 하루 이상 해결이 되지 않을 경우, 이해한 내용을 바탕으로 iOS 캠프원(1차)에게, 캠프장(2차)님께 코드 방향성에 대해 점검 받기

#### 프로젝트 README에 담고, 구조 설명하기
- MVVM 패턴을 바탕으로 구현한 프로젝트의 구조 및 데이터 흐름을 글로 작성하고 명확하게 설명하기.

#### 추가) 모든 기능이 구현되고, MVVM의 흐름이 잘 반영됐다면, Clean Architecture 적용해보기


2. 트러블 슈팅 과정을 기록하고, 반복하지 않기

- 일일 단위 개발 과정에서 발생한 트러블 슈팅 과정을 팀 내 공유 문서에 작성하기
- 주 단위 팀원에게 문서화 과정에 대해서 점검을 받고, 설명이 부족하지 않은지 객관적인 평가 받기




