[코드베이스UI] iOS 입문 개인과제_간단한 계산기 앱 만들기 4 ~ 6단계

Lev.4 숫자버튼과 연산 버튼의 색상 구분하기

 

 

 

발생한 오류

 

오류 설명

Thread 1: Fatal error: Can't form a Character from a String containing more than one extended grapheme cluster

 

이 오류는 주어진 문자열이 하나의 Character로 표현될 수 없을 때 발생한다.

Swift에서 Character는 하나의 확장된 자모 클러스터(Extended Grapheme Cluster)로 정의된다.

확장된 자모 클러스터는 하나의 문자로 인식되는 단일 유니코드 시퀀스를 의미한다.

 

즉, “AC”가 하나의 문자가 아니라 발생한 오류였다. 

 

 

 

해결 방법

buttonNums 문자열 배열에 있는 요소들을 반복문을 통해

정수로 변환이 되면 색상을 바꿔주고, 정수로 변환이 되지 않는다면(nil)

색상을 변경해주는 조건문 작성.

 

 

 

 

제출 코드

import UIKit
import SnapKit

class ViewController: UIViewController {
    
    var viewNum = 0
    
    var numLabel = UILabel()
    let buttonNums = ["7", "8", "9", "+",
                      "4", "5", "6", "-",
                      "1", "2", "3", "×",
                      "AC", "0", "=", "÷"]
    
    
    //horizontalStackView 클로저 사용
    private func horizontalStackView(_ buttons: [UIButton])-> UIStackView {
        let stackView = UIStackView(arrangedSubviews: buttons)
        stackView.axis = .horizontal
        stackView.backgroundColor = .black
        stackView.spacing = 10
        stackView.distribution = .fillEqually
        return stackView
    }
    
    var verticalStackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.backgroundColor = .black
        stackView.spacing = 10
        stackView.distribution = .fillEqually
        return stackView
    }()
    
    
    //버튼 한줄을 만들어서 horizontalStackView에 넣어주는 함수
    private func makeNumButton(buttonNums: [String]) {
        var buttonArray: [UIButton] = []
        
        for num in buttonNums {
            let button = UIButton()
            if Int(num) != nil {
                button.backgroundColor = UIColor(red: 58/255, green: 58/255, blue: 58/255, alpha: 1.0)
            } else{
                button.backgroundColor = .orange
            }
            button.setTitle(num, for: .normal)
            button.titleLabel?.font = .boldSystemFont(ofSize: 30)
            button.layer.cornerRadius = 40
            
            buttonArray.append(button)
            
            if buttonArray.count == 4 {
                verticalStackView.addArrangedSubview(horizontalStackView(buttonArray))
                buttonArray = []
            }
        }
    }
    
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
        makeNumButton(buttonNums: buttonNums)
    }
    
    
    
    func configureUI(){
        //속성
        view.backgroundColor = .black
        
        numLabel.backgroundColor = .black
        numLabel.textColor = .white
        numLabel.text = "\(viewNum)"
        numLabel.textAlignment = .right
        numLabel.font = .boldSystemFont(ofSize: 60)
        
        //view에
        [numLabel, verticalStackView].forEach{view.addSubview($0)}
        
        
        //AutoLayout
        numLabel.snp.makeConstraints {
            $0.leading.trailing.equalToSuperview().inset(30)
            $0.top.equalToSuperview().offset(200)
        }
        
        verticalStackView.snp.makeConstraints {
            $0.height.equalTo(350)
            $0.width.equalTo(350)
            $0.top.equalTo(numLabel.snp.bottom).offset(60)
            $0.centerX.equalToSuperview()
        }
        
    }
    
    
}

#Preview{
    let preview = ViewController()
    return preview
}

 

 

 

 

lev.5 는 버튼을 원형으로 만들어주는 것으로

button.layer.cornerRadius = 40

이미 앞의 단계에서 해결 완료.

 

 

---

Lev.6 버튼을 클릭하면 라벨에 표시되게 하기_숫자가 0으로 시작하지 않게 하기. 

 

버튼을 눌렀을 때 해당 버튼의 타이틀 num을 

어떻게 label.text에 넣는지에 대한 고민이 정말 많았다. 

 

버튼이 많기 때문에 numButtonTapped() 함수를 새로 만들어서

버튼이 눌렸을 때 각각의 버튼의 타이틀을 라벨에 넣기로 결정했다.

 

이 과정 중에서 다른 분들께 질문하면서 이 함수에 매개변수로 UIButton을 받고

currntTitle을 사용해 값을 얻을 수 있는 힌트를 얻었다. 

String? 타입으로 사용 시 언랩핑을 해주어야 했다.

 

 

 

 

발생한 오류

여기서 numButtonTapped(sender: UIButton) 함수에서 UIButton이 매개변수로

어떻게 전달 받을 수 있는지 의문이 생겼다.

 

 

numButtonTapped(sender: UIButton) 함수에서 UIButton은

makeNumButton(buttonNums: [String]) 함수 내에서 생성된 버튼들이

addTarget 메서드를 통해 호출되었을 때 전달된다. 

 

addTarget 메서드는 버튼이 터치되면 해당 버튼 객체(sender)를

numButtonTapped 함수의 매개변수로 전달한다.

 

 

 

하지만, 이렇게 작성할 시 앱이 작동이 되지 않았다.

viewNum은 numLable에서 0으로 보이기 위해

전역 변수로 초기값을 "0"으로 세팅했었다.

 

이 viewNum에 입력된 문자열의 첫번째 인덱스가 "0"이 아니라면

사용자로부터 입력받은 userInput을 추가해주고,

"0"이라면 첫번째 인덱스를 제거해주고 userInput을 추가해줬어야 했다.

하지만 그 부분이 빠져서, "0"일 때 이를 제거하니 nil로 오류가 발생했던 것 같다. 

 

 

 

해결 방법

이렇게 수정하니 작동이 되었다.

그리고 굳이 인덱스로 접근하지 않아도 비교를 수 있었다. 

 

 

 

제출 코드

//
//  ViewController.swift
//  calculatorApp
//
//  Created by ahnzihyeon on 6/26/24.
//

import UIKit
import SnapKit

class ViewController: UIViewController {
    var viewNum = "0"
    var numLabel = UILabel()
    let buttonNums = ["7", "8", "9", "+",
                      "4", "5", "6", "-",
                      "1", "2", "3", "×",
                      "AC", "0", "=", "÷"]
    
    
    //horizontalStackView 클로저 사용
    private func horizontalStackView(_ buttons: [UIButton])-> UIStackView {
        let stackView = UIStackView(arrangedSubviews: buttons)
        stackView.axis = .horizontal
        stackView.backgroundColor = .black
        stackView.spacing = 10
        stackView.distribution = .fillEqually
        return stackView
    }
    
    var verticalStackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.backgroundColor = .black
        stackView.spacing = 10
        stackView.distribution = .fillEqually
        return stackView
    }()
    
    
    //버튼 한줄을 만들어서 horizontalStackView에 넣어주는 함수
    private func makeNumButton(buttonNums: [String]) {
        var buttonArray: [UIButton] = []
        
        for num in buttonNums {
            let button = UIButton()
            if Int(num) != nil {
                button.backgroundColor = UIColor(red: 58/255, green: 58/255, blue: 58/255, alpha: 1.0)
            } else{
                button.backgroundColor = .orange
            }
            button.setTitle(num, for: .normal)
            button.titleLabel?.font = .boldSystemFont(ofSize: 30)
            button.layer.cornerRadius = 40
            buttonArray.append(button)
            
            if buttonArray.count == 4 {
                verticalStackView.addArrangedSubview(horizontalStackView(buttonArray))
                buttonArray = []
            }
            
            button.addTarget(self, action: #selector(numButtonTapped), for: .touchDown)
        }
    }
    
    @objc
    private func numButtonTapped(sender: UIButton) {
        
        var userInput = sender.currentTitle!
        
        if numLabel.text == "0" {
            viewNum.removeFirst()
            viewNum += userInput
        } else {
            viewNum += userInput
        }
        numLabel.text = viewNum
    }
    
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
        makeNumButton(buttonNums: buttonNums)
    }
    
    
    
    func configureUI(){
        //속성
        view.backgroundColor = .black
        
        numLabel.text = "0"
        numLabel.backgroundColor = .black
        numLabel.textColor = .white
        numLabel.textAlignment = .right
        numLabel.font = .boldSystemFont(ofSize: 60)
        numLabel.adjustsFontSizeToFitWidth = true //label 사이즈에 맞게 폰트 크기 자동 조절
        
        
        //view에
        [numLabel, verticalStackView].forEach{view.addSubview($0)}
        
        
        //AutoLayout
        numLabel.snp.makeConstraints {
            $0.leading.trailing.equalToSuperview().inset(30)
            $0.top.equalToSuperview().offset(200)
        }
        
        verticalStackView.snp.makeConstraints {
            $0.height.equalTo(350)
            $0.width.equalTo(350)
            $0.top.equalTo(numLabel.snp.bottom).offset(60)
            $0.centerX.equalToSuperview()
        }
    }
    
    
}

#Preview{
    let preview = ViewController()
    return preview
}