[Swift] iOS 앱 개발(Xcode) Byte Degree - week.08

[Review] (7주차) 실습

2022.08.25 - [Development/Swift] - [Swift] iOS 앱 개발(Xcode) Byte Degree - week.07

[Swift] iOS 앱 개발(Xcode) Byte Degree - week.07

---

오류 시, Main.storyboard 삭제 후 다시 붙여넣기

Home UI 설정하기

Editor > Refactor to Storyboard... - Home

command + N > Swift - HomeViewModel

 

홈의 텍스트 및 버튼 삭제

Home 구성

Cocoa Touch Class 생성(Class: ItemInfoCell, Subclass of: UICollectionViewCell)

//
//  HomeViewController.swift
//  CarrotHomeTab
//
//  Created by sehee on 2022/08/24.
//

import UIKit
import Combine

// - 홈의 뷰 모델 만들기(리스트 가져오고, 아이템 탭 했을 때의 행동 정의)
// - 뷰 모델은 리스트 가져오기

class HomeViewController: UIViewController {

    @IBOutlet weak var collectionView: UICollectionView!
    
    let viewModel: HomeViewModel = HomeViewModel(network: NetworkService(configuration: .default))
    var subscriptions = Set<AnyCancellable>()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureCollectionView()
        bind()
        viewModel.fetch()
    }
    
    private func configureCollectionView() {
        
    }
    
    private func bind() {
        viewModel.$items
            .receive(on: RunLoop.main)
            .sink { items in
                //self.applyItems(items)
                print("--> update collection view \(items)")
            }.store(in: &subscriptions)
        
        viewModel.itemTapped
            .sink { item in
                let sb = UIStoryboard(name: "Detail", bundle: nil)
                let vc = sb.instantiateViewController(withIdentifier: "DetailViewController") as! DetailViewController
                //vc.viewModel = DetailViewModel(network: NetworkService(configuration: .default), itemInfo: item)
                self.navigationController?.pushViewController(vc, animated: true)
            }.store(in: &subscriptions)
    }
}

Snapshot 설정하여 내부 페이지 확인

오류 수정 #1

Thread 1: "[<CarrotHomeTab.ItemInfoCell 0x7fd8d7846620> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key descriptionLable."

→ Xcode 내 코드에 연결시킨 button을 찾을 수 없음

뷰 내의 인스펙터가 연결 코드 정보와 상이하여 발생(연결 이후 라벨을 변경한 경우, Lable → Label)

ItemInfoCell 내 연결정보 변경

class ItemInfoCell: UICollectionViewCell {
    
    @IBOutlet weak var thumbnail: UIImageView!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var descriptionLabel: UILabel!
    @IBOutlet weak var priceLabel: UILabel!
    @IBOutlet weak var numOfChatLabel: UILabel!
    @IBOutlet weak var numOfLikeLabel: UILabel!

그래도 불가...

Referencing Outlets 해당 부분을 x

오류 수정 #2

Thread 1: Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value

→ 1번과 동일한 문제

반복하여 연결 코드 삭제 후 재입력

해결

 

// - 좌우 패딩 필요

// - 셀에서, 콤마 표시하게끔 넘버 포매팅

// - 셀에서, 이미지 세팅하기 (+ cornerRadius 설정)

// - 셀에서, 콤마 표시하게끔 넘버 포매팅, formatNumber 변경
	func configure(item: ItemInfo) {
        titleLabel.text = item.title
        descriptionLabel.text = item.location
        priceLabel.text = "\(formatNumber(item.price))원"
        
        numOfChatLabel.text = "\(item.numOfChats)"
        numOfLikeLabel.text = "\(item.numOfLikes)"
    }

    private func formatNumber(_ price: Int) -> String {
        let formatter = NumberFormatter()
        formatter.numberStyle = .decimal
//        formatter.numberStyle = .currencyPlural
//        formatter.locale = Locale(identifier: "ko-KR")
        let result = formatter.string(from: NSNumber(integerLiteral: price)) ?? ""
        return result
    }

 

Kingfisher download

Kingfisher: 원격 저장소,  쉽게 말해서 고유의 URL 주소를 가지고 있는 이미지를 앱 내에서 보여지게 해주는 라이브러리

project에서 CarrotHomeTab 선택, 상단바 Package Dependencies 선택, + 버튼 눌러서 Searching All Sources

혹은 File > Add Packages...

패키지 파일 존재하지 않음, 별도 다운로드 필요

 

File > Swift Packages > Add Package Dependency
Add https://github.com/onevcat/Kingfisher.git
Select "Up to Next Major" with "7.0.0"

 

https://github.com/wwood/kingfisher-download

GitHub - wwood/kingfisher-download: Easier download/extract of FASTA/Q read data and metadata from the ENA, NCBI, AWS or GCP.

git clone https://github.com/wwood/kingfisher-download
cd kingfisher-download
conda env create -n kingfisher -f kingfisher.yml
conda activate kingfisher
cd bin
export PATH=$PWD:$PATH
kingfisher -h

Swift 내장 패키지 파일이 아니므로 Add Local... 불가

해당 URL 입력하여 download

https://github.com/wwood/kingfisher-download

다시 설치

https://github.com/onevcat/Kingfisher

GitHub - onevcat/Kingfisher: A lightweight, pure-Swift library for downloading and caching images from the web.

Dependency Rule: Up to Next Major Version

import Kingfisher

        thumbnail.kf.setImage(
            with: URL(string: item.thumbnailURL),
            placeholder: UIImage(systemName: "hands.sparkles.fill")
        )

다음과 같이 생성(완료)

---

Storyboard에서 바로 깨어난 시점에서, 이미지의 모서리를 둥글게 설정

    override func awakeFromNib() {
        super.awakeFromNib()
        thumbnail.layer.cornerRadius = 10
        thumbnail.layer.masksToBounds = true
        thumbnail.tintColor = .systemGray
    }

잘못된 URL(이미지가 있는 서버 URL이 아닌)를 선택했을 때, place holder가 보여야 함

        thumbnail.kf.setImage(
//            with: URL(string: item.thumbnailURL),
            with: URL(string: ""),
            placeholder: UIImage(systemName: "hands.sparkles.fill")
        )