[iOS] Rick&Morty - #1 Setup

 

iOS Academy(아프라즈)의 강의를 보고 MVVM을 학습하는 기록. 노션에 적은 것을 가져와서 조금 다듬고 공개하는 거라서 간략하게 설명한 게 많다. 실제 프로젝트에서는 VC 같은 명칭을 쓰진 않았지만 여기서는 간단하게 VC로 약어로 표현한다.

Setup과 기본적인 Group을 설정해준다.

- Programmatically으로 UI를 구성하기 때문에 이를 위한 세팅을 진행해 준다. (Storyboard 삭제, targets info 수정 등..)

MVVM

지금 9화까지 본 상황인데 MVVM 디자인 패턴을 정말 잘 알려주는 강의라 생각한다.
그룹은 다음과 같은 7개로 만들어진다.

• Controllers, Models, Views, ViewModels (+ APIClients, Managers, Resources)

plist를 제외하고 잡다한 파일들은 전부 Resources로 넣어버리자.

올바른 명칭을 짓는 관습

서비스의 약어를 붙인다. 예를 들어 우리는 릭 앤 모티 프로젝트니까 RM이라는 prefix가 붙어 다닐 것이다.
- 트위터면 TW, 유튜브는 YT가 붙는 식이다.

서비스를 시작하는 VC는 탭바로 할 것이다.

기존 VC를 RMTabViewController로 명명한다.
- 물론 VC 상속받는 게 아니라 UITabBarController를 상속받는다.
Scene에서 ViewController로 루트 설정되어 있는 거 변경된 이름에 맞게 수정하자

Controllers에 부속 폴더 생성하자

아까 그룹을 7개로 나뉜다고 했는데 이건 가장 큰 카테고리이며 안에 여러 가지가 들어갈 수 있다. 예를 들어 지금은 Core라는 그룹을 생성할 것이다. 나중엔 Others라는 detailVC들이 들어가는 곳이 생겨날 것이다.

아무튼 Core 그룹은 특정 핵심 탐색 권한을 위한 컨트롤러 파일들을 모아 놓는 곳이다. 방금 생성한 RMTabVC도 여기에 들어가야 한다.
그 외에도 RMLocationViewController, RMCharackterVC, RMSettingsVC, RMEpisodeVC 파일들 만들어주자

RMTabVC에서 VC들 연결해 주자

그런데 그냥 연결하기보다는 NavigationController로 wrapped 해줘서 추후에 내비게이션 연결할 수 있게 만들어주자.

private func setupTabs() {
        let charactersVC =  RMCharacterViewController()
        let locationsVC = RMLocationViewController()
        let episodesVC = RMEpisodeViewController()
        let settingsVC = RMSettingsViewController()

        let nav1 = UINavigationController(rootViewController: charactersVC)
        let nav2 = UINavigationController(rootViewController: locationsVC)
        let nav3 = UINavigationController(rootViewController: episodesVC)
        let nav4 =  UINavigationController(rootViewController: settingsVC)
        setViewControllers([nav1, nav2, nav3, nav4], animated: true)
    }

이제 VC 안에서 배경색과 타이틀을 붙인다.

- 뭘 해도 상관없긴 하지만 아프라즈는 .systemBackground를 사용했다. 이는 앞으로 이 앱이 다크/라이트 모드 둘 다 지원하기 위해 고려된 것이다. 앞으로 색상은 시스템 색상을 이용할 것이다.

VC의 Title, TabBarItem을 설정한다.

RMTabViewController에서 내비게이션바에서 prefersLargeTitles를 true로 설정한다. 다음으로 각 VC의navigationItem.largeTitleDisplayMode를 .automatic으로 설정한다. 

탭바에서 보여줄 내용을 세팅하고 이미지를 SFSymbols를 이용하여 설정한다.

[VCS].navigationItem.largeTitleDisplayMode = .automatic

for nav in [nav1, nav2, nav3, nav4] {
    nav.navigationBar.prefersLargeTitles = true
}

nav1.tabBarItem = UITabBarItem(title: "Characters", image: UIImage(systemName: "person"), tag: 1)
nav2.tabBarItem = UITabBarItem(title: "Locations", image: UIImage(systemName: "globe"), tag: 2)
nav3.tabBarItem = UITabBarItem(title: "Episodes", image: UIImage(systemName: "tv"), tag: 3)
nav4.tabBarItem = UITabBarItem(title: "Settings", image: UIImage(systemName: "gear"), tag: 4)