[PAKA] step2 : 기능 보완 및 코드 리팩토링

[AKAPUCH]

스텝별 작업목록

• 화면 UI 구현
• section 활용 테이블뷰 구현
• 불필요한 코드 정리, 주석 첨부
• 모듈화

학습키워드

• section, tableview, model, uitableviewcell

고민과 해결

section 구현

step1

• section을 구현하기 위해서는 numberOfSections, titleForHeaderInSection 메서드를 추가로 구현해야 했습니다.
• 또, tableView 생성시 init에 style 파라미터로 .grouped를 설정해 견본과 같은 레이아웃을 완성할 수 있었습니다.

step2

• 특정 셀 판별 로직은 크게 변화를 주지 않았지만 대신 커스텀 셀에 전체 구성요소를 설정하는 메서드를 구현하여 사용함으로써 재사용 코드를 최소화시켰습니다.

테이블뷰 높이 이미지에 맞게 설정

step1

• step1에서 구현한 테이블뷰는 커스텀 UILabel, UIImageView를 구현하고 auto layout을 이미지 크기에 맞춰 높이가 굉장히 어색했습니다.

step2

• step2에서는 UITableViewCell의 기본 label, imageView를 이용하였습니다.(레퍼런스 코드 또한 동일) 단, titleLabel, subtitleLabel, image 등은 향후 ios버전에서 deprecated되기 때문에 UIContentListConfiguration을 사용하여 구현했습니다.
• 레퍼런스처럼 프로필 셀만 이미지가 셀과 일치하게 만들기 위해 UIContentListConfiguration의 imageProperties.reservedLayoutSize으로 높이를 재설정하였습니다.

        if let cellImageName = imageName {
            content.image = UIImage(named: cellImageName)
            // 로그아웃 셀의 경우 높이를 지정
            if let height = cellHeight {
                content.imageProperties.reservedLayoutSize.height = height
            }
        }

프로필 셀 라벨 텍스트 2줄 만들기

step1

• 외부 데이터 모델에 줄바꿈 문자를 넣었으나, 실제 화면에서는 적용되지 않았습니다.
• 레퍼런스 코드를 확인한 결과 기본 제공 UITableViewCell의 init 파라미터 style을 지정하고, subtitle 속성에서 적용하는 것이었습니다.

step2

• 커스텀 셀 생성자(init)의 style로 .subtitle 할당 후 cellForRowAt 에서 셀 판별 후 subtitle를 할당해주었습니다.

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        // 테이블셀 기초 데이터로 초기화 및 현재 row 이미지, 타이틀 할당
        let currentRow = Row(at: indexPath)
        var currentImageName : String? = currentRow[0]
        let currentTitle = currentRow[1]
        var currentSubTitle : String?
        var currentTitleColor = UtilDatas.cellStandard.titleColor
        var currentTitleAlignment = UtilDatas.cellStandard.titleAlignment
        var currentAccessoryType = UtilDatas.cellStandard.accessory
        
        if 
        ...
        // 프로필 row는 subTitle 지정 및 cell 높이 재지정
        } else if currentImageName == UtilDatas.imageName.bayMax {
            currentSubTitle = UtilDatas.cellStandard.subTitle
            cell.cellHeight = UtilDatas.cellStandard.titleHeight
        }
        
        // MARK: - 커스텀 테이블 셀 프로퍼티 및 메서드로 셀 구성
        cell.imageName = currentImageName
        cell.setAccessoryType(currentAccessoryType)
        cell.setDefaultProperty(currentTitle, currentSubTitle, cellTitleColor: currentTitleColor, cellTextAlignment: currentTitleAlignment)
        return cell
    }

셀 이미지 공백 시 처리 (step2에서 개선 예정)

step1

• 구현할 때 공백 이미지가 있는 줄 모르고 외부 데이터 모델에 imageName을 nil로 설정한 상태입니다.

step2

• 테이블 데이터 모델에서 placeholder 이미지를 추가하여 해결했습니다.

코드 리팩토링 (step2에서 반영 예정)

step1

• 모듈화, 불필요 코드 삭제 예정입니다.
• 레퍼런스처럼 공통 속성 클래스를 만들어 관리하는 것을 고려중입니다.

step2

• 컨트롤러에서 익스텐션 구현부를 분리해 가독성 확보
• 파일 MVC 구조로 관리 및 Util 계층 추가하여 공통 코드 구조체 구현으로 유지보수성📈

레퍼런스 코드 의문점🤔 해결

• Q : Specs.swift에서 Color 구조체는 왜 정의한걸까? tint 하나를 정의하기 위해서?

  • A : 다른 공통 코드들과 마찬가지로 여러 클래스에서 가져다 쓰고 있었기 때문에 변경 발생시 유지보수 용이함

• Q : FBMeBaseViewController - FBMeViewController 상속구조로 만든걸까?

  • A : 페이스북 화면처럼 셀 클릭 후 이동되는 Detail 화면은 FBMeViewController를 재사용하게 됨. 따라서 FBMeBaseViewController는 UINavigationController의 root로 사용된다고 생각하면 될 것 같습니다.

• Q : view인 customCell에서 극도로 코드를 절제하고 컨트롤러에서 구현하고 있는데, 왜 그렇게 한 걸까?

  • A : 셀마다 구현이 조금씩 틀리고 셀을 구별할 수 있는 시점은 cellForRowAt입니다. 따라서 필연적으로 커스텀 셀에서는 기본 속성들만 설정해놓고 컨트롤러에서 조건문을 통해 구현해줄 수 밖에 없었습니다.

• Q : 테이블뷰 프로토콜 메서드 heightForRowAt은 왜 굳이 구현한건지? 높이를 지정해주지 않아도 그림 너비로 인해 저절로 조절됨..

  • A : 기본 셀 구성요소(라벨, 이미지뷰) 재사용시 이미지 크기로 높이를 자동 할당한다면, 셀과 이미지뷰 사이에 반드시 공백 발생하기 때문에 프로필 셀은 이미지 높이를 셀과 맞추기 위해 설정해주었습니다.
  • rowHeight 프로퍼티 값을 설정하지 않았다면 heightForRowAt을 통해 높이 설정가능