스택뷰를 활용한 방식

1. UITableViewCell 내부에 스택뷰를 배치합니다.
2. 스택뷰 내부의 UIView를 Hidden시키는 방식

    @IBOutlet weak var bottomView: UIView! {
        didSet {
            bottomView.isHidden = true
        }
    }

3. 셀을 클릭했을 때 처리

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
        guard let cell = tableView.cellForRow(at: indexPath) as? ExpandableTableViewCell
        else { return }
   
        tableView.performBatchUpdates {
            UIView.animate(withDuration: 0.3) {
                  cell.bottomView.isHidden = !cell.bottomView.isHidden
                            if !cell.bottomView.isHidden {
                    cell.clickImageView.image = UIImage(systemName: "arrow.up")
                } else {
                    cell.clickImageView.image = UIImage(systemName: "arrow.down")
                }
            }
        }
    }

SnapKit

오토레이아웃을 쉽게 만들 수 있도록 도와주는 라이브러리

💡 translatesAutoresizingMaskIntoConstraints = false 생략가능하지만 확인이 필요합니다.

Padding(Offset)

view.snp.makeConstraints { make in
    make.top.equalToSuperView().offset(20)
    make.left.equalToSuperView().offset(20)
    make.bottom.equalToSuperView().offset(-20)
    make.right.equalToSuperView().offset(-20)
}

SafeArea

• iOS11이후 topLayoutGuide, bottomLayoutGuide를 지원하지 않습니다.

view.snp.makeConstraints { make in
    make.left.equalTo(view.safeAreaLayoutGuide)
    make.right.equalTo(view.safeAreaLayoutGuide)
    make.bottom.equalTo(view.safeAreaLayoutGuide)
    make.top.equalTo(view.safeAreaLayoutGuide)
}

Center

view.snp.makeConstraints { make in
        make.center.equalToSuperview()
        make.centerX.equalToSuperview()
        make.centerY.equalToSuperview()
}

AspectRatio

view.snp.makeConstraints { make in
    make.width.equalTo(view.snp.height).multipliedBy(1.0 / 1.0)
        make.width.height.equalTo(50) // 같은 방식
}

Edge + Inset

view.snp.makeConstraints { make in
    make.edges.equalToSuperview()
        .inset(UIEdgeInsets(top: 10,left: 10, bottom: 10, right: 10))
}

Size

view.snp.makeConstraints { make in
    make.size.equalTo(CGSize(width: 300, height: 300))
}

디버그

• .labeled : 디버그 로그에 대한 제약 조건 레이블을 지정할 수 있습니다.

button.snp.makeConstraints { (make) -> Void in
  make.top.equalTo(otherView).labeled("buttonViewTopConstraint")
}

// 디버그 출력값
"<SnapKit.LayoutConstraint:buttonViewTopConstraint@SignUpViewController.swift#311
UIView:0x7fd98491e4c0.leading == UIView:0x7fd983633880.leading>"

트러블슈팅

1. 스토리보드로 UITableView예제 만들다가 난 에러 (Unexpectedly found nil while implicitly unwrapping an Optional value)

   • nil인 요소에 값을 할당할 때 생기는 에러

   • UITableViewCell을 Nib파일로 만들었는데 등록하는 과정을 생략

       private func registerXib() {
           let nibName = UINib(nibName: "ExpandableTableViewCell", bundle: nil)
           tableView.register(nibName, forCellReuseIdentifier: "ExpandableTableViewCell")
       }

2. 스택뷰 코드로 작성할 때 UIView 배열형식으로 추가해야함

    lazy var firstBtnStackView: UIStackView = {
        let btnStackView = UIStackView(arrangedSubviews: [mannerBtn, timeCheckBtn])
        btnStackView.axis = .horizontal
        btnStackView.alignment = .fill
        btnStackView.distribution = .fillEqually
   
        return btnStackView
    }()

   • arrangedSubviews 파라미터에 배열[UIView] 형식으로 추가해야함

참고링크

• 스택뷰 숨기는 방식

  • https://zhiyao92.medium.com/ios-tutorials-expandable-table-cell-85d1c64f89fc

• tableview begin, endUpdate → performBatchUpdates

  • https://ios-development.tistory.com/704
  • https://jcsoohwancho.github.io/2019-10-12-TableView의-변화를-처리하는-방법(1)-Batch-Update/

• SnapKit

  • https://github.com/SnapKit/SnapKit

메시지 암호화 전송 - RNCryptor 라이브러리

• 메시지를 암호화한 후 받을 때 해독하는 방식
  • 🌟 서버에 저장될 때 원본 그대로 저장되는 것이 아닌 암호화된 문자로 저장된다.
• pod RNCryptor 라이브러리 사용

인코딩과정(암호화)

import RNCryptor

class Encryption {

    // 암호화할 메서드
    class func encryptText(keyValue: String, message: String) -> String {

        let data = message.data(using: String.Encoding.utf8)
        let encryptedData = RNCryptor.encrypt(data: data!, withPassword: keyValue)

        return encryptedData.base64EncodedString(options: NSData.Base64EncodingOptions(rawValue: 0))
    }

}

1. String → Data타입으로 변경
2. RNCryptor의 encrypt메서드를 사용하여 암호화된 데이터를 반환합니다.
3. 암호화된 데이터를 String으로 변환 후 반환합니다.

디코딩과정(복호화)

import RNCryptor

class Encryption {
    class func decryptText(keyValue: String, encryptedMessage: String) -> String {

        let decryptor = RNCryptor.Decryptor(password: keyValue)

        let encryptedData = NSData(base64Encoded: encryptedMessage, options: NSData.Base64DecodingOptions(rawValue: 0))

        var message: NSString = ""

        if encryptedData != nil {
            do {
                let decryptedData = try decryptor.decrypt(data: encryptedData! as Data)
                message = NSString(data: decryptedData, encoding: String.Encoding.utf8.rawValue)!
            } catch {
                print("error decrypting text \(error.localizedDescription)")
            }
        }

        return message as! String
    }

}

1. 암호화된 메시지를 저장한 password로 복호화합니다.
2. 암호화된 String을 Data타입으로 변환 후 decrypt메서드로 복호화하여 사용합니다.

Push Notification 푸쉬알림보내기

• 알림을 받기위해서는 인증서를 받아야 합니다.

인증서 생성과정

• 순서
  • App ID의 PushNotification서비스 체크
  • APNs 인증서 발급 (Apple Push Notification service)
  • APNs 키 발급
  • xcode 프로젝트에서 PushNotification, BackgroundModes활성화

1. 애플 개발자 계정사이트로 이동합니다
   • https://developer.apple.com/account/#!/overview/2MRY8P7863

• Certificates탭으로 이동합니다.

2. 이동한 후 Identifiers 탭에서 + 버튼을 클릭하여 새로운 App Id를 생성합니다.

3. 프로젝트의 Bundle ID를 작성합니다.

4. 인증서에 필요한 서비스를 선택합니다.

5. Configure 버튼 클릭후 Create Certificate버튼클릭

6. 로컬에서 키체인접근을 열어줍니다. - 상단 메뉴에서 인증 기관에서 인증서 요청 클릭

7. 같은 방식으로 ProductionCertificate도 지정합니다. .p12파일 저장

💡 ProductionCertificate를 지정할 때 .certSigningRequest 파일은 다른 파일로 하는 것을 권장합니다.(충돌 예방)

OneSignal

OneSignal이란?

• OneSignal은 웹 사이트 및 모바일 응용 프로그램을위한 무료 푸시 알림 서비스입니다.
• 각 플랫폼에 전용 SDK를 제공하여 모든 주요 네이티브 및 모바일 플랫폼을 지원합니다.
• RESTful 서버 API 및 마케터가 푸시 알림을 디자인하고 보내는 온라인 대시 보드를 제공합니다.

초기설정 - 프로젝트 생성

1. 새로운 앱 생성 후 플랫폼 선택합니다.

2. Product .p12파일을 업로드 한 후 비밀번호를 입력합니다.
3. APNs Configuration 정의

3. SDK를 설치 한 후, App ID를 저장합니다.

프로젝트 Capability에서 추가

사용방법

1. pod 'OneSignal' 코코아팟 추가
2. AppDelegate.swift 에서 초기화
   • 🚨  시뮬레이터에서는 에러가 발생합니다.

참고링크

• Info.plist - CFBundleIconName 설정방법
  • https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=websearch&logNo=221110556257
• RNCryptor
  • https://github.com/RNCryptor/RNCryptor
• PushNotifications
  • onesignal - 무료푸시알림서비스
    • OneSignal을 사용하여 무료 push서비스 구현하기 - https://ithub.tistory.com/135
    • iOS-OneSignal으로-푸쉬알림-보내보기 - https://fomaios.tistory.com/entry/iOS-OneSignal으로-푸쉬알림-보내보기OneSignal-Push-Notification

RxSwift를 사용한다면??

RxSwift는 동기적인 동작을 비동기적으로 변경할 때 사용하는 라이브러리인데 회원가입화면에서 어느 곳에 필요할 지, 그리고 사용한다면 어느 장점이 있을까? 🤔

1. 비동기적으로 실행할 필요가 없는 곳에서 사용은 당장은 필요없지만 Rx로 구현한다면 확장성측면에서 화면에서 비동기적으로 실행하도록 변경된다면 쉽게 변경가능할 수 있는 장점이 있을 것 같다.
2. 비동기처리에서 @escaping클로저를 사용하면 반환값이 없기 때문에 가독성 측면에서 좋지 않기 때문에 반환값을 받는 RxSwift를 사용하면 가독성측면이나 개발하는데 편리한 장점이 있을 것 같다.
3. 아키텍처패턴을 MVVM으로 구현한다면 패턴 구조상 반환값을 받는 Rx로 구현하면 패턴구현이 좀 더 수월한 장점이 있을 것 같다.

회원가입 화면에서는 어떤 곳에서 사용하는 것이 좋을까?

• 인증받기 버튼을 클릭하면 파이어베이스에서 인증을 받는 동안 모든 화면이 멈춰서 인증번호 유효시간타이머가 멈추게 되서 비동기처리를 해야할 것 같다.
• 텍스트필드의 유효성을 검사할 때 서버와 통신하여 검사를 하거나, 실시간으로 잘못되었다고 표시를 해야하는 경우 사용자에게 알리도록 처리할 수 있을 것 같다. (비동기 처리를 하지않으면 유효성검사를 하는동안 화면이 멈추기때문에)

🤔  idToken → 닉네임 → 생년월일 → 이메일 → 성별 순으로 화면이동하면서 값을 계속 전달할 때 어떤방법으로 하는게 좋을지??

1. 구조체를 만든 후 각각의 프로퍼티를 옵셔널타입으로 지정하고 구조체를 전달해가면서 값전달하기
   • 계속해서 화면마다 구조체프로퍼티를 만들어야 할 것 같다.
2. UserDefault를 사용하여 저장한 후 사용하기
   • 보안측면에서 중요한 내용을 저장한다면 단점이 있을 것 같다 → 회원가입한 후 바로 삭제

iOS 레이아웃 이해

뷰의 레이아웃이나 컨텐츠를 다룰 때 실질적으로 뷰 업데이트가 일어날때를 잘못 알고 있을 때 에러가 발생할 수 있습니다. 뷰 업데이트에 대해 알기 위해서는 Main Run Loop 와 UIView 를 자세히 알아야합니다.

Main Run Loop

어플리케이션이 실행되면 iOS의 UIApplication이 매인 스레드에서 main run loop를 실행시킵니다.

Main Run Loop 는 모든 사용자 입력 이벤트를 처리하고 적절한 응답을 발생시키는 것 입니다. 사용자와 상호작용은 이벤트큐에 추가합니다. Application객체는 이벤트큐에서 이벤트를 가져와 Application의 다른 객체에 전달합니다. 이런 입력이벤트를 해석하고 Application의 핵심 객체에서 해당 입력이벤트에 대한 해당하는 handler를 호출하여 런루프를 실행합니다. 이러한 핸들러는 개발자가 작성한 코드를 호출이되고 이 메서드가 반환되면 Main Run Loop 와 업데이트 주기가 시작됩니다. 업데이트주기는 레이아웃과 뷰다시그리기를 담당하고 있습니다.

• 사용자 터치 → Operating system → 이벤트큐추가 → 이벤트를 가져와 Application객체가 이벤트를 전달 Core객체에서 해당하는 handler를 처리한 후 반환 → MainRunLoop와 업데이트 주기 발생(레이아웃 및 뷰다시그리기) → 화면에 표시

Update Cycle

• updateCycle은 앱이 모든 이벤트처리코드를 실행을 마친 후에 컨트롤이 mainRunLoop로 반환되는 시점입니다. 이 시점에서 시스템이 layout , display , constraints 의 업데이트를 시작합니다.
• 이벤트처리하는 과정에서 뷰를 변경시키기를 요청하면 업데이트주기에서 변경사항을 실행합니다. 사용자의상호작용과 레이아웃 업데이트 사이의 지연은 사용자가 알 수 없어야 합니다.
• ios앱은 일반적으로 60fps을 애니메이션이되면 refreshCycle이 1초에 60번 그린다는 의미입니다. 따라서 사용-자는 상호작용하는 것과 컨텐츠 및 레이아웃업데이트를 보는 것의 지연을 알 지못합니다.
• 하지만 이벤트가 처리되는 시점과 해당 뷰를 다시그리는 시점사이에 간격이 있기 때문에 특정시점에서 뷰를 업데이트를 하기원해도 뷰가 업데이트되지 않을 수 도 있습니다.(어느 뷰가 가장 최근의 컨텐츠나레이아웃에 의존하여 계산하는 경우) 이러한 문제를 해결하기위해 run loop와 업데이트주기, UIview메서드를 알아야합니다.

Layout

뷰의 레이아웃은 화면의 size와 position 참조합니다. 모든 뷰는 슈퍼뷰의 좌표계에서 존재하는 size, position를 정의하는 프레임이 있습니다. UIView는 뷰의 레이아웃이 변경되었음을 시스템에 알릴 수 있는 방법을 제공할 뿐만 아니라 뷰의 레이아웃을 다시 계산한 후 수행할 작업을 정의하기 위해 overriding을 제공합니다.

layoutSubviews()

• 뷰와 뷰의 모든subview들을 repositioning, resizing을 처리하는 메서드
• 현재 뷰와 모든하위뷰들의 location과 size를 제공합니다.
• 모든 하위뷰들을 호출하기때문에 이 메서드는 무거운 작업입니다.
• 뷰들의 frame을 recalculate할 때 시스템은 이 메서드를 호출하므로 프레임을 설정하고 위치지정 및 크기 조정을 지정하고 싶을 때 사용합니다.
• view hierarchy(뷰의 계층구조)에서 layout refresh가 필요할 때 명시적으로 이메서드를 호출하면 안됩니다. 대신에 다른 메서드들을 사용합니다.
• layoutSubviews가 완료되면 뷰를 소유한 뷰 컨트롤러에서 viewDidLayoutSubviews에 대한 호출이 발생합니다. 따라서 레이아웃이나 위치를 계산해서 정하는 경우 viewDidLoad, viewDidAppear에서가 아닌 viewDidLayoutSubviews에서 호출하는 것이 안정적입니다.

Automatic refresh triggers

개발자가 직접 작성하지 않아도 뷰의 레이아웃을 변경한 것을 자동으로 표시하는 여러 이벤트가 있습니다.

• 뷰의 레이아웃 변경
  1. Resizing a view
  2. Adding a subview
  3. User scrolling a UIScrollView (layoutSubviews is called on the UIScrollView and its superview) layoutSubviews 는 UIScrollView 및 해당 Superview에서 호출됩니다
  4. User rotating their device (화면 회전)
  5. Updating a view’s constraints

이러한 목록들은 모두 뷰의 위치를 다시 계산한 후 자동으로 마지막에 layoutSubviews 호출로 가야할 것을 시스템에 전달합니다.

직접 layoutSubviews를 발생하기

setNeedsLayout()

• 시스템에 뷰의레이아웃을 다시 계산할 필요가 있다고 전달합니다. 호출되는 즉시 실행되며 반환됩니다. 반환되기 전에 뷰를 실제로 업데이트하지않지만, 뷰가 다음 업데이트 주기에 뷰가 업데이트됩니다.
• 반환되기전까지 간격이 있기 때문에 사용자에게 UI지연을 주의해야합니다.

layoutIfNeeded()

• 뷰의 레이아웃업데이트가 필요한 경우 다음 updateCycle에 실행하기 위해 큐에 넣는 것 대신에 즉시 뷰의 레이아웃업데이트를 합니다.
• 같은 runloop에서 이메서드를 두번 호출하면 두번째 메서드는 호출이 되지않습니다.
• setNeedsLayout()와 가장 큰 차이점은 이 메서드가 반환되기전에 즉시 뷰업데이트가 발생하는 것이기 때문에 필요한 경우 비교해서 사용합니다. (이 메서드는 constraint를 변경하는 애니메이션을 할 때 유용합니다.)

Display

뷰의 display는 color,text,image,coreGraphics drawing(코어그래픽도면)을 포함하는 sizing(크기)와 positioning(위치)가 지정되지 않은 뷰 및 하위뷰들의 프로퍼티를 포함하고 있습니다.

draw(_:)

• 뷰의 컨텐츠를 그릴 때 사용합니다. (하위뷰들에서는 호출되지 않습니다.)
• 따라서 즉시 그리지 않을 경우가 아닌 다른 runloop에서는 호출하면 안됩니다.

setNeedsDisplay()

• 뷰의 컨텐츠가 업데이트 되어야한다고는 하지만 실제로 그리기 전까지는 변경되지 않고 다음 updateCycle에서 변경됩니다.
• 다음 updateCycle에서 뷰의 일부컨텐츠만 변경할 때 이 메서드를 호출합니다.

Constraints

오토레이아웃에서 뷰를 배치하고 다시그리는 단계

1. constraints를 업데이트 (시스템은 뷰들의 constraints를 설정한후 계산합니다.)
2. 레이아웃엔진이 뷰와 하위뷰들의 프레임을 계산합니다. 레이아웃 전달
3. display는 뷰를 다시그릴 필요가 있을 때 다시 그리게됩니다.

updateConstraints()

• 이 메서드를 사용하면 오토레이아웃을 사용한 뷰에서 dynamically(동적으로) constraints를 변경가능 합니다. (layoutSubviews()와 동작방식이 유사합니다.)
• 변경될수 있는 constraints만 구현해야합니다. static(정적)인 constraints는 인터페이스빌더나, 뷰의 초기화 및 viewDidLoad()에서 구현해야합니다.

setNeedsUpdateConstraints()

• 다음 updateCycle에 constraints를 업데이트할 경우 사용합니다.

updateConstraintsIfNeeded()

• constraint update플래그를 확인한 후 runloop가 끝나기전에 즉시 updateConstraints()를 호출하여 constraints를 변경합니다.

invalidateIntrinsicContentSize()

• 오토레이아웃에는 intrinsicContentSize프로퍼티가 있는데 다시 변경할 필요가 있을 때 플래그를 설정할 수 있습니다.

참고링크

• iOS 레이아웃
  • Demystifying iOS Layout - https://tech.gc.com/demystifying-ios-layout/
  • 입력이벤트 처리이미지 - https://developer.apple.com/library/archive/documentation/General/Conceptual/Devpedia-CocoaApp/MainEventLoop.html
  • 레이아웃 요약이미지 - https://i.stack.imgur.com/i9YuN.png
  • [ios] setNeedsLayout vs layoutIfNeeded - https://baked-corn.tistory.com/105

온보딩화면을 구현하면 새로운 사용자에게 서비스를 이용하기위한 안내 및 설정들을 제공할 수 있습니다.

주의할 점

1. 서비스사용의 도움이 되는 내용들을 제공하는 것을 권장합니다.
2. 온보딩화면이 끝난 후 앱 시작화면으로 이동할 수 있도록 처리합니다.
3. 너무 많은 내용을 제시하기 보다는 필요한내용들만 직관적으로 표시합니다.

UIPageViewController 방식으로 보여주는 방법 vs UICollectionView로 보여주는 방법

• 온보딩화면이나 테스트화면을 매번 새로운 UI디자인을 보여주는 것이 아닌 비슷한 디자인형식으로 보여주는데 UIPageViewController를 사용하면 여러 ViewController를 사용하게 되므로 메모리측면에서 비효율적이라고 생각합니다.

UICollectionView Page나누는 원리

• 아이템 마다 컬렉션뷰의 높이와 너비를 지정
• Scrollview.frame.width = collection view.frame.width 와 동일합니다.
• contentOffset.x 을 사용하여 스크롤을 했을 때 x좌표를 이동시킵니다.
• collectionView.isPagingEnabled : 컬렉션뷰를 스크롤할 때 아이템단위로 스크롤하는 속성(페이징옵션)
  • 🚨  위 속성을 사용할 때 컬렉션뷰의 아이템크기와 아이템간의 거리를 정확히 설정해야합니다.

🚨  UICollectionView must be initialized with a non-nil layout parameter : UIFlowLayout초기화 안해줬을 때 디버그에러

온보딩화면 종료 후 첫 화면 이동 (window의 루트뷰를 변경하기)

guard let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene else { return }
windowScene.windows.first?.rootViewController = ViewController()
windowScene.windows.first?.makeKeyAndVisible()

• 온보딩화면을 모두 본 후에는 다시 돌아올 수 없도록 루트뷰를 변경합니다.

앱 최초실행 - 테스트 가능한 코드

• 앱 최초실행시 UserDefault를 flag를 사용해서 여부를 판단할 수 있지만 매번 앱을 삭제 후 설치해서 판단하기가 테스트할 때는 번거롭기 때문에 두가지 방식으로 분리

NSMutableAttributedString

텍스트 지정한 범위만 색깔 변경하기

let stringLength = attributedString.length

let attributedString = NSMutableAttributedString(string: "위치 기반으로 빠르게\n주위 친구를 확인")
attributedString.addAttributes([.foregroundColor: UIColor.green],
                                range: NSRange(location: 0, length: 5))
attributedString.addAttributes([.foregroundColor: UIColor.red],
                                range: NSRange(location: 6, length: stringLength - 6))

• range를 매개변수로 문자열의 지정한 범위의 색상을 변경할 수 있습니다.

텍스트 행 간의 간격 지정하기

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineHeightMultiple = 1.08
paragraphStyle.alignment = .center // 문자열을 중앙에 정렬

let attributedString = NSMutableAttributedString(string: "위치 기반으로 빠르게\n주위 친구를 확인")
attributedString.addAttributes([.kern: -0.5, .paragraphStyle: paragraphStyle])

• 텍스트를 중앙에 정렬하기 위해서는 UILable의 textAlignMent 옵션이 아닌 paragraphStyle 를 정렬해줘야 합니다.

참고링크

• 온보딩화면
  • H.I.G - https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/onboarding/
  • 온보딩구현 CollectionView (Swift5, Xcode 12) - https://youtu.be/VMiaNFabsZA
  • 최초실행 여부 - https://dongkyprogramming.tistory.com/30
• NSMutableAttributedString
  • 텍스트 특정범위 폰트크기, 색상변경 - https://0urtrees.tistory.com/183

커스텀컬러 지정하기

코드로 CustomColor지정

Extension으로 초기화 설정하기 (rgb 255.0 나누기설정 및 Hex값 초기화)

extension UIColor {
    // rgb로 초기화하는 경우 255.0 디폴트 설정
    convenience init(red: Int, green: Int, blue: Int, a: Int = 0xFF) {
        self.init(
            red: CGFloat(red) / 255.0,
            green: CGFloat(green) / 255.0,
            blue: CGFloat(blue) / 255.0,
            alpha: CGFloat(a) / 255.0
        )
    }

    // Hex초기화
    convenience init(hex: Int) {
        self.init(
            red: (hex >> 16) & 0xFF,
            green: (hex >> 8) & 0xFF,
            blue: hex & 0xFF
        )
    }

    // 알파값(투명도를 포함한 Hex초기화)
    convenience init(hexWithAlpha: Int) {
        self.init(
            red: (hexWithAlpha >> 16) & 0xFF,
            green: (hexWithAlpha >> 8) & 0xFF,
            blue: hexWithAlpha & 0xFF,
            a: (hexWithAlpha >> 24) & 0xFF
        )
    }

        enum Colors {
            static let customRed: UIColor = { UIColor(hex: 0x67776) }()
        }
}

코드로 다크모드지원하기

let color = UIColor { (traitCollection) -> UIColor in
    if traitCollection.userInterfaceStyle == .dark {
        return UIColor.systemGreen
    } else {
        return UIColor.systemRed
    }
}

view.backgroundColor = color

→ 인터페이스빌더에서 커스텀컬러 사용불가능

Asset에 ColorSet추가

1. asset 폴더로 이동한 후 New ColorSet

2. Inspector탭에서 원하는 컬러색상 지정

3. 다크모드를 지원한다면 Inspector탭에서 Appearance속성을 변경해서 컬러를 추가하면됩니다.

4. UIColor(named: "ColorSet명") 사용

   • extension으로 사용하면 편리

     extension UIColor {
       class var ColorSet명: UIColor? { return UIColor(named: "ColorSet명") }
     }

→ 오타위험이 있다., 다크모드 지원이 간편하다.

커스텀폰트 지정하기

폰트파일 사용해서 추가하는 경우

1. 프로젝트에 폰트파일 추가
   • Target Membership과 Copy if you needed 체크 확인 한 후 추가하기

2. info.plist에서 Fonts provided by application속성 추가 후 Value에 파일명추가

3. label.font = UIFont(name: "S-CoreDream-1Thin", size: 51) 처럼 사용

SwiftGen, R.Swift라이브러리

R.Swift라이브러리

프로젝트의 리소스들을 자동완성 및 Strong Type을 시켜주는 라이브러리

💡 안드로이드에서는 R이라는 클래스를 이용해 모든 리소스를 관리한다고 합니다.

사용하는 이유?

1. 컴파일 시간을 체크할 수 있습니다.
2. 자동완성기능 제공 (이름을 생각해서 작성하지 않아도 됩니다.)
3. Type화를 통해서 어떤 값을 반환하는지 추측할 수 있습니다.
   • R.swift파일에

사용방법

1. Podfile 에 pod 'R.swift 추가
2. pod install
3. 타겟의 Build Phases 에서 New Run Script Phase
4. Run Script 에 "$PODS_ROOT/R.swift/rswift" generate "$SRCROOT/R.generated.swift" 코드를 추가한 후 Build Phases 의 순서를 변경해주어야합니다.

5. Run Script 의 Output Files 에 $SRCROOT/R.generated.swift 코드를 추가합니다.
   • 이 과정을 통해 빌드과정에서 리소스가 루트폴더에 R.generated.swift 파일로 추가됩니다.
   • 🚨  프로그래밍 과정 중 리소스를 추가한다면 새로운 R.generated.swift 파일로 변경하면 바로 수정되서 편리합니다.(가끔 바로 Xcode상에서 수정안되는문제)
6. 프로젝트에 생성된 Copy items if needed 를 체크해제한 후 R.generated.swift 를 추가합니다.
   • Copy items if needed : 복사하지 않고 파일원본 이동

• 사용예시 - https://github.com/mac-cain13/R.swift/blob/master/Documentation/Examples.md#images

Swiftgen라이브러리

프로젝트 리소스들을 자동완성 시켜주는 라이브러리

사용하는 이유?

1. 리소스를 문자열로 접근할 때 에러발생을 최소화할 수 있습니다.
2. 자동완성으로 편리하게 사용가능합니다.
3. 리소스의 변경이 일어났을 때 에러를 빠르게 찾을 수 있다.

사용방법 (CocoaPod)

1. Podfile 에 pod 'SwiftGen', '~> 6.0’ 추가
2. pod install
3. 터미널(프로젝트루트폴더)에서 ./Pods/SwiftGen/bin/swiftgen config init 실행
   • swiftgen.yml 파일을 생성하는 과정
4. 프로젝트에 생성된 Copy items if needed 를 체크해제한 후 swiftgen.yml 를 추가합니다.
   • 🚨  위치는 프로젝트 네비게이터 바로 아래

5. swiftgen.yml 파일 작성하기

    strings:
      inputs: test/Base.lproj
      filter: .+\.strings$
      outputs:
        - templateName: structured-swift5
          output: test/Generated/Strings.swift
    xcassets:
      inputs:
        - test/Assets.xcassets
      outputs:
        - templateName: swift5
          output: test/Generated/Assets.swift

   • 루트디렉토리명 : test
   • 생성된 swift파일 저장하기 위한 폴더 Generated생성합니다.

6. 터미널(프로젝트루프폴더)에서 ./Pods/SwiftGen/bin/swiftgen 실행

   • 🚨  리소스를 자주변경한다면 터미널말고 Run Script 에 작성해서 사용할 수 있다.

7. Generated 폴더에 생성된 Assets.swift와 Strings.swift를 xcode로 이동 후 사용하면 됩니다.

• 느낀점 : 🤔  Localization을 할 때는 SwiftGen이 strings파일을 처리할 때 좀 더 편리한 것 같고, 다른 리소스에 사용하기에는 R.Swift가 편리하지만 파일이 좀 더 큰 것 같다.

UITextField

텍스트필드 Singline

밑줄 UIView로 넣는 방식

override func viewDidLayoutSubviews() {
    let borderLine = UIView()
    borderLine.frame = CGRect(x: 0, y: Double(textField.frame.height) - 2, width: Double(textField.frame.width), height: 2)
    borderLine.backgroundColor = UIColor.systemGreen.cgColor

        textField.borderStyle = .none
    self.addSubview(borderLine)
}

밑줄 CALayer로 넣는 방식

override func viewDidLayoutSubviews() {
    let bottomLine = CALayer()
    bottomLine.frame = CGRect(x: 0, y: textField.frame.height - 2, width: textField.frame.width, height: 2)
    bottomLine.backgroundColor = UIColor.systemGreen.cgColor

    textField.borderStyle = .none
    textField.layer.addSublayer(bottomLine)
}

• 두가지 방법 모두 상관 없고 y좌표를 텍스트필드 높이에서 일정높이 아래에 위치시키고 height로 굵기를 지정할 수 있습니다.
• 🚨 viewDidLoad에서는 오토레이아웃규칙이 모두 적용되지 않기 때문에 viewDidLayoutSubviews()에서 실행해야합니다.
• 자주 사용한다면 UITextField에 Extension으로 사용하면 편리하게 사용할 수 있을 것 같습니다.

화면 키보드 가리는 현상해결 - IQKeyboardManager라이브러리

UITextField 및 UITextView를 사용하는 경우 키보드가 화면을 가리는 경우 처리를 도와주는 라이브러리

사용방법(CocoaPod)

1. Podfile 에 pod 'IQKeyboardManagerSwift' 추가

2. pod install

3. AppDelegate.swift 파일

    import IQKeyboardManagerSwift
   
    @main
    class AppDelegate: UIResponder, UIApplicationDelegate {
        func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
   
          IQKeyboardManager.shared.enable = true
   
          return true
        }
    }

커스텀화하기

import IQKeyboardManagerSwift

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

      IQKeyboardManager.shared.enable = true
      IQKeyboardManager.shared.enableDebugging = true //키보드에 관한 정보들을 확인할 수 있습니다.
      IQKeyboardManager.shared.enableAutoToolbar = true // 기본으로 생성되는 툴바옵션 사용여부

      IQKeyboardManager.shared.overrideKeyboardAppearance = true // 기본제공 키보드Appearance 변경여부
      IQKeyboardManager.shared.keyboardAppearance = .dark // 기본제공 키보드Appearance 다크색으로 변경

      IQKeyboardManager.shared.keyboardDistanceFromTextField = 100.0 // 키보드와 텍스트요소와의 거리지정
      IQKeyboardManager.shared.toolbarTintColor = .systemGreen // 툴바색상 변경가능 (overrideKeyboardAppearance 함께 쓰면 적용안됨)
      IQKeyboardManager.shared.toolbarDoneBarButtonItemText = "확인" // 툴바 Done버튼 텍스트변경
      IQKeyboardManager.shared.toolbarDoneBarButtonItemImage = UIImage(systemName: "star.fill") // 툴바 Done버튼 이미지변경
      IQKeyboardManager.shared.shouldShowToolbarPlaceholder = true // 툴바 중간에 텍스트요소의 placeholder를 표시합니다.
      IQKeyboardManager.shared.placeholderFont = UIFont(name: "Setting", size: 15) // 툴바 placeholder의 폰트지정
      IQKeyboardManager.shared.shouldResignOnTouchOutside = true // 화면에서 텍스트요소의 바깥부분 누르면 사라지도록 지정
      IQKeyboardManager.shared.shouldPlayInputClicks = false // 툴바의 화살표이동할 때 소리여부

      return true
    }
}

• AutoToolbar

참고링크

• 커스텀컬러
  • CustomColor 생성과 관리는 어떤방식이 효율적일까요? - https://wodyios.tistory.com/11
  • HexColor Swift에서 적용하기 - https://sosoingkr.tistory.com/31
  • 김종권의 iOS앱 개발 알아가기 - https://ios-development.tistory.com/686
• 커스텀폰트
  • TTF vs OTF 차이점 - https://zeddios.tistory.com/198
• IQKeyboardManager
  • 공식 깃허브 - https://github.com/hackiftekhar/IQKeyboardManager
  • 커스텀화 - https://youtu.be/b6njX3Ui8qU
• SwiftGen
  • 공식 깃허브 - https://github.com/SwiftGen/SwiftGen
  • 제드 블로그 - https://zeddios.tistory.com/1017?category=682196
  • dev.ssun 블로그 - https://hyesunzzang.tistory.com/230
  • SwiftGen in Xcode 11 - https://www.youtube.com/watch?v=DHmenm94PlI
  • raywenderlich - https://www.raywenderlich.com/23709326-swiftgen-tutorial-for-ios
• R.swift
  • 공식 깃허브 - https://github.com/mac-cain13/R.swift
  • 제드 블로그 - https://zeddios.tistory.com/1016
  • 5anniversary - https://blog.5anniversary.dev/50
• UITextField Singline
  • UIView - https://medium.com/@codepany/swift-3-custom-uitextfield-with-single-line-input-ae91e10f30db
  • CALayer - https://www.youtube.com/watch?v=xm0WK1L2DjI

• Firebase를 사용하기 위해서 첫번째로 Apple프로젝트에 Firebase를 추가해야합니다.
• https://firebase.google.com/docs/ios/setup?hl=ko - 공식문서에 자세한 방법이 설명되어 있습니다.
  • https://console.firebase.google.com/ - console링크

🚨 GoogleService-Info.plist를 추가하기 전에 원격저장소(Github)에 프로젝트를 업로드한다면 제거하고 올리는 것을 권장 (개인정보 유출 가능성이 있습니다.)

iOS에서 전화번호로 Firebase에 인증

• https://firebase.google.com/docs/auth/ios/phone-auth?hl=ko - 공식문서
• Firebase 인증을 사용하면 사용자의 전화로 SMS 메시지를 전송하여 로그인하는 것이 가능합니다. 사용자는 SMS 메시지에 포함된 일회용 코드를 사용하여 로그인합니다.
• 여러 Firebase제품 중 인증에 관련된 Auth를 추가합니다.
  1. https://firebase.google.com/docs/ios/swift-package-manager?hl=ko - SPM설치
  2. pod 'Firebase/Auth' - CocoaPods

Firebase 프로젝트에서 전화번호 로그인 사용 설정

• Console에서 Authetication섹션에서 Sign in method탭에서 전화를 제공합니다.

앱 인증 사용 설정

전화번호 인증을 사용하려면 Firebase에서 전화번호 로그인 요청이 내 앱에서 발생한 것인지 확인할 수 있어야 합니다.

1. Silent APN 알림 : 기기에서 처음으로 전화번호를 통해 사용자를 로그인 처리하면 Firebase 인증에서 사용자 모르게 기기로 푸시 알림을 전송하여 토큰을 보냅니다.
   • iOS 8.0이상은 silent notification은 사용자의 권한요청이 필수가 아닙니다.
2. reCAPTCHA 인증 : 사용자가 앱의 백그라운드 새로고침을 중지했거나 iOS 시뮬레이터에서 앱을 테스트하는 경우와 같이 자동 푸시 알림을 주고받을 수 없는 경우, Firebase 인증은 reCAPTCHA 인증을 사용하여 전화번호 로그인 과정을 완료합니다.

사용자 전화로 인증 코드 보내기

사용자에게 전화번호를 제공하도록 요청하는 UI를 작성한 후, verifyPhoneNumber:UIDelegate:completion: 를 호출하여 Firebase가 사용자의 전화에 SMS로 인증 코드를 전송하도록 요청합니다.

var phoneNumber = "123-456-789" // 전화번호 

PhoneAuthProvider.provider()
  .verifyPhoneNumber(phoneNumber, uiDelegate: nil) { verificationID, error in
      if let error = error {
        self.showMessagePrompt(error.localizedDescription)
        return
      }
      // 에러가 없다면 사용자에게 인증코드와 verificationID(인증ID) 전달
  }

• verifyPhoneNumber:UIDelegate:completion: 가 호출하면 Firebase가 앱에 사용자 모르게 푸시 알림을 보내거나 사용자에게 reCAPTCHA 챌린지를 표시합니다.

• 지정된 전화번호로 인증코드가 포함된 SMS메시지를 보낸 후 성공적으로 처리되면 인증ID를 전달합니다.

  • 전달된 인증 ID는 UserDefault 및 DB에 저장합니다.

• Auth 인스턴스의 languageCode 속성을 사용하여 인증언어를 지정하면 SMS메시지를 현지화할 수 있습니다.

    Auth.auth().languageCode = "kr"

권장사항

1. 지역마다 법에따라 다르지만, 일반적으로 사용자에게 SMS메시지가 발송되고 요금이 발생할 수 있다는 점을 알려야 합니다.

인증코드로 사용자 로그인 처리

정상적으로 인증코드와 인증ID를 받았다면 signInWithCredential:completion: 를 호출하여 FIRPhoneAuthCredential 객체를 만든 후 사용자로그인합니다.

• FIRPhoneAuthCredential 객체 생성

    let credential = PhoneAuthProvider.provider().credential(
      withVerificationID: verificationID,
      verificationCode: verificationCode
    )

• FIRPhoneAuthCredential 객체를 사용하여 로그인

    Auth.auth().signIn(with: credential) { authResult, error in
        if let error = error {
          print(error.debugDescription)
        }
        // 인증 완료 -> 로그인 진행
    }

  • 세부적인 에러처리는 공식문서 참고

가상 전화번호로 할당량제한 없이 테스트하기

가상전화번호로 테스트 장점

1. 할당량을 소모하지 않고 전화번호 인증을 테스트합니다.
2. 실제 SMS 메시지를 보내지 않고 전화번호 인증을 테스트합니다.
3. 동일한 전화번호로 연속으로 테스트를 하는경우 위험없이 실행할 수 있습니다. (앱스토어 리뷰과정에서 리뷰어가 같은 전화번호로 테스트를 할 때 reject의 위험을 최소화할 수 있습니다.)
4. 시뮬레이터에서 테스트를 쉽게 할 수 있습니다.
5. 실제 전화번호에 적용되는 보안검사를 하지않고 테스트를 할 수 있습니다.

가상전화번호를 위한 요구사항

1. 실제로 존재하지 않는 전화번호를 사용해야합니다.
2. 가상전화번호는 최대 10개까지 추가할 수 있습니다.
3. 추측하기 어려운 테스트 전화번호/코드를 사용하고 자주 변경합니다.
4. 전화번호는 길이 및 기타 제약 조건에 따라 올바른 형식이어야 합니다.(실제번호처럼 동일한 유효성검사를 진행합니다.)

가상전화번호 생성하기

• Console에서 Authetication섹션에서 Sign in method탭에서 전화번호를 제공합니다.

  

• 로그인이 완료되면 해당전화번호로 Firebase사용자가 생성됩니다.

• 사용자는 실제 전화번호 사용자와 동일한 행동 및 속성을 가지며 동일한 방식으로 실시간 데이터베이스/Cloud Firestore 및 기타 서비스에 액세스할 수 있습니다. 이 과정에서 생성된 ID 토큰은 실제 전화번호 사용자와 동일한 서명을 갖습니다.

• Control Access with Custom Claims and Security Rules - Firebase Admin SDK는 사용자계정 커스텀을 지원합니다.

  • 사용자에게 데이터나 리소스에 접근할 관리자권한을 줄 수 있습니다.
  • 사용자가 속한 다른 그룹을 정의할 수 있습니다.
  • 다양한 단계 접근을 제공합니다.
    • 유료/무료 가입자
    • 관리자 및 일반사용자
    • 교사 및 학생

통합 테스트

• Firebase Authentication 는 수동으로 테스트를 진행하는 경우, reCAPTCHA인증 및 silent push notifications를 무시하고 진행할 수 있습니다.

  • appVerificationDisabledForTesting 값을 TRUE로 설정

  • 가상전화번호만 사용할 수 있습니다.

    let phoneNumber = "+15605551342"
    let testVerificationCode = "220118"
    
    Auth.auth().settings?.isAppVerificationDisabledForTesting = true
    
    PhoneAuthProvider.provider().verifyPhoneNumber(phoneNumber, uiDelegate:nil) {
      (verificationID, error) in
      if error != nil {
          print("인증Error: \(error.debugDescription)")
    
          return
      }
      let credential = PhoneAuthProvider.provider().credential(withVerificationID: verificationID ?? "",
                                                               verificationCode: testVerificationCode)
      Auth.auth().signIn(with: credential) { (authData, error) in
          if error != nil {
              print("로그인Error: \(error.debugDescription)")
    
              return
          }
          print("authData: \(authData)")
      }
    }

  • 🚨 Capability에서 Background Modes에 Remote notifications가 체크되어 있으면 에러가 발생함

    • Optional(Error Domain=FIRAuthErrorDomain Code=17054 "If app delegate swizzling is disabled, remote notifications received by UIApplicationDelegate need to be forwarded to FIRAuth's canHandleNotificaton: method." UserInfo={NSLocalizedDescription=If app delegate swizzling is disabled, remote notifications received by UIApplicationDelegate need to be forwarded to FIRAuth's canHandleNotificaton: method., FIRAuthErrorUserInfoNameKey=ERROR_NOTIFICATION_NOT_FORWARDED})

Swizzling 없이 전화번호 로그인

Swizzling이란? 런타임때 어떤 메서드를 다른 메서드로 바꾸는 것을 말합니다.

Firebase가 silent push notification으로 APNs 토큰을 얻거나, reCAPTCHA 지정한 custom scheme으로 리다이렉트를 하는 과정에서 Swizzling을 합니다.

• swizzling 사용하지 않는다면 명시적으로 APNs 토큰을 전달하고 redirect URL도 제공해야합니다.

Swizzling 비활성화

• info.plist에서 FirebaseAppDelegateProxyEnabled 속성울 추가한 후 No로 설정합니다. (Firebase 모든 products에서 swizzling 비활성화) ****

1. APNs device token 얻기

    func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
      // 디바이스토큰을 auth에 전달
      Auth.auth().setAPNSToken(deviceToken, type: .prod)
   
      // 앱에서 필요한 경우 디바이스토큰 추가 처리
      // ...
    }

2. redirect URL

    // AppDelegate.swift
   
    // iOS 9이상
    func application(_ application: UIApplication, open url: URL,
        options: [UIApplicationOpenURLOptionsKey : Any]) -> Bool {
      if Auth.auth().canHandle(url) {
        return true
      }
    }
   
    // iOS 9미만
    func application(_ application: UIApplication,
                     open url: URL,
                     sourceApplication: String?,
                     annotation: Any) -> Bool {
      if Auth.auth().canHandle(url) {
        return true
      }
    }
   
    // SceneDelegate.swift
    func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
      for urlContext in URLContexts {
          let url = urlContext.url
          Auth.auth().canHandle(url)
      }
    }

사용자가 로그인 되면 Firebase프로젝트에 정보가 저장

• 사용자가 처음 로그인하면 새로운 사용자 계정이 생성되고 사용자 이름 및 암호, 전화 번호 또는 인증 공급자 정보와 같은 자격 증명에 연결됩니다.
• 새로운 계정은 Firebase 프로젝트의 일부로 저장되며, 사용자가 로그인하는 방법에 관계없이 프로젝트의 모든 앱에서 사용자를 식별하는 데 사용할 수 있습니다.
  • 따라서 FIRUser객체에서 사용자의 기본 프로필 정보를 가져올 수 있습니다.
  • Manage Users in Firebase
• Firebase 실시간 데이터베이스 및 클라우드 저장소 보안 규칙에서는 auth 변수에서 로그인한 사용자의 고유 사용자 ID를 가져와 사용자가 액세스할 수 있는 데이터를 제어할 수 있습니다.
• Link Multiple Auth Providers to an Account on Apple Platforms
• 인증 세부적인 에러처리 - Handle Firebase Apple Platforms Auth Errors

로그아웃

let firebaseAuth = Auth.auth()
do {
  try firebaseAuth.signOut()
} catch let signOutError as NSError {
  print("Error signing out: %@", signOutError)
}

💡 Authentication vs Authorization vs Certification

1. Authentication
   • (사용 또는 입장하는 상황에서) 인증
   • ex. 로그인하는 절차
2. Authorization
   • (권한) 인증
   • ex. 로그인 한 계정이 관리자인지, 일반사용자인지 구분하는 절차
3. Certification
   • (심사를 통과한) 인증
   • 일정 기준을 넘었을때 주어지는 것

참고링크

• Firebase 블로그
  • https://fomaios.tistory.com/entry/Firebase-휴대폰번호로-로그인하기Authenticate-with-Phone-Number
  • https://ichi.pro/ko/iosui-firebase-jeonhwa-beonho-injeung-64735371857612
• 문자 인증번호 자동완성 - https://im-designloper.tistory.com/59
• Swizzling 블로그
  • Swift ) Method Swizzling
  • https://jinsangjin.tistory.com/140
• URL Scheme 등록 - https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app
• Apple push notification service (APNs) 설정하기 - https://spiralmoon.tistory.com/entry/Apple-Apple-push-notification-service-APNs-설정하기
• authentication 과 authorization의 차이 - https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=iq_up&logNo=100057746027

나만의 앱을 만들어서 앱스토어에 배포하려면 애플은 개발자 계정을 등록한 후에 배포를 할 수 있습니다.

애플 개발자계정을 등록하는 방법에 대해서 알아보겠습니다. 개발자계정은 개인과 회사단위로 등록이 가능하지만 이 포스터는 개인을 기준으로 진행합니다.

2. 계정 등록시 필요한 것들

• 개발자 계정시 필요한 것들
  • 애플 계정
  • 애플 기기
  • 계정 내 국가/지역 인증, 이메일 인증, 휴대폰 번호 인증, 이중 인증설정
  • 한화 129000원

😅 이중인증설정이 되어있지 않다면 공식사이트를 참고하여 설정을 켜주시면 됩니다.

• https://support.apple.com/ko-kr/HT204915

3. 개발자 계정 등록과정

이중인증설정이 모두 켜져있다면 AppleDeveloperProgram 사이트로 들어가서 등록을 진행합니다.

• AppleDeveloperProgram - https://developer.apple.com/kr/programs/

진행하게 된다면 개인과 조직으로 등록에 필요한 사항들이 나옵니다. 개인으로 등록하는 경우 등록시작버튼을 클릭합니다.

개인 주소와 이름등 개인정보에관한 내용등을 현지 언어와 로마자(영어)로 작성한 후에

아래 이미지대로 순서대로 진행합니다.

모든 등록이 끝났다면 구입버튼을 클릭하여 원하는 결제수단으로 결제를 완료하면 등록이 모두 완료됩니다.

등록이 났다고 바로 승인을 해주지는 않고 약간의 시간이 소요됩니다.

따라서 등록을 모두 마친 후에 다시 AppleDeveloperProgram 개발자 계정 사이트로 들어가게 되면 아직 승인이 나지 않아서 화면에 등록과정이 아직 남아있습니다.

주문승인이 아닌 개발자 승인이 완료되면 메인페이지 보이는 이미지가 아래이미지처럼 변경됩니다!

• 승인 확인 방법
  1. appstoreconnect.apple.com
  2. 메일로 확인

참고링크

• 애플 개발자 계정 도움말 - https://help.apple.com/developer-account/#/
• 애플 개발자 등록 설명 공식사이트 - https://developer.apple.com/kr/support/app-account/
• 개발자 계정 구매 블로그 - https://m.blog.naver.com/nemonangoom/222024589236

• UML은 의사소통을 좀 더 쉽게 하기위한 것
• UML은 코드를 설명하는 여러 방식 중 하나입니다.
  • ex. 코드를 설명하는 방법 중 코드 자체를 보여주는 방법, 주요 기능에 대한 코드단락을 보여주는 방법, 글로 설명하는 방법등등 여러가지가 있습니다.
  • 도표 - 구현방식 및 디자인한 구조를 시각화/도식화를 추상화한 방식으로 보여주는 것
• UML은 Unified Modeling Language의 약자입니다. (통합 모델링 언어)
• UML은 표준화된 모델링언어이기 때문에 OMG(Objective Management Group)에서 표준으로 채택한 언어이고 계속해서 수정보완되어 나가고 있습니다.
• UML의 목적은 시스템이 디자인된 방식을 시각화하는 기준/표준 방식을 제공하는 것입니다.

UML이 필요한 이유?

• 자신한테는 전체 구조 및 클래스 의존성을 파악하는데 유용합니다.
• 동료나 협업을 할 때 의사소통 및 설계를 논의하는데 유용합니다.
• 미래에 이 프로그램을 보았을 때 문서화가 되어있어 빠르게 이해하는데 유용합니다.

UML의 종류

• UML은 크게 2가지 종류로 나뉩니다.
  • 첫 번째는 구조 다이어그램 (정적인 구조) : 시스템의 개념 관계등에 관한 요소를 보여줍니다.
  • 두 번째는 행위 다이어그램 (동적인 구조) : 각 요소들간에 변화와 흐름 등을 보여줍니다.

클래스 다이어그램 (구조 다이어그램 중 하나)

• 클래스 다이어그램은 의존관계를 파악하고 싶을 때 사용합니다.
• 한 클래스를 네모로 표현하고 프로퍼티와 메서드 2부분으로 나눠서 표기합니다.
• 클래스 간의 관계를 선을 사용하여 표현합니다.

- 일반화 : 한 클래스가 다른클래스를 포함하는 상위 관계일 때 (예를 들어, 상속 관계) 화살표는 자식클래스가 부모클래스를 가리켜야 합니다.
- 의존 : 한 클래스가 다른클래스를 참조하는 관계

시퀀스 다이어그램 (행위 다이어그램 중 하나)

• 시퀀스다이어그램은 순서를 파악하고 싶을 때 사용합니다.
• 시간의 순서대로 작성합니다.

UML 작성하는 방법

• 손이나 UML툴을 사용하여 작성합니다.

1. 손으로 직접 그려서 작성하기
2. Gliffy
3. draw.io
4. miro

• Figma 툴로 작성
• 링크 - https://www.figma.com/file/NhmkJF2ZfFxzMT0fcT7iWr/느린-우체통?node-id=0%3A1

🍎 iOS 앱 스케치 Tip

• Frame을 생성할 때 원하는 기기 사이즈를 Frame으로 생성합니다.

• iOS에서 사용하는 UIKit요소등을 미리 정의해 놓은 프로젝트등을 참고해서 복사 붙여넣기로 사용하면 편리하게 구현이 가능합니다.

• 🚨 만약 미리 구현해놓은 프로젝트에서 복사 붙여넣기로 하는 경우 텍스트가 변경이 안된다면 폰트를 변경해서 사용하면 텍스트 변경이 가능합니다.

• 참고사이트 목록

  • https://www.figma.com/file/x8rFkJEzePrXUjohv2kmOj/Figma-iOS-UI-Kit-(Free)-(Community)?node-id=635%3A695
  • https://www.figma.com/file/19a0WzKqvZtwVhL9LdyZK7/iOS%2FiPadOS-13-Design-UI-Kit-(Community)?node-id=29%3A2890

💡 UI스케치 Tip

• UI적으로 어떻게 화면에 보여야 좋을지에 대해서도 생각합니다. (사용자의 편리성, 이해가 유용할 지?)

• 직접 스케치 해서 화면간의 관계를 생각해봅니다.

  예시

  • 테이블 뷰에서 셀들을 사이즈가 큰 형식으로 팔로워목록을 나타내면 팔로워수가 많아질 때 알아보기 힘들기 때문에 적당한 크기로 만들어야합니다.
  • 화면들간의 문맥이 연결되어 있는 부분과 연결되어 있지 않는 부분들을 어떻게 분리할지에 대해서 생각해야합니다. (네비게이션 컨트롤러)

• API 응답으로 받은 정보를 바탕으로 화면을 작성합니다.

• Apple Design Resource 링크

• Goodnotes 5와 Sketch는 디자인을 할 때 유용한 툴

  • [Sketch.com](

🌟 앱 기능:

• 사용자가 최초 앱을 실행할 경우, 팝업 화면(walkthrough)을 페이지뷰로 띄어줍니다.
  • 이 화면은 최초 1회만 뜨고, 이후에는 뜨지 않습니다.
  • 이 화면에는 간단한 앱에 대한 설명등을 표시합니다.
• 사용자는 로그인 기능을 통해 편지 내용 및 개인정보등을 저장할 수 있습니다.
  • 중복된 아이디는 DB에서 검색하여 확인합니다.
  • 소셜로그인 - Ver2.0에 추가
  • 이메일 및 전화 인증기능 - Ver2.0에 추가
• 사용자는 이메일을 통해 임시비밀번호를 전송해 비밀번호를 변경할 수 있습니다.
• 알림기능을 통해 우편함에 우편이 도착했을 때 알림을 전송합니다.
• 날씨 API를 통해 편지를 작성하는 날짜에 대한 날씨정보를 같이 전송할 수 있습니다.
• 사용자는 편지를 작성하는 위치를 같이 전송할 수 있습니다.
• 사용자는 메일이 전송이 완료된 후에는 확인은 가능하지만 수정/삭제가 불가능합니다. - 1년뒤에 전송
• 사용자는 보낸이에게 편지를 전송합니다.
  • 앱을 삭제한 경우에 MessageUI, Swift-SMTP를 활용하여 이메일주소로 전송합니다.
• 사용자는 편지 전송횟수가 계정마다 3번씩 제한이 있습니다.
  • 전송버튼을 클릭한 경우 매번 남은 횟수를 경고창을 통해 사용자에게 알려줍니다. 남은 횟수가 0이라면 홈화면으로 전환 됩니다.
  • 전송횟수 추가 관련 - 추후 예정
• 사이드메뉴 기능을 통해 프로필, 설정, 홈 이동 , 편지함 (받은 편지함, 보낸 편지함) 화면 전환이 가능합니다.
• 편지지 배경, 폰트, 텍스트 색상, 텍스트크기 지정은 컬렉션뷰로 표시합니다.

🌳 Git 규칙:

• main브런치는 프로젝트 배포 시점에 메인으로 머지
• 각각의 버전별 개발은 ver[버전]-test 브런치에서 진행 후 테스트가 통과하거나 이슈문제가 없다면 ver[버전]으로 머지하는 방식으로 개발
• 커밋은 issue단위로 나누어 확인하기
  • 커밋메시지는 깃모지와 커밋 종류를 사용하여 작성

🚨 요구사항:

• 아이폰용으로 앱 제작, 최소 버전 iOS13.0이상 지원
• 스토리보드 UI 구현

💡 기능요구서 Tip

• 프로젝트를 시작하는 경우 기능요구서를 작성하거나 주어진다면 읽고 무슨 기술을 사용할지 간략하게 생각해봅니다.

• 기능요구는 목적이 변경되면 수정 될 수도 있습니다. (작은 단위 → 큰 단위)

• 기능요구서에 의문이 가는 부분은 질문을 하는 것이 좋습니다.

• JSON을 파싱하는 경우거나 API를 활용할 경우 직접 API문서를 본 후 디자인을 작성합니다.

  • 지금 프로젝트같은경우 깃헙API(따로 인증받아지 않아도되서 인증키 필요없음)를 활용하므로 사용자정보를 어떤 식으로 받아오는 지 확인합니다.

• API를 사용하는 경우 어떻게 사용할 지에 대해서 자세히 알아봅니다

  → 통신을 확인하기 위해서 postman 앱을 사용하거나,

  터미널에서 curl 명령어를 사용하여 dummy값을 확인할 수 있다. (미리 확인가능)

UICollectionView가 iOS10에서 달라진 점에 대해서 설명하는 세션입니다.

크게 세가지 부분으로 나누어 설명합니다.

1. Smooth Scrolling

   스크롤을 하는 경우 부드럽게 나타내기 위해서는 프레임삭제,손실(drop frame)을 하면 안됩니다.

   iOS앱이 부드럽게 나타내려면 초당 60프레임으로 실행되는 앱 애니메이션을 위해 노력해야 합니다 .

   즉, 애니메이션이 "부드럽게" 나타나려면 사용자 인터페이스의 주어진 프레임이 16.67ms 미만으로 표시되어야 합니다. (16.67ms * 60 = 1second)

   16.67ms 프레임속도가 넘어가면 프레임손실이 나타나게 됩니다.

   이러한 방법을 해결하기위해 로딩을 줄이고 로딩되지 않는 셀을 사용합니다.

   • UICollectionView에서 셀의 생명주기

     1. prepareForReuse
     2. cellForItemAtIndexPath - 모델에서 셀 데이터를 채우는 작업을 많이 하는 부분
     3. willDisplayCell - 셀이 화면에 표시되려고 할 때 가벼운 준비
     4. 셀이 화면에 나타나고 스크롤이 계속되면서 화면 밖으로 이동하기 시작합니다.
     5. didEndDisplayingCell

     iOS 9이하에서는 10과 차이점은 willDisplayCell의 호출시점이 10에서는 실제로 뷰에 표시되기전까지 호출되지 않도록 변경되고 didEndDisplayingCell메서드가 호출된 후 cell은 즉시 재사용큐에 반환되지 않고 약간 유지되도록 변경되었습니다.

     이러한 변경사항으로 실제로 필요하기전에 그리지 않으므로 병목현상을 피할 수 있게 되었습니다.

     Cell Pre-fetching

     UICollectionView가 기본적으로 셀을 미리 가져오도록 개선했습니다.

     pre-fetching API

2. Self-Sizing Cells

   iOS 10이전에는 UICollectionViewFlowLayout에 아이템들의 사이즈를 제공하기위해 estimatedItemSize이 존재했습니다.

   하지만 아이템들의 사이즈를 예측하기가 어렵기 때문에 UICollectionViewFlowLayoutAutomaticSize을 제공합니다. 아이템의 사이즈를 과거의 값을 활용하여 자동으로 사이즈를 예측합니다.

3. Interactive Reordering

   페이징으로 재정렬하는 기능이 추가되었습니다.

    collectionView.isPagingEnabled = true

UIRefreshControl

테이블뷰나 컬렉션뷰 상단으로 드래그할 때 indicator생기면 refresh되는 기능

참고링크

• [번역] UICollectionView Tutorial: Prefetching APIs
• UICollectionView prefetch
• What's New in UICollectionView in iOS 10 해외정리

CollectionView - H.I.G 설명

컬렉션은 사진과 같은 컨텐츠의 집합을 관리하고 레이아웃을 통해 표현합니다. 또한 직선형식뿐만 아니라 다양한 사이즈로 아이템들을 보여줄 수 있습니다. 일반적으로 컬렉션은 이미지기반컨텐츠들을 보여줄 때 가장 적합합니다.

컬렉션은 상호작용(interactivity)과 애니메이션(animation)을 모두 지원합니다.

(예시: tap to select, touch and hold to edit, and swipe to scroll, 아이템 추가, 삭제, 정렬할 때 발생하는 animation, custom animation 등등)

1. row형식이나 gridLayout으로 충분하다면 과하게 새로운디자인을 만드는 것은 피하는 것을 권장합니다.
   • 컨텐츠를 쉽게 선택할 수 있도록 하는 것이 중요합니다.
   • 관심의 중심이 되는 것이 아닌 사용자경험(UX)를 향상시키기 위한 것입니다.
2. 컨텐츠들이 텍스트기반이라면 컬렉션 대신에 테이블을 사용하는 것을 고려해봅니다.
3. 동적으로(급격하게) 레이아웃을 변경하는 경우 경고를 사용합니다.
   • 레이아웃을 동적으로 변경하는 경우 변경사항이 의미가 있고 추적하기 쉬운지 확입합니다.
   • 즉, 사용자 입장에서 예측 가능하도록 설계합니다.

Xcode에서 프로젝트를 새로 생성한 후 DeploymentTarget을 iOS13이하로 설정한다면 iOS12까지는 대부분 하나의 앱에 하나의 window였지만 iOS 13부터는 window의 개념이 scene으로 대체되면서 scene을 사용하기 때문에 따로 설정을 해줘야합니다. 이러한 설정을 어떻게 해야 하는지에 대해서 알아보겠습니다.

iOS Deployment Target이란?

지원하는 최소 OS지원 버전이라고 생각할 수 있습니다. DepolymentTarget은 PROJECT와 TARGETS 각각 설정이 가능합니다. TARGETS가 PROJECT를 OVERRIDE를 하고 두 버전이 다르다면 TARGETS를 기준으로 최소버전이 설정됩니다.

첫번째 방법 : Scene관련부분들을 모두 삭제하는 방법

1. SceneDelegate.swift 파일을 삭제합니다.
2. AppDelegate의 UISceneSession Lifecycle관련 함수를 삭제합니다.
3. AppDelegate의 아래 코드를 추가합니다.

   var window: UIWindow?

4. info.plist의 ApplicationSceneManifest항목을 삭제합니다.

두번째 방법 : iOS13미만과 이상인 경우 분기처리하는 방법

@available

프로젝트 첫 생성시 Xcode는 앱의 최소 버전을 13버전 이상으로 셋팅합니다.

최소 버전을 12 이하로 설정하려면 몇가지를 수정해줘야 합니다.

1. SceneDelegate.swift SceneDelegate는 iOS 13 이후 버전에 서 필요하므로 availability attributes인 @available을 SceneDelegate 클래스에 추가해줍니다.

       @available(iOS 13.0, *)
       class SceneDelegate: UIResponder, UIWindowSceneDelegate {
         ...
       }

2. AppDelegate.swift AppDelegate에 선언되어 있는 메서드 중 두개의 메서든 SceneSession을 관리하는 메서드이므로 마찬가지로 각각 @available 를 추가해줍니다.

       // MARK: UISceneSession Lifecycle
       @available(iOS 13.0, *)
       func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
         ...
       }
   
       @available(iOS 13.0, *)
       func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set<UISceneSession>) {
         ...
       }

3. UIWindow 마지막으로 SceneDelegate에서 Scene을 관리하기 위하여 선언해주었던 UIWindow 변수를 Window 관리를 위하여 AppDelegate에 선언해줍니다.

       class AppDelegate: UIResponder, UIApplicationDelegate {
           var window: UIWindow?
       }

참고링크

• https://github.com/PayPong/iOS-Public-Documents-Usage-App/issues/1
• https://appleceo.github.io/2019/10/25/xcode11BuildLesstheniOS13/
• https://hoonstyle.tistory.com/36
• https://adervise1.tistory.com/104
• https://velog.io/@dev-lena/iOS-AppDelegate%EC%99%80-SceneDelegate

gitignore 키워드

• https://www.toptal.com/developers/gitignore

  • 위의 사이트 접속하여 swift, xcode, cocoapods, macos 키워드 입력후 파일 생성 (코코아팟을 사용할 계획이 없다면 cocoapods제외)
  • .gitignore 파일명 입력후 내용 저장

• 참고사이트

  • https://silver-g-0114.tistory.com/32
  • https://mseagle.tistory.com/m/61?category=509474 - 이미 올린 파일 원격에서 삭제하기

• text alignment
• layout margins
• UIFont

1. Setting up

• 프로젝트 개요
  • 스토리보드를 사용하지 않고 코드로 UI 작성
  • 버튼으로 된 단어들을 선택하여 합쳐서 의미있는 단어를 만들기 게임
  • iPad에서만 작동
  • SpriteKit 프레임워크

2. Building a UIKit user interface programmatically

• clues: 힌트가 들어가 레이블
• answers: 정답인 단어의 철자 수
• Score: 점수표시 레이블
• Tap letters to guess : 텍스트필드 사용자의 현재 답변
• submit: 제출버튼
• clear: 초기화버튼
• WWW: 여러 단어가 들어갈 버튼

코드로 UI작성 (스토리보드 제거는 하지않습니다.)

//ViewController.swift

var cluesLabel: UILabel!

override func loadView() {
    view = UIView()
    view.backgroundColor = .white
}

1. 뷰가 로드되기 전 뷰컨트롤러의 view속성에 할당합니다. (UIView의 새 인스턴스를 만들고 흰색 배경색을 지정합니다.)

2. 레이블의 속성을 설정합니다.

    scoreLabel = UILabel()
    scoreLabel.translatesAutoresizingMaskIntoConstraints = false
    scoreLabel.textAlignment = .right
    scoreLabel.text = "Score: 0"
    scoreLabel.font = UIFont.systemFont(ofSize: 24)
    scoreLabel.numberOfLines = 0
    view.addSubview(scoreLabel)

   • 레이블 인스턴스를 생성한 후 오토레이아웃 설정을 할 수 있도록 translatesAutoresizingMaskIntoConstraints 를 false로 지정합니다.
   • textAlignment 텍스트정렬의 위치를 지정합니다.
   • addSubview() : 메서드를 호출하여 뷰에 추가합니다.
   • numberOfLines : 텍스트가 줄바꿈할 수 있는 줄 수 (0이라면 필요한 만큼 줄바꿈)
   • font : 시스템폰트는 현재 iOS 사용중인 글꼴을 사용합니다.

3. 제약조건 설정하기

   매번 제약조건에 isActive = true 를 여러번 사용해야 하는 경우 NSLayoutConstraint.activate() 제약 조건을 배열안에 삽입하면 편리하게 설정할 수 있습니다.

   UIKit은 여러가이드를 제공합니다.

   🌟 safeAreaLayoutGuide : 둥근 모서리나 노치를 뺀 사용가능한 공간

   layoutMarginsGuide : 뷰가 화면의 왼쪽 및 오른쪽 가장자리로 실행되지 않도록 여분의 여백(margin)을 추가합니다.

    NSLayoutConstraint.activate([
        scoreLabel.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor),
        scoreLabel.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor)
    ])

텍스트필드 속성

placeholder : 사용자의 입력을 대기하는 동안 보이는 텍스트

isUserInteractionEnabled : 사용자와 상호작용의 활성여부 ( false라면 탭해서 텍스트입력이 불가능합니다.)

UIButton 속성

let submit = UIButton(type: .system)
submit.translatesAutoresizingMaskIntoConstraints = false
submit.setTitle("SUBMIT", for: .normal)
view.addSubview(submit)

• 버튼에는 다양한 스타일이 내장되어있습니다. (일반적으로 .custom, .system을 자주 사용합니다.)
• setTitle() : 버튼의 제목을 작성합니다.

intrinsic content size

각각의 뷰가 content를 얼마나 크게 보여줘야하는지 크기

• Content hugging priority : 뷰가 intrinsic content size보다 크게 될 가능성을 결정합니다. 우선순위가 높으면 오토레이아웃을 늘리지 않는 것을 선호한다는 의미입니다.
• Content compression resistance priority : 뷰가 intrinsic content size보다 작게만들어지는 것이 좋을 지를 결정합니다.

예시)

cluesLabel.setContentHuggingPriority(UILayoutPriority(1), for: .vertical)

뷰안에 4행 5열로 이루어진 버튼을 삽입하기

let width = 150
let height = 80

for row in 0..<4 {
    for column in 0..<5 {
        let letterButton = UIButton(type: .system)
        letterButton.titleLabel?.font = UIFont.systemFont(ofSize: 36)
        letterButton.setTitle("WWW", for: .normal)

        let frame = CGRect(x: column * width, y: row * height, width: width, height: height)
        letterButton.frame = frame

        buttonsView.addSubview(letterButton)
        letterButtons.append(letterButton)
    }
}

X및 Y좌표에 너비와 높이를 더한 직사각형 프레임을 만든 다음 이를 frame속성에 할당합니다

이러한 직사각형은 CGRect타입을 갖습니다.(Core Graphics에서 제공)

링크

100 Days of Swift - Day 36 - Hacking with Swift

• review(복습)

1. Wrap up

도전과제

1. UIBarButtonItem을 사용하여 Credit버튼 추가하기 (API에서 가져온 데이터를 사용자에게 알리는 경고창을 표시합니다.)

2. 테이블뷰에 데이터를 필터기능을 추가합니다. 검색했을 때 입력한 문자열과 일치하는 제목만 표시되는 기능

   contains() 메서드를 활용하여 문자열내부에 문자열이 포함되어 있는지의 여부를 확인할 수 있습니다.

3. HTML을 조금 더 다양하게 사용해봅니다.

2. Review for Project 7: Whitehouse Petitions

• 탭바컨트롤러 내부에 네비게이션컨트롤러가 위치합니다.

• UIStoryboard can load storyboards from our bundle and create view controllers from there.

  → Just provide it the storyboard name as its first parameter and it will do the rest.

• AppDelegate는 시스템 알림에 응답 및 처리할 수 있습니다.

• Apple은 UITabBarItem일반적인 용도로 몇 가지 기본유형을 제공합니다. → 기본유형을 사용하는 경우 아이콘과 텍스트를 모두 제공하는 것을 사용해야 합니다. 사용자가 텍스트를 정의할 수 없습니다.

• 스위프트의 Data타입은 모든 종류의 바이너리 데이터를 보유할 수 있습니다. → 이미지, zip 파일, 문자열 또는 원하는 것을 저장하는 데 사용할 수 있습니다.

• JSON

  • JSON은 데이터를 저장하고 보내는 간단한 방법입니다.JSON(JavaScript Object Notation)은 이러한 목적을 위해 여러 언어에서 일반적으로 사용됩니다.
  • JSON 속성과 Codable객체의 속성 모두 이름이 같아야 합니다.
  • JSON은 인터넷 사용 여부에 관계없이 모든 종류의 애플리케이션에서 사용할 수 있습니다.

링크

100 Days of Swift - Day 35 - Hacking with Swift

• injecting HTML into a web view
• UIStoryboard
• adding tabs to a tab bar controller in code

1. Rendering a petition: loadHTMLString

스위프트에서 HTML을 사용하여 WKWebView에 삽입할 수 있습니다.

guard let detailItem = detailItem else { return }

let html = """
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> body { font-size: 150%; } </style>
</head>
<body>
\(detailItem.body)
</body>
</html>
"""

webView.loadHTMLString(html, baseURL: nil)

• HTML은 모바일장치 사이즈로 설정합니다.
• 글꼴크기는 표준 크기의 150%로 설정합니다.
• 태그에 본문의 내용을 작성합니다.
• func loadHTMLString(_ string: String, baseURL: URL?) -> WKNavigation? : 지정된 HTML 문자열의 내용을 로드하고 탐색합니다
• loadHTMLString(_:baseURL:) 공식문서

2. Finishing touches: didFinishLaunchingWithOptions

탭바컨트롤러에 탭 추가

두번 째 탭을 스토리보드에 삽입할 수 있지만 유지관리를 하는데 좋지 않습니다. 왜냐하면 그렇게 하려면 스토리보드에서 뷰컨트롤러를 복제해야 하기 때문입니다.

AppDelegate의 didFinishLaunchingWithOptions 의 메서드는 앱이 로드를 완료하고 사용할 준비가 되었을 때 iOS에 의해 호출됩니다.

var window: UIWindow?

if let tabBarController = window?.rootViewController as? UITabBarController {
    let storyboard = UIStoryboard(name: "Main", bundle: nil)
    let vc = storyboard.instantiateViewController(withIdentifier: "NavController")
    vc.tabBarItem = UITabBarItem(tabBarSystemItem: .topRated, tag: 1)
    tabBarController.viewControllers?.append(vc)
}

• window는 초기에 보여줄 루트뷰컨트롤러를 설정해야 합니다.
• UIStoryboard 클래스를 사용하여 Main.storyboard파일을 참조합니다. 번들이 nil 이라는 의미는 현재 앱번들을 사용한다는 의미입니다.
• 참조하여 새로운 뷰컨트롤러를 만든후 탭바항목을 추가합니다.
• tag 를 사용하여 탭바를 구분할 수 있습니다.
• 탭바컨트롤러의 viewControllers 배열에 새로운 뷰컨트롤러를 추가하면 탭표시줄에 표시됩니다.

iOS Depolyment Target을 13이하로 개발하는 경우

야곰닷넷 참고링크

• SceneDelegate 제거하는 방법
  1. SceneDelegate.swift 파일제거
  2. AppDelegate에서 Scene과 관련된 메서드 제거
  3. AppDelegate에 window 추가
  4. info.plist에서 Scene Manifest제거

• @available을 사용하여 타겟 버전 낮추는 방법

  • xcode11 에서 iOS13 미만의 타겟을 빌드하는 방법

    // SceneDelegate.swift
    @available(iOS 13.0, *)
    class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    ...
    }
    
    // AppDelegate.swift
    var window: UIWindow?
    
    @available(iOS 13.0, *)
    func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
    ...
    }
    
    @available(iOS 13.0, *)
    func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set<UISceneSession>) {
    ...
    }

Using the viewport meta tag to control layout on mobile browsers - 웹 페이지를 작은 화면에 맞추기 위한 방법

링크

100 Days of Swift - Day 34 - Hacking with Swift

• UITabBarController
• Data
• Codable

1. Setting up

• 프로젝트 개요
  • 인터넷에서 데이터를 가져와 사용자에게 표시하는 프로젝트
  • UITabBarController 를 사용하여 옵션을 선택합니다.

2. Creating the basic UI: UITabBarController

tab bar 를 사용하면 사용자가 관심있는 항목을 탭하여 보고 싶은 화면을 제어할 수 있습니다.

• Editor > Embed In > Tab Bar Controller - 탭바컨트롤러 래핑
• Editor > Embed In > Navigation Controller - 네비게이션컨트롤러 래핑

UITabBarItem

• 시스템 항목 설정할 때 SystemItem을 커스텀속성 및 여러가지 속성을 제공합니다.
• 텍스트를 직접 설정하는 경우 아이콘이 제거되고 직접 제공해야 합니다.

Cell스타일이 Subtitle 인경우 textLabel.text 와 detailTextLabel.text 로 텍스트를 설정할 수 있습니다.

3. Parsing JSON using the Codable protocol

Codable 프로토콜을 채택하면 문자열, 딕셔너리 또는 구조체와 같은 스위프트 데이터를 인터넷을 통해 전송할 수 있는 데이터로 변환할 수 있습니다.

데이터가 Codable 을 준수한다고 하면 해당 데이터와 JSON간에 자유롭게 변환할 수 있습니다,

JSON (JavaScript Object Notation) 데이터를 설명하는 방법입니다. 컴퓨터용으로 분석하기 쉽기 때문에 대역폭이 중요한 온라인에서 자주 사용됩니다.

JSON 모델 작성

{
    "metadata":{
        "responseInfo":{
            "status":200,
            "developerMessage":"OK",
        }
    },
    "results":[
        {
            "title":"Legal immigrants should get freedom before undocumented immigrants – moral, just and fair",
            "body":"I am petitioning President Trump's Administration to take a humane view of the plight of legal immigrants. Specifically, legal immigrants in Employment Based (EB) category. I believe, such immigrants were short changed in the recently announced reforms via Executive Action (EA), which was otherwise long due and a welcome announcement.",
            "issues":[
                {
                    "id":"28",
                    "name":"Human Rights"
                },
                {
                    "id":"29",
                    "name":"Immigration"
                }
            ],
            "signatureThreshold":100000,
            "signatureCount":267,
            "signaturesNeeded":99733,
        },
        {
            "title":"National database for police shootings.",
            "body":"There is no reliable national data on how many people are shot by police officers each year. In signing this petition, I am urging the President to bring an end to this absence of visibility by creating a federally controlled, publicly accessible database of officer-involved shootings.",
            "issues":[
                {
                    "id":"28",
                    "name":"Human Rights"
                }
            ],
            "signatureThreshold":100000,
            "signatureCount":17453,
            "signaturesNeeded":82547,
        }
    ]
}

1. 메타데이터 값이 있으며 responseInfo 에는 상태값이 포함됩니다. 200상태코드는 정상적인 상태를 의미합니다.
2. results 배열안에 각각의 항목의 값들이 있습니다.
3. 각 항목에는 제목, 본문, 관련된 문제 및 서명 정보가 포함되어 있습니다.
4. JSON 에서는 정수는 따옴표를 감싸지 않습니다.

💡 JSON모델을 구조체로 작성하면 memberwise initializer를 제공하기 때문에 편리합니다.

데이터 다운로드

override func viewDidLoad() {
    super.viewDidLoad()

    // let urlString = "https://api.whitehouse.gov/v1/petitions.json?limit=100"
    let urlString = "https://www.hackingwithswift.com/samples/petitions-1.json"

    if let url = URL(string: urlString) {
        if let data = try? Data(contentsOf: url) {
            // we're OK to parse!
        }
    }
}

• urlString → 서버 또는 데이터를 가지고 있는 주소에 접근합니다.
• url이 유효한 경우 Data객체를 생성합니다.
• 이 코드는 인터넷에서 데이터를 다운로드하는 동안 메인스레드에서 작동하기 때문에 모든 데이터가 전송될 때까지 다른 작업을 할 수 없습니다.

JSON 파싱

func parse(json: Data) {
    let decoder = JSONDecoder()

    if let jsonPetitions = try? decoder.decode(Petitions.self, from: json) {
        petitions = jsonPetitions.results
        tableView.reloadData()
    }
}

• JSONDecoder : JSON과 Codable객체간의 변환부분을 맡습니다.
• decode() 메서드를 사용하여 변환하도록 요청합니다.

링크

100 Days of Swift - Day 33 - Hacking with Swift

• review(복습)
• Project 4 ~ 6

1. What you learned

• WebKit의 이벤트가 발생했을 때 Delegation을 사용하여 ViewController에 전송하여 이에 대해 조치를 취할 수 있었습니다.
• UIAlertController에 ActionSheet스타일로 지정하는 방법도 알아보았습니다.
• toolbarItems안에 UIBarButtonItems를 배치하여 표시한 후 .flexibleSpace를 사용하여 레이아웃을 보기좋게 설정했습니다.
• Key-Value-Observing 을 사용하여 웹브라우저에 로딩상황을 표시할 수 있었습니다.
• contentsOf 를 사용하여 디스크에서 텍스트파일을 로드하는 방법을 알아보았습니다.
• UIAlertController 에 텍스트필드를 추가하여 읽고 사용할 수 있습니다.
• 문자열 및 배열조작을 위한 contains(), remove(at:), firstIndex(of:)
• AutoLayout , Visual Format Language

2. Key points

웹뷰 설정

class ViewController: UIViewController, WKNavigationDelegate {
    var webView: WKWebView!

    override func loadView() {
        webView = WKWebView()
        webView.navigationDelegate = self
        view = webView
    }
}

• 메인 뷰 자체를 웹뷰로 사용하기 위한 경우 viewDidLoad() 가 아닌 loadView() 뷰가 로드가 완료되기전에 정의합니다.
• view 가 WKWebView 이기 때문 view.reload() 는 사용할 수 없습니다. 왜냐하면 UIView 가 아니기 때문입니다.

if let과 try?

var allWords = [String]()

if let startWordsURL = Bundle.main.url(forResource: "start", withExtension: "txt") {
    if let startWords = try? String(contentsOf: startWordsURL) {
        allWords = startWords.components(separatedBy: "\n")
    }
}

contentsOf 로 디스크에서 텍스트를 로드할 수 있습니다. 위 코드에서 텍스트를 얻을 수 있지만 실패한 경우 throw 로 예외처리를 해야합니다.

try? 는 예외처리를 nil반환을 합니다.

VFL

view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat:"V:|[label1(labelHeight)]-[label2(labelHeight)]-[label3(labelHeight)]-[label4(labelHeight)]-[label5(labelHeight)]->=10-|", options: [], metrics: metrics, views: viewsDictionary))

• 단 한줄의코드로 제약조건을 설정할 수 있는 장점이 있습니다.
• 동일한 높이의 5개의 레이블이 있고 각 사이에 공간이 있고 마지막레이블은 부모뷰의 가장자리와 10이상포인트 공간을 가집니다.

3. Challenge

도전과제

테이블뷰로 쇼핑목록을 만들 수 있도록 하는 앱

쇼핑목록을 지울 수 있는 왼쪽 UIBarButtonItem 추가 → 테이블뷰 셀단위로 다시 로드

joined(separator:_) : 배열에서 각 부분들을 결합하여 하나의 문자열을 생성할 수 있습니다.

링크

100 Days of Swift - Day 32 - Hacking with Swift