프로젝트 소개

• 연인 간 미션 승부를 통한 소원권 내기 서비스 앱
• 커플이 함께 사용하는 앱이기 때문에 두 명이 서로 연결해서 사용하는 앱입니다.
• 해당 앱의 디자인 시스템을 위해 SPM을 활용했습니다. 디자인 시스템 리드미 링크

🔗 앱 다운로드 링크

        

• 진행 기간
  • 개발 : 2023.07 ~ 2023.12(진행중)
• 출시
  • 1.0.0 : 2023.12.11
  • 1.0.1 : 2023.12.22(타이머, 로그인 수정)
• 기술 스택
  • iOS : UIKit, SwiftUI, Combine, SwiftLint
  • Deployment Target : iOS 15.0

Architecture

MVC -> MVVM + Clean Architecture(진행 중)

• 잦은 기획 변경 및 유지보수 등 업무 효율을 높이기 위해 클린 아키텍처를 도입중입니다.

Domain

Entity

• 서비스에 쓰이는 데이터를 정의합니다. 서버와의 소통 오류로 런타임에러를 막기 위해 옵셔널로 처리했습니다.

struct BattleHistoryResultDTO: Codable {
    let roundGameId: Int?
    let date: String?
    let result: String?
    let title: String?
    let image: String?
    let winner: String?
    let myMission: MyMission
    let partnerMission: PartnerMission
}

UseCase

• Entity가 사용되는 시나리오를 정의합니다.

protocol BattleHistoryResultUseCaseProtocol {
    func execute() -> AnyPublisher<[BattleHistoryResultDTO], ErrorType>
}

final class BattleHistoryResultUseCase: BattleHistoryResultUseCaseProtocol {
    private let battleHistoryResultRepository: BattleHistoryResultRepositoryInterface
    init(battleHistoryResultRepository: BattleHistoryResultRepositoryInterface) {
        self.battleHistoryResultRepository = battleHistoryResultRepository
    }
    func execute() -> AnyPublisher<[BattleHistoryResultDTO], ErrorType> {
        return self.battleHistoryResultRepository.data()
    }
}

Repository Interface

• 클린 아키텍처 다이어그램의 더 안쪽에 위치한 Domain 영역이 Data 영역의 Repository에 접근하기 위해 의존성 역전를 통해 레퍼지토리에 접근하기 위한 방법을 제공합니다.

protocol RoundBattleMissionRepositoryInterface {
    func data(roundId: Int) -> AnyPublisher<RoundBattleMissionDTO, ErrorType>
}

Data

Repository

• 데이터를 직접적으로 획득합니다. 데이터를 획득하는 방법을 확장성있도록 하기 위해 사용됩니다.

final class RoundBattleMissionRepository: RoundBattleMissionRepositoryInterface {
    private let service: GetServiceCombine
    init(service: GetServiceCombine) {
        self.service = service
    }
    func data(roundId: Int) -> AnyPublisher<RoundBattleMissionDTO, ErrorType> {
        self.service.getService(from: Config.baseURL + "api/game/short/\(roundId)", isUseHeader: true)
    }
}

Presentation

View

• 기존 MVC 패턴 시 UIViewController의 loadView 생명주기에 UIView를 바꿔주어 ViewController의 레이아웃 코드를 최소화하고자 했습니다.

    // MARK: - Life Cycle
    override func loadView() {
        super.loadView()
        historyView = HistoryView(frame: self.view.frame)
        self.view = historyView
    }

• 현재는 UIHostingController를 사용해 SwiftUI로 UI를 구성하고 있습니다.

    // MARK: - Setting
    override func setConfig() {
        battleHistoryHostingController = UIHostingController(rootView: BattleProgressView(data: battleHistoryViewData))
        self.addChild(battleHistoryHostingController)
        view.addSubview(battleHistoryHostingController.view)
        battleHistoryHostingController.didMove(toParent: self)
    }
    override func setLayout() {
        battleHistoryHostingController.view.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
    }

ViewModel

• SwiftUI와 UIKit에 모두 비동기프로그래밍을 적용하고자 Combine을 학습 중입니다.
• UIKit의 ViewModel은 Input/Output Modeling을 통해 View로부터 전달된 이벤트는 Input, View로 전달할 데이터는 Output을 통해 Binding합니다.

struct BattleHistoryDetailViewModel {
    struct Input {
        let viewLoad: AnyPublisher<BattleHistoryResultDTO, Never>
    }
    struct Output {
        let historyDetailData: AnyPublisher<BattleHistoryDetailItemViewData, Never>
    }
    func transform(input: Input) -> Output {
        let historyData = input.viewLoad.map {
            return BattleHistoryDetailItemViewData(battleHistoryItem: $0)
        }.eraseToAnyPublisher()
        return Output(historyDetailData: historyData)
    }
}

• SwiftUI의 ViewModel은 ObservableObject와 @Published프로퍼티 패턴를 활용해 Binding합니다.

final class MyPageViewModel: ObservableObject {
    @Published var myPageName: String = ""
    @Published var myPageDate: String = ""
    @Published var startDate: String = ""
    private var cancellables: Set<AnyCancellable> = []
    private let myPageGetUseCase: MyPageGetUseCaseProtocol
    private let navigationController: UINavigationController
    private let viewController: UIViewController
    init(myPageGetUseCase: MyPageGetUseCaseProtocol, navigationController: UINavigationController, viewController: UIViewController) {
        self.myPageGetUseCase = myPageGetUseCase
        self.navigationController = navigationController
        self.viewController = viewController
    }
    // MARK: - Custom Method
    func getMyPageData() {
        myPageGetUseCase.excute().sink { [weak self] completion in
            guard let self = self else { return }
            switch completion {
            case .failure(let errorType):
                errorResponse(status: errorType)
            case .finished:
                break
            }
        } receiveValue: { [weak self] data in
            guard let self = self else { return }
            self.myPageDate = MyPageGetItemViewData(myPageGetItem: data).date
            self.myPageName = MyPageGetItemViewData(myPageGetItem: data).name
            self.startDate = data.startDate ?? ""
        }
        .store(in: &cancellables)
    }
}

ItemViewData

• Entity를 View에서 쉽게 사용하기 위한 데이터로 변환하는 작업을 수행합니다.

struct BattleHistoryItemViewData {
    let date: String
    let gameTitle: String
    let imagePath: URL?
    let result: String
    let battleHistoryItem: BattleHistoryResultDTO
    init(battleHistoryItem: BattleHistoryResultDTO) {
        self.battleHistoryItem = battleHistoryItem
        self.date = battleHistoryItem.date ?? ""
        self.gameTitle = battleHistoryItem.title ?? ""
        self.imagePath = URL(string: battleHistoryItem.image ?? "")
        switch battleHistoryItem.result {
        case "DRAW":
            self.result = "무승부"
        case "WIN":
            self.result = "승리"
        case "LOSE":
            self.result = "패배"
        default:
            self.result = battleHistoryItem.result ?? ""
        }
    }
}

⚠️Trouble Shooting

1.SwiftUI View의 성능 향상을 위한 종속성 최소화

문제점

SwiftUI를 사용하면서 화면이 매끄럽지 않게 느껴지는 경우를 종종 발견함. 이에 따라 SwiftUI의 성능 향상을 위한 고민의 필요성을 느낌

해결 방안

두 가지 방법으로 해결하고자 했습니다.

1. 뷰를 하위 뷰로 나누기

• 뷰를 하나의 뷰로 작성한다면 그에 필요한 데이터 값이 변경됨에 따라 뷰가 다시 그려지게 됩니다. 예를 들어 10개의 버튼이 있으면 각 버튼이 눌릴 때마다 각각의 버튼에 해당하는 뷰만 다시 그려지게 할 수 있지만 하나의 전체 뷰가 다시 그려지게 되면 성능의 차이가 나게 될 것입니다.
• 다음과 같이 데이터가 바뀔 때마다 상관없는 뷰가 다시 그려지는 것을 막고자 했습니다.

  

• 아래의 코드와 같이 하위 컨테이너 뷰로 나누게 되면 상위 뷰의 데이터가 다시 그려지는 것과 별개로 다시 뷰가 그려지지 않기 떄문에 성능 향상을 얻을 수 있습니다.

하위 뷰 분리로 개선한 코드

struct TimerTimeTextView: View {
    // MARK: - Property
    let text: String
    // MARK: - UI Property
    var body: some View {
        Text(text)
            .font(Font(SDSFont.body1.font))
            .foregroundColor(Color(.gray600))
            .background(.random)
    }
}

2. 뷰가 꼭 필요한 종속성만을 갖게 하기

• 다음과 같은 코드를 통해 종속성을 체크하고 있습니다.

let _ = Self._printChanges()

  

• ObservableObject에 종속성을 가지고 있는 경우 타이머가 흐름에 따라 데이터가 변화되는 것을 알 수 있었습니다.

종속성을 최소화 하면서 개선한 코드

  TimerProgressView(remainingTime: timerData.remainingTime, totalTime: timerData.totalTime, isTimerRunning: timerData.isTimerRunning)
     .padding(.horizontal, 24)
     .padding(.top, 32)

• 다음과 같이 뷰가 ObservableObject에 종속성을 가지는 것이 아니라 필요한 데이터만을 가지게 됨으로써 업데이트 횟수를 줄일 수 있었습니다.

Todo

• 꾸준히 MVC패턴에서 MVVM + Clean Architecture 패턴으로 유지보수를 할 예정입니다.
• 각각 분리된 레이어를 테스트할 수 있는 방법을 고민해보고 싶습니다.

📱 주요 화면 및 기능

🔖 로그인 플로우 - 카카오, 애플로 로그인을 할 수 있어요. 커플이 연결되어 있다면 홈 화면, 없다면 커플을 연결하는 플로우로 넘어가요.

🎞️ 승부 생성 - 커플이 함께 할 수 있는 게임을 생성할 수 있어요. 이미 상대가 게임을 생성했다면 생성할 수 없다는 알람이 나타나요.

🎞️ 승부 결과 확인 - 상대방의 결과을 비교하여 승패를 정하고 아직 승부가 나지 않았다면 알람이 나타나요.

🎫 소원권 사용 - 승부에서 이겼다면 소원권을 사용할 수 있어요.

📓 승부 히스토리 플로우 - 커플과 함께 한 승부의 기록들을 확인할 수 있어요

✏️ 마이페이지 플로우 - 내 정보를 수정할 수 있고 로그아웃, 커플 연결 끊기, 계정 탈퇴를 할 수 있어요.

Commit message

🔨[FIX] : 버그, 오류 해결
➕[ADD] : Feat 이외의 부수적인 코드 추가, 라이브러리 추가, 새로운 파일 생성 시
✨[FEAT] : 새로운 기능 구현
✅[CHORE] : 코드 수정, 내부 파일 수정
⚰️[DEL] : 쓸모없는 파일,코드 삭제
♻️[REFACTOR] : 전면 수정이 있을 때 사용합니다
🔀[MERGE]: 다른브렌치를 merge 할 때 사용합니다.

코드 컨벤션

🍎 네이밍

💧클래스, 구조체

• UpperCamelCase 사용

// - example

struct MyTicketResponseDTO {
}

class UserInfo {
}

💧함수

• lowerCamelCase 사용하고 동사로 시작

// - example

private func setDataBind() {
}

💧뷰 전환

• pop, push, present, dismiss
• 동사 + To + 목적지 뷰 (다음에 보일 뷰)
• dismiss는 dismiss + 현재 뷰

// - example pop, push, present

popToFirstViewController()
pushToFirstViewController()
presentToFirstViewController()

dismissFirstViewController()

💧register

• register + 목적어

// - example

registerXib()
registerCell()

💧서버 통신

• 서비스함수명 + WithAPI

// - example

fetchListWithAPI()

requestListWithAPI()

fetch는 무조건 성공

request는 실패할 수도 있는 요청

💧애니메이션

• 동사원형 + 목적어 + WithAnimation

showButtonsWithAnimation()

💧델리게이트

delegate 메서드는 프로토콜명으로 네임스페이스를 구분

좋은 예:

protocol UserCellDelegate {
  func userCellDidSetProfileImage(_ cell: UserCell)
  func userCell(_ cell: UserCell, didTapFollowButtonWith user: User)
}

protocol UITableViewDelegate {
    func tableview( ....) 
    func tableview...
}

protocol JunhoViewDelegate {
    func junhoViewTouched()
    func junhoViewScrolled()
}

Delegate 앞쪽에 있는 단어를 중심으로 메서드 네이밍하기

나쁜 예:

protocol UserCellDelegate {
    // userCellDidSetProfileImage() 가 옳음
  func didSetProfileImage()
  func followPressed(user: User)

  // `UserCell`이라는 클래스가 존재할 경우 컴파일 에러 발생  (userCell 로 해주자)
  func UserCell(_ cell: UserCell, didTapFollowButtonWith user: User)
}

함수 이름 앞에는 되도록이면 get 을 붙이지 않습니다.

💧변수, 상수

• lowerCamelCase 사용

let userName: String

💧열거형

• 각 case 에는 lowerCamelCase 사용

enum UserType {
    case viewDeveloper
    case serverDeveloper
}

💧약어

약어로 시작하는 경우 소문자로 표기, 그 외에는 항상 대문자

// 좋은 예:
let userID: Int?
let html: String?
let websiteURL: URL?
let urlString: String?

// 나쁜 예:
let userId: Int?
let HTML: String?
let websiteUrl: NSURL?
let URLString: String?

💧기타 네이밍

setUI() : @IBOutlet 속성 설정
setLayout() : 레이아웃 관련 코드
setDataBind() : 배열 항목 세팅. 컬렉션뷰 에서 리스트 초기 세팅할때
setAddTarget() : addtarget 모음
setDelegate() : delegate, datasource 모음
setCollectionView() : 컬렉션뷰 관련 세팅
setTableView() : 테이블뷰 관련 세팅
initCell() : 셀 데이터 초기화
registerXib() : 셀 xib 등록.
setNotification() : NotificationCenter addObserver 모음

헷갈린다? set을 쓰세요 ^^

🍎 코드 레이아웃

💧들여쓰기 및 띄어쓰기

• 들여쓰기에는 탭(tab) 대신 4개의 space를 사용합니다.

• 콜론(:)을 쓸 때에는 콜론의 오른쪽에만 공백을 둡니다.

  let names: [String: String]?

  let name: String

• 연산자 오버로딩 함수 정의에서는 연산자와 괄호 사이에 한 칸 띄어씁니다.

  func ** (lhs: Int, rhs: Int)

💧줄바꿈

• 함수를 호출하는 코드가 최대 길이를 초과하는 경우에는 파라미터 이름을 기준으로 줄바꿈합니다. 파라미터가 3개 이상이면 줄바꿈하도록!!

  단, 파라미터에 클로저가 2개 이상 존재하는 경우에는 무조건 내려쓰기합니다.

  UIView.animate(
    withDuration: 0.25,
    animations: {
      // doSomething()
    },
    completion: { finished in
      // doSomething()
    }
  )

• if let 구문이 길 경우에는 줄바꿈하고 한 칸 들여씁니다.

  if let user = self.veryLongFunctionNameWhichReturnsOptionalUser(),
    let name = user.veryLongFunctionNameWhichReturnsOptionalName(),
    user.gender == .female {
    // ...
  }

• guard let 구문이 길 경우에는 줄바꿈하고 한 칸 들여씁니다. else는 마지막 줄에 붙여쓰기

  guard let user = self.veryLongFunctionNameWhichReturnsOptionalUser(),
    let name = user.veryLongFunctionNameWhichReturnsOptionalName(),
    user.gender == .female else { return }
  
  guard let self = self 
  else { return } (X)
  
  guard let self = self else { return } (O)

• else 구문이 길 시 줄바꿈

💧빈 줄

• 클래스 선언 다음에 , extension 다음에 한 줄 띄어주기

• 빈 줄에는 공백이 포함되지 않도록 합니다. ( 띄어쓰기 쓸데없이 넣지 말기 )

• 모든 파일은 빈 줄로 끝나도록 합니다. ( 끝에 엔터 하나 넣기)

• MARK 구문 위와 아래에는 공백이 필요합니다.

  // MARK: Layout
  
  override func layoutSubviews() {
    // doSomething()
  }
  
  // MARK: Actions
  
  override func menuButtonDidTap() {
    // doSomething()
  }

💧임포트

모듈 임포트는 알파벳 순으로 정렬합니다. 내장 프레임워크를 먼저 임포트하고, 빈 줄로 구분하여 서드파티 프레임워크를 임포트합니다.

import UIKit

import Moya
import SnapKit
import SwiftyColor
import Then

import UIKit

import SwiftyColor
import SwiftyImage
import JunhoKit
import Then
import URLNavigator

🍎 클로저

• 파라미터와 리턴 타입이 없는 Closure 정의시에는 () -> Void를 사용합니다.

  좋은 예:

  let completionBlock: (() -> Void)?
  

  나쁜 예:

  let completionBlock: (() -> ())? let completionBlock: ((Void) -> (Void))?

• Closure 정의시 파라미터에는 괄호를 사용하지 않습니다.

  좋은 예:

  { operation, responseObject in
    // doSomething()
  }

  나쁜 예:

  { (operation, responseObject) in
    // doSomething()
  }

• Closure 정의시 가능한 경우 타입 정의를 생략합니다.

  좋은 예:

  ...,
  completion: { finished in
    // doSomething()
  }

  나쁜 예:

  ...,
  completion: { (finished: Bool) -> Void in
    // doSomething()
  }
  
  completion: { data -> Void in
    // doSomething()
  } (X)

• Closure 호출시 또다른 유일한 Closure를 마지막 파라미터로 받는 경우, 파라미터 이름을 생략합니다.

  좋은 예:

  UIView.animate(withDuration: 0.5) {
    // doSomething()
  }

  나쁜 예:

  UIView.animate(withDuration: 0.5, animations: { () -> Void in
    // doSomething()
  })

🍎 주석

코드는 가능하면 자체적으로 문서가 되어야 하므로, 코드와 함께 있는 인라인(inline) 주석은 피한다.

💧MARK 주석

class ViewController: UIViewController {
    // MARK: - Property
    // MARK: - UI Property
    // MARK: - Life Cycle
    // MARK: - Setting
    // MARK: - Action Helper
    // MARK: - @objc Methods
    // MARK: - Custom Method
}

// MARK: - Extensions

💧퀵헬프 주석

커스텀 메서드, 프로토콜, 클래스의 경우에 퀵헬프 주석 달기

/// (서머리 부분)
/// (디스크립션 부분)
class MyClass {
    let myProperty: Int

    init(myProperty: Int) {
        self.myProperty = myProperty
    }
}

/**summary
(서머리 부분)
> (디스크립션 부분)

- parameters:
    - property: 프로퍼티
- throws: 오류가 발생하면 customError의 한 케이스를 throw
- returns: "\\(name)는 ~" String
*/
func printProperty(property: Int) {
        print(property)
    }

• 참고 :

🍎 프로그래밍 권장사항

💧Type Annotation 사용

좋은 예:

let name: String = "철수"
let height: Float = "10.0"

나쁜 예:

let name = "철수"
let height = "10.0"

💧UICollectionViewDelegate, UICollectionViewDatsource 등 시스템 프로토콜

프로토콜을 적용할 때에는 extension을 만들어서 관련된 메서드를 모아둡니다.

좋은 예:

final class MyViewController: UIViewController {
  // ...
}

// MARK: - UITableViewDataSource

extension MyViewController: UITableViewDataSource {
  // ...
}

// MARK: - UITableViewDelegate

extension MyViewController: UITableViewDelegate {
  // ...
}

나쁜 예:

final class MyViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
  // ...
}

// 프로토콜 여러개를 한곳에 몰아서 때려넣지 말자!

🍎 기타규칙

• self 는 최대한 사용을 지양 → **알잘딱깔센 self…**

• viewDidLoad() 에서는 함수호출만

• delegate 지정, UI관련 설정 등등 모두 함수와 역할에 따라서 extension 으로 빼기

• 필요없는 주석 및 Mark 구문들 제거

• deinit{} 모든 뷰컨에서 활성화

• guard let 으로 unwrapping 할 시, nil 가능성이 높은 경우에는 else{} 안에 print() 해서 디버깅하기 쉽게 만들기

• return 사용시 두 줄 이상 코드가 있을 시, 한 줄 띄고 return 사용

  func fetchFalse() -> Bool {
          return false
  } (O)
  
  func isDataValid(data: Data?) -> Bool {
          guard let data else { return false }
          
          return true
  } (O)
  
  func isDataValid(data: Data?) -> Bool {
          guard let data else {
                  return false 
          }
          return true
  } (X)

  추가 규칙

  • 약어 지양 → TVC보다는 TableViewCell

  Function naming Rule

  • set_ 형태로 작성 → setUI, setData
    • setLayout(), setStyle(), setDelegate()

  MARK 주석

  class ViewController: UIViewController {
      // MARK: - Property
      // MARK: - UI Property
      // MARK: - Life Cycle
          // MARK: - Setting
      // MARK: - Action Helper
      // MARK: - Custom Method
  }
  
  // MARK: - UITableView Delegate

  • 마크 주석 미사용시 삭제

  프로퍼티 생성은 레이아웃 순서대로지만, collectionView, tableView는 최상단에 적읍시다

  private let tableView: UITableView = {
          let view = UITableView()
          // ...
          return view
  }()
  
  private let view = UIView()
  
  private let view2 = UIView()

  뷰의 생명주기를 담당하는 함수 안에는, 직접적인 구현 보다는 함수 호출만 진행

  ~~override viewDidLoad() {
          super.viewDidLoad()
          self.view.addsubView(uniView)
  }~~

  override viewDidLoad() {
          super.viewDidLoad()
          self.addUniView()
  }
  private func addUniView() {
          super.viewDidLoad()
          self.view.addsubView(uniView)
  }

foldering

가용 라이브러리

SPM을 이용

Kingfisher //이미지처리
Alamofire // 네트워크
Snapkit //레이아웃
Then //코드 간결화
Sentry //error tracking
kakao-ios-sdk //socialLogin
firebase-auth //socialLogin