iOS | RIBs – 2. 튜토리얼❶ (RIBs 설치, LaunchRouter 설정, RIB Templete 설정)

안녕하세용

저도 민소네님께 영업당한 화제의 아키텍쳐,,, 프레임워크 ! RIBs 의 공식 튜토리얼을 설치부터 차근차근 써보려 합니다.


본문의 내용이 이해가 안간다 !!!!!!!!! 난 코드만 우선 볼래 !!!!!!!!!! 싶으신 분들은
제가 써가는 코드들의 commit이나 리포지토리를 참고 부탁드려용

🦾 공식 자료

https://github.com/uber/RIBs
https://github.com/uber/RIBs/wiki/iOS-Tutorial-1

💪 이 글에서 진행된 코드의 Repository

https://github.com/unnnyong/RIBsTraining





Xcode project 파일에 RIBs 설치.

1. RIBsPractice 프로젝트를 새로 하나 만들어 줍니다.

2. RIBs 프레임워크를 프로젝트에 설치합니다.
https://github.com/uber/RIBs#installation-for-ios
– 저는 Carthage 를 사용해서 설치했어용

┌🤘-🐧unnnyong@ 💻 unnnyong - 🧱 RIBsPractice
└🤘-> touch Cartfile

┌🤘-🐧unnnyong@ 💻 unnnyong - 🧱 RIBsPractice
└🤘-> ls
Cartfile               RIBsPractice.xcodeproj
RIBsPractice           RIBsPracticeTests

┌🤘-🐧unnnyong@ 💻 unnnyong - 🧱 RIBsPractice
└🤘-> open Cartfile

┌🤘-🐧unnnyong@ 💻 unnnyong - 🧱 RIBsPractice
└🤘-> carthage update --platform iOS
*** Fetching RIBs
*** Fetching RxSwift
*** Checking out RIBs at "v0.9.2"
*** Checking out RxSwift at "4.5.0"
*** xcodebuild output can be found in /var/folders/yh/xxsrpl1n7zzb9_w7vk9d4n_c0000gn/T/carthage-xcodebuild.4qW5zX.log
*** Downloading RxSwift.framework binary at "[4,5]"
***  Skipped installing RxSwift.framework binary due to the error:
	"Incompatible Swift version - framework was built with 5.0 (swiftlang-1001.0.69.5 clang-1001.0.46.3) and the local version is 5.2.2 (swiftlang-1103.0.32.6 clang-1103.0.32.51)."

    Falling back to building from the source
*** Building scheme "RxAtomic" in Rx.xcworkspace
*** Building scheme "RxTest" in Rx.xcworkspace
*** Building scheme "RxBlocking" in Rx.xcworkspace
*** Building scheme "RxSwift" in Rx.xcworkspace
*** Building scheme "RxCocoa" in Rx.xcworkspace
*** Building scheme "RIBs" in RIBs.xcodeproj


3. project file에서 Carthage 설정해주기.
iOS | Carthage 설치. 사용하기. 를 참고해주세용


4. RIB 템플레이트를 Local의 Xcode에 추가하기.
https://github.com/uber/RIBs/blob/master/ios/tutorials/tutorial1/README.md
– 위 링크의 커맨드를 입력해 설치해줍니다.
– 저는 Carthage 를 이용해서 Carthage/Checkouts/RIBs/ios/tooling/install-xcode-template.sh 를 실행해주었어요.

– Xcode 에서 File>New>File… 에서 찾아보면 템플릿이 추가되었답니다 👏



RIB 만들기.

🌟 본문은 https://github.com/uber/RIBs/wiki 의 튜토리얼을 그대로 따라합니다.

튜토리얼의 RIB Tree


RIB tree를 만들러 가시죠 고고싱 ~


1. LoggedOut RIB


1) RIB 추가할 폴더를 만들어주고, RIB 템플릿을 활용하여 필요한 파일을 한 ~ 번에 생성해 줍니다 !


– RIB 를 추가해주고, Main.storyboard 와 VC를 삭제해주고 LoggedOutVC를 기본으로 설정해주었어요.

만들어진 LoggedOut RIB
1) LoggedOutBuilder
LoggedOutBuildable protocol 을 준수.
LoggedOutBuildable protocol 을 사용해서 mock 을 만들 수 있다.
2) LoggedOutInteractor
LoggedOutRouting protocol 을 사용하여 Router 와 통신.
– Interactor 단위로 Unit test 가능.
LoggedOutPresentable 은 Interactor 가 ViewController 와 통신할 수 있게 해준다.
3) LoggedOutRouter
LoggedOutInteractable 로 Interactor 와 통신.
LoggedOutViewControllable 로 ViewController 와 통신.
4) LoggedOutViewController
LoggedOutPresentableListner 로 Interactor 와 통신.




2) UI 컴포넌트 추가

– UITextField 2개와 UIButton 하나를 추가했어요.
https://github.com/uber/RIBs/wiki/iOS-Tutorial-1 에서는 Storyboard를 사용하지 않았지만, RIBs의 사용에 집중하고 UI 코드를 최대한 줄이고자 저는 Storyboard의 힘을 빌렸어요. 🙃




3) Login logic 추가.

1️⃣ 유저가 LoggedOutViewController 의 Login 버튼을 터치.
2️⃣ 유저가 Login 버튼을 터치한 것을 LoggedOutPresentableListener 에게 알리기.
3️⃣ Listener 가 login request 를 처리.

protocol LoggedOutPresentableListener: class {
    func login(player1Name: String?, player2Name: String?)
}

// MARK: IBActions
private extension LoggedOutViewController {

    @IBAction func didTapLoginButton(_ sender: UIButton) {
        listener?.login(
            player1Name: player1NameTextField.text,
            player2Name: player2NameTextField.text
        )
    }

}

– 1️⃣ 과 2️⃣ 를 위해 버튼의 IBAction을 VC에 추가하고 Listener protocol에 메소드를 추가해 주었어요.

// MARK: LoggedOutPresentableListener
extension LoggedOutInteractor: LoggedOutPresentableListener {

    func login(player1Name: String?, player2Name: String?) {
        let player1Name = player1Name ?? "Default"
        let player2Name = player2Name ?? "Default"

        print("첫 번째 선수 이름: \(player1Name), 두 번째 선수 이름: \(player2Name)")
    }

}

– 3️⃣ 을 구현했어요.




4) 시뮬레이터에서 확인하기
– 프로젝트를 만드시고 따로 AppDelegate 혹은 SceneDelegate를 수정하지 않은 분은 IBAction 까지의 코드는 작동해도 Interacotr 에서 작동하지 않으실거예요.
– 이유는 plist 에서 불러오는 VC는 Storyboard 에서 불러오는 class 만 구성되어있어서 RIB 자체의 이니셜라이즈는 되지 않은 상태랍니다.
– 당연히 Builder도 만들어지지 않았고 Interactor 또한 설정되지 않았답니다.
– RIB tree 자체도 프로젝트에서 만들어주지 않았지요.

⭐️ App 이 실행되면서 바로 RIB tree 를 구성하고 개발자가 원하는 RIB로 나아가기 위해서는 LaunchRouter 를 만들고, SceneDelegate(App Delegate) 에서 설정할 필요가 있습니다.



2. LaunchRouter 설정


RIB Tree가 시작되기 위해서는 앱이 실행되는 첫 화면을 설정할 SceneDelegate(AppDelegate)에서
RIB Tree를 시작할 LaunchRouter를 설정해주어야 합니다.

1) 우선은 Root의 RIB 를 만듭니다.
🔗 uber/RIBs – RIBs/ios/tutorials/tutorial1/TicTacToe/Root/




2) RootRIB의 각 파일별로 코드를 추가해주세용
https://github.com/unnnyong/RIBsTraining/commit/6d8010883126f0c4600568822d4b0f338125961a
– 참고 : https://github.com/uber/RIBs/tree/master/ios/tutorials/tutorial1/TicTacToe



3) SceneDelegate 에서 RootRIB 를 불러오도록 설정해줍니다.

import UIKit
import RIBs

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    private var launchRouter: LaunchRouting?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = scene as? UIWindowScene else { return }

        let window = UIWindow(windowScene: windowScene)
        self.window = window

        let launchRouter = RootBuilder(dependency: AppComponent()).build()
        self.launchRouter = launchRouter

        launchRouter.launch(from: window)
    }

}

https://github.com/unnnyong/RIBsTraining/commit/e79c10b208d5403a5b47c667f40b61d035cfe90f
– 참고 : https://github.com/uber/RIBs/tree/master/ios/tutorials/tutorial1/TicTacToe




4) (Storyboard를 사용하신분만 필요하신 단계)
아마 위의 코드를 실행하시면 시뮬레이터에 까만 화면만 뜨고 LoggedOutVC 는 나타나지 않을거예요😢
저는 RIB의 설정이 잘못된 줄 알고 튜토리얼 코드를 다시 살펴봐도 딱히 문제점이 없어서 제 코드만 살펴보니 역시나 Storyboard로 만든 VC를 안불러오고 VC의 class만 초기화해서 사용하고 있었었어요 🤭

여러분은 사소한 문제로 시간을 낭비하시는 일이 없으시겠지만 ,,,
혹시나 똑같은 문제를 맞닥뜨린 분은 도움이 되셨으면 좋겠어용

https://github.com/unnnyong/RIBsTraining/commit/2b8aaec20998a271b628b8be359056f56f5540d3#diff-531aae3fff6dcd7ad01099ff39234736R35



5) LoggedOutViewController 의 Login 버튼 동작 확인하기
– 여기까지의 설정이 큰 문제가 없었다면 ! Login 버튼을 터치하면 print 된답니다 🐥✨







휴 –
튜토리얼의 첫 단계라 그런지 직접적으로 코드 쓰는 것보다 설정에 대한 이야기가 더 많았던 것 같네요 😔

계속되는 튜토리얼은 다음 글을 참고해주세용



우주대스타, 직통령, 요즘 핫 한 캐릭터 펭수 짤 모음::너부리공작소





답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중