[Mission/#4-Tina] 3일차 미션

[gorgeouseowoo]

구현 TO DO

• [X] 지출 금액 입력 UI

오토레이아웃 설정

지출버튼에 오토레이아웃 설정에 시간이 걸렸어요. 결국 몽셸의 PR을 보고 multiplier를 제약 조건으로 설정해 성공했답니다! (thanks to 몽셸)

1차 시도: 지출버튼 width 52로 고정 >>> 아이패드에서 지출버튼이 너무 작게 나타남 2차 시도: 지출버튼 leadingAncor 128로 설정 >>> 아이패드에서 지출버튼의 너비가 길어짐 3차 시도: 지출버튼 multiplier 0.15 설정 >>> spendTextFieldView 대비 0.15배로 설정하니 딱 맞음

아이폰 화면

아이패드 화면

학습 키워드

퀴즈

CodeBase로 바꾸어 변경된 지점에는 무엇이 있을까요? 나열 
 [ex]
@IBAction => ? 
@IBOutlet => ?

[gorgeouseowoo]

코드로 UI짜기 (앨런 앱20강 정리)

코드로 UI를 만들기 위해 3가지 작업이 필요하다.

1. 메모리에 올리기 → ViewController 내 view 생성

 let emailTextFieldview = UIView()

2. 뷰에 올리기 → Memory에 올린 것을 View로 올리는 작업 필요

view.addSubview(emailTextFieldview)

3. AutoLayout 잡기

emailTextFieldview.translatesAutoresizingMaskIntoConstraints = false // ⭐️반드시 설정⭐️
emailTextFieldview.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30).isActive = true
emailTextFieldview.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 30).isActive = true
emailTextFieldview.topAnchor.constraint(equalTo: view.topAnchor, constant: 200).isActive = true
emailTextFieldview.heightAnchor.constraint(equalToConstant: 40).isActive = true

UIKit은 Model-View-Controller로 구성되는 MVC 패턴을 가지기 때문에 메모리에 뷰의 요소를 생성하고, 뷰에 추가하는 작업이 필요한 것 같다. 추가로 뷰에 대한 레이아웃을 잡는 과정이 필요한거고!

클로저로 UI 요소 설정하기

개인의 선호에 따라 클로저로 UI 요소의 기본 설정을 잡아줄 수 있어요. 객체 생성과 속성 설정을 한 번에 처리할 수 있어 코드가 간결해지고, 유지보수가 쉬워진다고 합니다.

클로저 개념 공부하기 !!!!!!!!!!!!!!!!!!

이오, 보노, 몽셸의 취향은?

// 클로저 실행 타입
let emailTextFieldview: UIView = {
        let view = UIView()
        view.backgroundColor = UIColor.darkGray
        view.layer.cornerRadius = 5
        view.layer.masksToBounds = true

        return view

    }()

// 함수 방식
func makeUI() {
        // 배경 색상
        emailTextFieldview.backgroundColor = UIColor.darkGray

         emailTextFieldview.backgroundColor = UIColor.darkGray
         emailTextFieldview.layer.cornerRadius = 5
         emailTextFieldview.layer.masksToBounds = true

         (...)
    }

}

[Rochelle0922]

오 저의 PR을 적고 티나의 PR을 보러 왔는데 딱 클로저가 있네요!! 저는 클로저를 사용하지 않았습니다!! 이유는 클로저로 설정하니 너무 간결해져서 저조차도 잘 못 알아보겠더라구요!!! 조금 더 코드공부를 하고나면 클로저를 사용하게 되지 않을까,,, 행복회로를 돌리며 테이블뷰 하러 가보겠습니다.

티나 화이팅🔥

[shippingpark]

크 저는 클로저 방식을 선호한답니다!!

메서드 형태로 작성하면 대개 viewDidLoad() 하위에 메서드(티나 코드 상 makeUI)를 작성할 텐데,
makeUI 메서드 위치와 뷰 변수의 물리적 위치 (코드 줄 차이)가 멀어져서 가깝게 붙이는 게 보기 편하다 느낀 것 같아요 ㅎㅎ

[anjiniii]

아이패드 화면까지 고려한 점이 엄청 눈에 띄는 것 같아요!! 예전에 UIKit으로 요소들의 레이아웃을 잡을 때 가장 많이 고민했던 부분이 기억나써요..

SwiftUI에서는 padding, geometry 등으로 좀 더 각각의 View 입장에서의 크기와 여백을 고려하지만 UIKit에서는 서로의 관계를 맺어주는 느낌이라고 생각하는데, 양쪽 여백을 고정된 값(20, 25 등등)으로 고려하는게 맞을지, 더 작거나 큰 화면을 고려해 화면 대비 비율로 고려해야할지 논의한 적이 있어요. 당시에는 아이패드 사용을 고려하지 말고 고정된 값을 쓰자는 결정을 했는데, 티나는 모든 화면을 고려하고 비율로 레이아웃을 설정했군용!!

이 부분은 디자이너, 개발자 모두 함께 고민하고 고려해야 할 것 같다는 생각이 듭니당 ㅎㅎ,,

[anjiniii]

저는 클로저 방식을 선호합니다!! 함수 방식으로 진행하면, 각각의 설정들이 의미와 맥락을 공유하는데도 너무 멀리 떨어져 있어서 수정을 하려고 할 때(단순히 오류만이 아니라 개발할 때도 자주 찾게 되는데) 바로 찾아가기 어렵다는 생각을 했어요.

여기부터는 안봐도 이해못해도 괜츈

// 클로저 실행 타입
let emailTextFieldview: UIView = {
    let view = UIView() // 선언
    view.backgroundColor = UIColor.darkGray
    view.layer.cornerRadius = 5
    view.layer.masksToBounds = true
    return view // 반환
}()

다만 이렇게 사용했을 때, 선언하는 부분과 반환하는 부분이 불필요하게 늘어진다는 생각을 해서 아래와 같이 간단하게 사용하려고 해요! (그래서 그 역할을 해 준 Then 이라는 라이브러리를 사용한 것입니당)

// 클로저 실행 타입
let emailTextFieldview = UIView().바꿔줘 { // 여기서 만들고 아래서는 설정만
    $0.backgroundColor = UIColor.darkGray // 위에서 생성한 UIView()가 첫 번째 요소로 들어옴. 즉 여기서 $0 = UIView()
    $0.layer.cornerRadius = 5
    $0.layer.masksToBounds = true // 만들어진 아이를 바꾸는 것이나 반환이 별도로 필요하지 않음
}

[gorgeouseowoo]

너는 사소했지 나는 전부였어 저 드디어 이 말을 이해했어용 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

클로저와 익숙해 지는 연습을 해야되겠군용!