Adding the sign-in button

어디에 버튼을 추가할까?

버튼을 현재 우리가 작업 중인 LoginView 에 추가할 수도 있지만 여기서는 ViewController 에 직접 추가할 것이다.

→ sign in 버튼을 클릭하면 필요한 정보들을 뷰 컨트롤러로 전달하도록 해야 하는데, 뷰 컨트롤러가 이벤트가 발생에 따라 동작하는 기능을 갖는 곳이다. 우리는 뷰 컨트롤러에서 sign in과 관련된 핸들링을 하고 싶기 때문에 뷰 컨트롤러에서 직접 구현하는 것이 좋다.

버튼 스타일링

LoginViewController의 style()에 다음과 같이 코드를 작성한다.

signInButton.translatesAutoresizingMaskIntoConstraints = false
signInButton.configuration = .filled()
signInButton.configuration?.imagePadding = 8 // for indicator spacing
signInButton.setTitle("Sign In", for: [])
signInButton.addTarget(self, action: #selector(signInTapped), for: .primaryActionTriggered)

버튼에 오토레이아웃 적용하기

// Button
NSLayoutConstraint.activate([
   signInButton.topAnchor.constraint(equalToSystemSpacingBelow: loginView.bottomAnchor, multiplier: 2),
   signInButton.leadingAnchor.constraint(equalTo: loginView.leadingAnchor),
  signInButton.trailingAnchor.constraint(equalTo: loginView.trailingAnchor)
])

각 컴포넌트마다 분리해서 NSLayoutConstraint.activate([]) 메소드를 호출한다.

Adding the error message label

에러 메시지 label 역시 LoginViewController에서 생성해준다.

label 스타일링

버튼과 마찬가지로 style() 안에 코드를 작성한다.

				errorMessageLabel.translatesAutoresizingMaskIntoConstraints = false
        errorMessageLabel.textAlignment = .center
        errorMessageLabel.textColor = .systemRed
        errorMessageLabel.numberOfLines = 0
        errorMessageLabel.isHidden = true

• numberOfLines : 0으로 설정하면 여러 줄을 표시할 수 있다.

Unable to activate constraint with anchors 에러

주로 subview를 추가하지 않았을 때 발생하는 에러이다. 위와 같은 에러가 발생하면 addSubview를 하지 않았는지 확인하자.

• command + shift + y : 하단 디버깅 창 숨기거나 표시하는 단축키

Handling Login

뷰 컨트롤러에서 textfield 내용 가져오기

LoginViewController에 username , password 라는 연산 프로퍼티를 선언한다.

var username: String? {
    return loginView.usernameTextField.text
}
var password: String? {
    return loginView.passwordTextField.text
}

• control + i : 코드 자동 정렬하는 단축키

assertionFailure()

guard let username = username, let password = password else {
    assertionFailure("Username / password shoule never be nil")
    return
}

디버깅 모드에서만 동작되고 배포할 때는 제외된다. 텍스트필드는 유저가 값을 입력하지 않아도 nil이 반환되지 않기 때문에 assertionFailure가 발생하는 것은 프로그래머가 만든 에러일 것이다. 절대 발생할 일이 없지만 조건을 확인하기 위해 assertionFailure를 추가하기도 한다.

definition 확인하기

• control + command + click : definition이 있는 코드로 바로 이동시켜준다.
• control + command + (left or right) arrow : 이전에 보고 있던 코드로 바로 이동시켜준다.

sign in 버튼에 indicator 추가하기

유저가 올바른 아이디와 패스워드를 입력하면 indicator가 표시되게 한다.

signInButton.configuration?.showsActivityIndicator = true

위 코드를 작성해서 indicator를 표시할 수 있다.

signInButton.configuration?.imagePadding = 8

버튼 스타일링을 할 때 위 코드를 작성했었는데, 이는 indicator와 “sign in”이라는 텍스트 사이의 간격을 띄우기 위해 추가한 코드이다.