200920 - TIL

주말에 알바를 해서 공부할 시간이 많이 나지 않는다 ㅠㅠ 10월 초까지만 다니고 그만 다니기로 했다.

 

 

 

개인 프로젝트 기획

개인 프로젝트 기획을 시작했다. 아이디어만 있었고 앱을 어떻게 구상할지 생각한 것은 처음이어서 막막하다.... 간단하게 하여도 차근차근 시작해보자

 

 

 

 

iOS

 

 

어제 만들던 회원가입 화면을 이어서 만들었다,

 

 

올바른 값을 입력했을때의 결과

 

 

 

 

UI

Main.storyboard

아직 오토 레이아웃을 잡는데 서툴러서 덕지덕지 발라놓은 느낌이 든다.

어제 해결하지 못한 투명도 문제의 이유는 TextField의 텍스트를 Placeholder에 작성했어야 했는데 Text에 작성을 했다. 처음에 투명도의 문제인 줄 알고 Text에 작성한 후에 alpha를 0.2로 바꿔서 모습은 똑같이 만들었는데 실행시키니 사용자가 쓰여 있는 텍스트를 모두 지워야 하는 문제가 발생했다.

 

 

 

 

Alert

class ViewController: UIViewController {
    
    // Alert을 나타나게 해주는 메서드
    func presentAlert(title: String, message: String) {
        let makeAlert = UIAlertController(title: title, message: message, preferredStyle: .alert)
        let actAlert = UIAlertAction(title: "확인", style: .default)
        makeAlert.addAction(actAlert)
        present(makeAlert, animated: true)
    }

경고창은 코드에 많이 들어가니 메서드로 구현했다.

 

 

 

 

ID

        // 이메일 정규 표현식
        let emailRegEx = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}"
        
        // Id를 한글자라도 입력을 해야하고, 입력한 문자열이 정규식에 포함이 돼야만 바인딩 성공
        guard let id = idField.text,
              let range = id.range(of: emailRegEx, options: [.regularExpression]),
              id.count > 0,
              range.upperBound == id.endIndex && range.lowerBound == id.startIndex else {
            idField.becomeFirstResponder()
            presentAlert(title: "⚠️", message: "이메일 형식의 ID를 입력해 주세요.\n 예) example@gmail.com" )
            return
        }

ID는 이메일 형식을 따르기 위해 정규표현식을 가져와서 사용했다. 아직 정규표현식에 대해서는 모른다. 인터넷에서 복사 붙여 넣기 해서 가져왔다.

ID 입력 칸에 글자를 한글 자라도 입력을 해야 하고 문자열에서 공부한 메서드들을 이용해서 정규 표현식의 범위를 입력한 ID범위와 맞춰 다르다면 다시 입력하도록 구현했다.

 

 

 

Password

        // 6 ~ 20글자 사이의 비밀번호.
        // 구두점과 특수문자를 포함해야한다.
        var myCharSet = CharacterSet(charactersIn: "!@#$%^&*()_+~`=-")
        myCharSet.formUnion(CharacterSet.punctuationCharacters)
        
        guard let password = passwordField.text,
              (6...20).contains(password.count),
              password.rangeOfCharacter(from: myCharSet) != nil else {
            passwordField.becomeFirstResponder()
            presentAlert(title: "⚠️", message: "특수문자를 포함한 6 ~ 20 자리 비밀번호를 입력해 주세요.")
            return
        }

비밀번호는 6 ~ 20 글자를 입력하게 만들었고, 특수문자를 꼭 한 개 이상 포함하게 만들었다. 모든 특수문자를 포함한 characterset을 몰라서 구두점에 키보드 숫자 칸에 있는 특수문자를. formUnion 메서드로 추가시켰다.

 

 

 

 

Confirm Password

   // 생성한 비밀번호와 같은 비밀번호를 입력해야한다.
        guard let confirmPassword = confirmField.text, confirmPassword == password else {
            confirmField.becomeFirstResponder()
            presentAlert(title: "⚠️", message: "비밀번호가 다릅니다.")
            return
        }

비밀번호 확인은 앞에 입력한 비밀번호와 같게 입력하도록 만들었다.

 

 

 

 

Name

        // 이름은 2 ~ 17자 이고 숫자와 특수문자가 있으면 안된다.
        let numberCharSet = CharacterSet(charactersIn: "0123456789")
        myCharSet.formUnion(numberCharSet)
        
        guard let name = nameField.text,
              (2...17).contains(name.count),
              name.rangeOfCharacter(from: myCharSet) == nil else {
            nameField.becomeFirstResponder()
            presentAlert(title: "⚠️", message: "올바른 이름을 입력해 주세요.")
            return
        }

이름은 우리나라에서 가장 이름이 긴 분이 17 자라고 하셔서 2 ~ 17자로 제한했다.

숫자와 특수문자를 포함하면 안 돼서 전에 만든 CharacterSet에 숫자를 추가했다.

 

 

 

age

        // 나이는 숫자만 받는다.
        guard let age = ageField.text,
              let ageNum = Int(age),
              (0...150).contains(ageNum),
              age.rangeOfCharacter(from: numberCharSet) != nil else {
            ageField.becomeFirstResponder()
            presentAlert(title: "⚠️", message: "")
            return
        }

 

나이는 숫자만 받고 나타나는 키보드도 숫자 키보드를 나오게 했다. 0 ~ 150의 숫자만 입력하도록 했다.

 

 

 

 

Gender

// 가입 성공시 나올 문구
        let msg = """
        ID : \(id)
        name: \(name)
        age: \(age)
        """
        
        // 남자를 선택하거나 여자를 선택 선택을 안하면 성별을 선택해주세요라는 문구 출력
        
        switch genderSelector.selectedSegmentIndex {
        case 0:
            presentAlert(title: "가입 완료", message: msg + "\ngender: Male")
        case 1:
            presentAlert(title: "가입 완료", message: msg + "\ngender: Female")
        default:
            presentAlert(title: "⚠️", message: "성별을 선택해주세요.")
            return
        }

가입 시에는 입력한 아이디, 이름, 나이, 성별이 출력되도록 했다.

Segment가 꺼져있으면 index:  -1을 리턴하는 경우가 있는데 이 경우 선택이 안 된 것으로 보고 성별을 선택해달라는 메시지를 출력하게 했다.

 

 

 

아래엔 전체 코드이다.

import UIKit

class ViewController: UIViewController {
    
    func presentAlert(title: String, message: String) {
        let makeAlert = UIAlertController(title: title, message: message, preferredStyle: .alert)
        let actAlert = UIAlertAction(title: "확인", style: .default)
        makeAlert.addAction(actAlert)
        present(makeAlert, animated: true)
    }
    
    @IBOutlet weak var idField: UITextField!
    @IBOutlet weak var passwordField: UITextField!
    @IBOutlet weak var confirmField: UITextField!
    @IBOutlet weak var nameField: UITextField!
    @IBOutlet weak var ageField: UITextField!
    @IBOutlet weak var genderSelector: UISegmentedControl!
    
    
    @IBAction func joinUs(_ sender: Any) {
        
        // 이메일 정규 표현식
        let emailRegEx = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}"
        
        // Id를 한글자라도 입력을 해야하고, 입력한 문자열이 정규식에 포함이 돼야만 바인딩 성공
        guard let id = idField.text,
              let range = id.range(of: emailRegEx, options: [.regularExpression]),
              id.count > 0,
              range.upperBound == id.endIndex && range.lowerBound == id.startIndex else {
            idField.becomeFirstResponder()
            presentAlert(title: "⚠️", message: "이메일 형식의 ID를 입력해 주세요.\n 예) example@gmail.com" )
            return
        }
        
        // 6 ~ 20글자 사이의 비밀번호.
        // 구두점과 특수문자를 포함해야한다.
        var myCharSet = CharacterSet(charactersIn: "!@#$%^&*()_+~`=-")
        myCharSet.formUnion(CharacterSet.punctuationCharacters)
        
        guard let password = passwordField.text,
              (6...20).contains(password.count),
              password.rangeOfCharacter(from: myCharSet) != nil else {
            passwordField.becomeFirstResponder()
            presentAlert(title: "⚠️", message: "특수문자를 포함한 6 ~ 20 자리 비밀번호를 입력해 주세요.")
            return
        }
        
        // 생성한 비밀번호와 같은 비밀번호를 입력해야한다.
        guard let confirmPassword = confirmField.text, confirmPassword == password else {
            confirmField.becomeFirstResponder()
            presentAlert(title: "⚠️", message: "비밀번호가 다릅니다.")
            return
        }
        
        // 이름은 2 ~ 17자 이고 숫자와 특수문자가 있으면 안된다.
        let numberCharSet = CharacterSet(charactersIn: "0123456789")
        myCharSet.formUnion(numberCharSet)
        
        guard let name = nameField.text,
              (2...17).contains(name.count),
              name.rangeOfCharacter(from: myCharSet) == nil else {
            nameField.becomeFirstResponder()
            presentAlert(title: "⚠️", message: "올바른 이름을 입력해 주세요.")
            return
        }
        
        // 나이는 숫자만 받는다.
        guard let age = ageField.text,
              let ageNum = Int(age),
              (0...150).contains(ageNum),
              age.rangeOfCharacter(from: numberCharSet) != nil else {
            ageField.becomeFirstResponder()
            presentAlert(title: "⚠️", message: "")
            return
        }
        
        // 가입 성공시 나올 문구
        let msg = """
        ID : \(id)
        name: \(name)
        age: \(age)
        """
        
        // 남자를 선택하거나 여자를 선택 선택을 안하면 성별을 선택해주세요라는 문구 출력
        
        switch genderSelector.selectedSegmentIndex {
        case 0:
            presentAlert(title: "가입 완료", message: msg + "\ngender: Male")
        case 1:
            presentAlert(title: "가입 완료", message: msg + "\ngender: Female")
        default:
            presentAlert(title: "⚠️", message: "성별을 선택해주세요.")
            return
        }
        
        
    }
    
    

    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    
    
}