팀프로젝트1 [주문 앱 만들기(5) - 데이터 바인딩, 앱 아이콘 적용하기, 앱 이름 한글로 바꾸기]

⎮ 팀 프로젝트 5일차

    프로젝트가 최종장에 다다르면서, DataBinding을 마무리하고 앱 아이콘을 추가하려고 한다.

 

⎮ 데이터 바인딩1 : 로직 이해하기

 

    팀에서 대화한 흐름은 다음과 같다.

* Data Flow
   CollectionView에 있는 장바구니 버튼을 누르면 버튼에 해당하는 상품의 데이터가 추출되고,
   해당 데이터를 TableView가 받아서 이름과 금액을 표시해주어야 함.

 

   1. 버튼을 누르면,

   2. 해당 버튼을 포함하고 있는 CollectionView의 데이터를 추출

   3. TableView에 데이터를 보내줘야함

   4. TalbeView가 해당 데이터를 사용하여 TableView의 Label에 적용해줘야 함

 

⎮ 데이터 바인딩2: 버튼 동작 수정하기

   원래 버튼에는 메서드가 구현되어 있었고, 해당 버튼을 누르면 ButtonTapped로 print되도록 설정해두었다.

button.addTarget(self, action: #selector(buttonTapped), for: .touchDown)

    @objc func buttonTapped(_ sender: ProductCollectionView) {
        print("buttonTapped)
    }

 

    이제 이 메서드가 데이터를 전달할 수 있도록 수정하려고 한다.

   이를 위해 CollectionViewCell에서 delegate가 필요함을 명시해주었고,

  delegate가 sendData 함수를 실행하면, productName과 price를 보내주도록 구현하였다.

class MyCollectionViewCell: UICollectionViewCell {

    { ... }

    var delegate: MyCelldelegate?
    
    // 버튼을 누르면 이 함수를 실행해줘
    @objc func buttonTapped(_ sender: ProductCollectionView) {
        // productName은 내가 가지고 있는 nameLabel의 text이고
        guard let productName = self.nameLabel.text else { return }
        // productPrice는 내가 가지고 있는 priceLabel의 text야
        guard let productPrice = self.priceLabel.text else { return }
        
        // delegate가 내 data를 보내줬으면 좋겠어
        delegate?.sendData(name: productName, price: productPrice)
    }
}

 

⎮ 데이터 바인딩3: Delegate 구현하기

    Delegate를 어떻게 쉽게 이해할 수 있을까?

  이렇게 생각해보면 된다.

 

    1. 어떤 동작을 구현할 것인지

    2. 해당 동작을 누가 대신해줄 것인지

- CollectionView의 장바구니 버튼을 누르면, TableView로 정보를 업데이트해주려고 함
   * ViewController에서 CollectionView와 TableView의 인스턴스를 생성하여 사용하고 있음

 

    viewController가 CollectionView와 TableView 모두 가지고 있기 때문에 viewController가 Delegate가 되는 것이 효율적이다.

 

    그러면 이렇게 선언하면 될까?

    var delegate: ViewController?

 

   아니다, delegate에서의 핵심은

   시키는 입장에서 누가 delegate가 되는지 모르는 것에 있다.

   (시키는 입장에서는 그냥 누가하던지 상관없고 해당 동작이 구현만 되면 됨)

 

   앞서 우리는 delegate를 다음과 같이 선언해주었고,

    var delegate: MyCelldelegate?

 

   뒤에 붙은 MyCelldelegate는 프로토콜이다.   

 

    따라서 이 프로콜은 다음과 같이 구현이 되어 있고,

protocol MyCelldelegate {
    func sendData(name: String, price: String)
}

 

   이제 해당 프로토콜을 viewController에서 채택하면 된다.

extension ViewController: UICollectionViewDataSource, MyCelldelegate {
    
    // 매개변수로 name과 price를 받았을 때
    func sendData(name: String, price: String) {
        // newItem에 업데이트 해줘!
        let newItem = CustomCellModel(nameLabel: name, priceLabel: price)
        print(newItem)
        if let index = orderTable.dataSource.firstIndex(where: { $0.nameLabel == newItem.nameLabel}) {
            orderTable.dataSource[index].count += 1
        } else {
            orderTable.dataSource.append(newItem)
        }
        
        orderTable.loadData()
    }
    
    {  ...  }
}

 

   이렇게 하면 우리가 기대한 화면처럼 버튼에 해당하는 항목의 데이터가 tableView(주문 목록)에 전부 담기게 된다.

 

   상세한 코드는 너무 길어서 업로드하지는 않았다.

  전체 코드는 우리 팀의 GitHub에서 확인할 수 있다.

 

  https://github.com/heopill/Oduk

GitHub - heopill/Oduk: Sparta Team 5 Repository

 

⎮ 앱 아이콘 적용하기

    Xcode에서 프로젝트를 생성하면, 기본적으로 asset이 있다.

   그리고 asset 안에는 app Icon 항목이 있다.

 

  이미지를 1024 x 1024 px 사이즈로 준비해준다.

 

   여기에 이미지를 넣어주고,

  Single Size로 세팅해주면 AppIcon이 들어간다.

 

⎮ 앱 이름 한글로 바꾸기

    프로젝트 안에서 Strings File을 하나 생성한다.

   * 파일명은 InfoPlist

 

  해당 파일을 열어보면 우측의 Localization이라는게 있는 것을 볼 수 있다.

 

  이제 저기에 언어를 추가해줄 건데,

  프로젝트 파일 - Project - Info를 누르면 하단과 같이 Localizations가 있다.

  거기에서 + 버튼을 눌러 한국어를 추가해준다.

 

  언어를 선택하면 다음과 같은 화면이 나오는데,

 혹시나 Storyboard가 있다면 해당 부분은 체크를 해제하고, InfoPlist만 체크하고 Finish를 누르면 된다.

 

   그러면 다음과 같이 한국어가 추가되었음을 확인할 수 있다.

 

 

  이제 InfoPlist에 변경하고자 하는 값을 넣어주면 된다.

  InfoPlist (English)에는 아래와 같이 영어를

// 뒤에는 본인이 사용하고자 하는 이름
"CFBundleDisplayName" = "Oduk";
"CFBundleName" = "Oduk";

 

  InfoPlist (Korean)에는 아래와 같이 한글을 입력하면 된다.

"CFBundleDisplayName" = "오덬";
"CFBundleName" = "오덬";