만국박람회 [Step 2] Gray, Danny #310

dannykim1215 · 2024-03-15T08:11:19Z

안녕하세요.! @havilog
Gray, Danny 조 입니다.

스토리보드를 통해 구현(완료)
전면 코드화 진행을 통해 [STEP 2] 만국박람회 구현 완료했습니다. 😁
[STEP 2]PR 요청드립니다. 🙏

🇰🇷 만국박람회 [STEP 2: 화면 구현] 진행사항

첫 화면과 출품작 목록 그리고 품목 상세를 볼 수 있는 화면을 구현합니다.

첫 화면에는 1900 만국박람회 포스터와 각종 설명을 표시합니다.

출품작 목록에는 사진, 이름, 간단 설명 항목이 포함된 리스트를 출력합니다.

출품작 상세화면에는 이름, 사진 설명을 보여줍니다.

- 첫 화면에는 1900 만국박람회 포스터와 각종 설명을 표시합니다.

- 출품작 목록에는 아래의 항목이 포함된 리스트를 출력합니다.

출품작 사진
출품작 이름
출품작 간단 설명
출품작을 선택했을 때 출품작 상세화면으로 이동합니다.

- 출품작 상세화면에는 아래의 항목을 보여줍니다.

출품작 이름
출품작 사진
출품작 설명

🤔 고민되었던 점

extension 타입을 활용해서 기능별로 코드를 분리 하였습니다. (ex. addView 메소드와 setConstraint 하는 메소드를 별도 extension을 활용해서 구현 등.)
→ 이러한 방식으로 extension 타입을 활용한 코드 정리를 해도 되는 것인지? 별도 규칙이 있는 것인 지 고민 되었습니다. 🤔
출품작 목록 화면을 customCell, TableView를 활용하여 구현
→ TableView에 있는 Cell을 재사용하기 위해 아래와 같이 구현하고, 원하는 셀 모앙을 위해 HeritageTableViewCell을 생성하여 활용했습니다.
cell 내부를 구성하는 컴포넌트와 제약조건은 HeritageTableViewCell에 정의하고, TableView의 생성과 제약조건은 KoreanHeritageViewController에 정의하였는데 올바르게 코드를 분리 하였는지 고민 되었습니다.

// HeritageTableViewCell
class HeritageTableViewCell: UITableViewCell {
    private let titleLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = UIFont.preferredFont(forTextStyle: .title1)
        return label
    }()
    .
    .
    .
}

// KoreanHeritageViewController
class KoreanHeritageViewController: UIViewController {
    private var koreanHeritageTableView: UITableView = {
        let tableView = UITableView()
        tableView.translatesAutoresizingMaskIntoConstraints = false
        return tableView
    }()
    
    private let cellIdentifier: String = "HeritageTableViewCell"
    private var koreanHeritage: [KoreanHeritage]!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        koreanHeritageTableView.delegate = self
        koreanHeritageTableView.dataSource = self
        
        KoreanHeritageJsonDecode()
 koreanHeritageTableView.register(HeritageTableViewCell.self,forCellReuseIdentifier: cellIdentifier)
        addSubview()
        koreanHeritageTableView.rowHeight = UITableView.automaticDimension
        koreanHeritageTableView.estimatedRowHeight = UITableView.automaticDimension
    }
}
.
.
.

🙏 조언을 얻고 싶었던 점

JSON decode기능을 extension을 통한 구현
: 아래 코드처럼 ExpositionViewController, KoreanHeritageViewController에서 JSON decode의 기능을 구현했습니다. 저희의 의도는 extension 하나로 싶은데, 어떻게 하면 좋을 지 조언을 주시면 감사하겠습니다.

// ExpositionViewController.swift
extension ExpositionViewController {
    private func expositionIntroductionJsonDecode(){
        let jsonDecoder: JSONDecoder = JSONDecoder()
        guard let dataAsset: NSDataAsset = NSDataAsset(name: "exposition_universelle_1900") else {
            return
        }
        
        do {
            self.expositionIntroduction = try jsonDecoder.decode(ExpositionIntroduction.self, from: dataAsset.data)
        } catch {
            print(error.localizedDescription)
        }
    }
}

// KoreanHeritageViewController.swift
extension KoreanHeritageViewController {
    private func KoreanHeritageJsonDecode(){
        let jsonDecoder: JSONDecoder = JSONDecoder()
        guard let dataAsset: NSDataAsset = NSDataAsset(name: "items") else {
            return
        }
        
        do {
            self.koreanHeritage = try jsonDecoder.decode([KoreanHeritage].self, from: dataAsset.data)
        } catch {
            print(error.localizedDescription)
        }
    }
}

저희 조의 경우, [STEP 2] 만국박람회 UI를 먼저 스토리보드를 활용하였습니다. 스토리보드를 통해 구현을 진행한 다음, UI를 코드화 진행하였습니다. 이러한 과정에서 UI를 코드로 작성할 때 미리 스토리보드를 활용했던 내용이 있었기에 특히 제약조건을 작성하는 게 훨씬 수월하다고 생각 되었습니다.
→ 스토리보드를 이용하지 않고 코드로 진행하는 현업 조직일 경우에는 스토리보드를 통해 제약조건을 확인하는 것이 아닌 바로 코드를 통해 제약조건을 작성을 하고 계신것 인지 궁금합니다. 😅

만국박람회 프로젝트 [STEP 2] PR 마치도록 하겠습니다. 감사합니다. 😁

…ViewController로 화면 이동 기능 추가

…ntroller 타입 내부에 한국출품작 디테일 설명 로직 추가, Navigation Controller 타이틀 추가

… 디자인에 맞게 변경

…, StackView, Maintitle, Subtitle 추가"

…색깔 제거

… 로직을 별도 메소드로 분리

…ageTableViewCell 내부의 extension 타입을 활용한 코드 리팩토링

havilog

→ 이러한 방식으로 extension 타입을 활용한 코드 정리를 해도 되는 것인지? 별도 규칙이 있는 것인 지 고민 되었습니다. 🤔

요건 취향의 영역이라 편하신대로 하심 됩니다!

→ TableView에 있는 Cell을 재사용하기 위해 아래와 같이 구현하고, 원하는 셀 모앙을 위해 HeritageTableViewCell을 생성하여 활용했습니다.

현재 prepareForReuse가 빠져있어요
cell이 언제 어떻게 재사용되는지, 화면에 몇개가 그려지고 어느 시점에 생성되는지 학습해서 알려주세요!

저희의 의도는 extension 하나로 싶은데, 어떻게 하면 좋을 지 조언을 주시면 감사하겠습니다.

extension이 아닌 AssetDecoder과 같은 객체를 만들어보는것은 어떨까요?
SRP를 생각해보시면 좋을듯 합니다!

→ 스토리보드를 이용하지 않고 코드로 진행하는 현업 조직일 경우에는 스토리보드를 통해 제약조건을 확인하는 것이 아닌 바로 코드를 통해 제약조건을 작성을 하고 계신것 인지 궁금합니다. 😅

개인적으로 스토리보드는 deprecated됐다고 생각합니다.
현업에서 아직 스보를 사용하는 곳은 있겠지만, 코드로 UI를 그릴줄 알면 스토리보드는 볼 수 있어서 코드로 UI를 작성해주세요.

havilog · 2024-03-16T11:39:05Z