iOS | RIBs – 4. 튜토리얼 ❸ (동적/정적 Dependency, Rx 활용하기)

안녕하세용


이번 글은 iOS | RIBs – 3. 튜토리얼❷ 에서 계속됩니다.


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

🦾 공식 자료

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

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

https://github.com/unnnyong/RIBsTraining



펭수 짤 모음집 53종 세트 - 동물친구

드디어 RIBs 튜토리얼의 마지막 글이에요 1!!! 화이띵 !


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

튜토리얼의 RIB Tree


지난 글에서 만들어진건 각각의 RIB와 서로 이동할 수 있도록 완성되었어요 👏
이번에 만들 것은 로그인 화면에서 입력한 선수 이름을 사용해서 게임이 가능하도록 만들어 볼 거예요

아래의 3가지를 목표로 해볼거래요,.,, 튜토리얼에서,,, 😒

  • RIB 빌더들의 build메소드 를 통해 하위 RIB에 dynamic depencency 전달.
  • DI tree (Dependency Injection Tree)를 사용해서 정적 static dependency 전달.
  • RIB lifecycle를 사용하는 Rx stream lifecycle 관리.


자, 덥지만 !!!!!!!!!! 코드쓰러 가시죠 ~ ! 🚗🚕🚙



1. Dynamic dependencies



LoggedOut RIB 에서 유저가 입력한 Player1, Player2 이름을
RIB tree 로 OffGame, TicTacToc 으로 전달해볼게요

OffGame RIB, TicTacToe RIB 에서 사용하기 위해서는 LoggedIn RIB에서부터 존재해야겠죠 !

1) LoggedIn 에 플레이어 이름 프로퍼티를 추가.

LoggedIn 본인이 필요한 것이 아니라 자식들인 OffGame RIB, TicTacToe RIB 구현에 필요한 정보이기 때문에 LoggedInComponent 에 property를 추가해주세요.
LoggedInComponentinit에도 같이 추가해주세요

– Component를 파라미터로 넣는 build 메소드에도 플레어이어 이름을 파라미터로 넣고 초기화 타이밍때 사용해쥬세요




2) Root RIB에서 LoggedIn RIB를 연결시킬 때, 플레이어 이름을 넘겨주기.

build 메소드가 실행되는 RootRouter에서 새로 추가한 플레이어 이름을 파라미터로 넣어주세요 !

🔗 여기까지의 commit



LoggedInBuilderbuild 메소드를 통해서
Root RIB에서 LoggedIn RIB로 Dymanic dependency 로 전달해요
Dynamic dependencies는 한국말로 하면 동적 의존성이라는데 항긍말이라도 무슨 의미인지 몰우겠어요 🙄 ……

Dynamic dependencies VS Static Dependencies

LoggedIn RIB 를 만들 때, 플레이어 이름은 동적으로 주입했다.
그 대신에, RIB Tree로 전달되도록 Dependencies를 정적으로 LoggedIn RIB를 구성했다.

Root RIB가 만들어질 때, 플레이어 이름은 초기화되지 않기 때문에 Optional으로 만들어야 한다.

그렇게 되면 LoggedIn RIB와 자식 RIB들은 플레이어 이름의 nil 값을 처리해야 해야 하는데 이렇게 되면 선을 넘어서 버린다 ,,,,,

이 대신에 사용자가 이름을 입력한 후 가능한 빨리 플레이어의 이름을 확인하고 nil인 경우에 처리해 준다면
다른 부분에서 처리해야할 부분을 제거할 수 있다.

라고 튜토리얼에 적혀있는데 솔직히 이해가 안되네여 😄

튜토리얼의 내용을 바탕으로 다시 한 번 정리해보면

Dynamic dependencies, 동적 종속성
– 동적으로 사용자의 동작 (또는 새로운 네트워크 정보의 수신? 등)으로 다른 RIB 에 영향을 주는 것.
– RIB 의 init, deinit과는 상관없다.
– 초기화 값이 지정되지 않으므로 새로운 값에서 nil이 발생할 경우를 대비 하는 것이 좋다. ( = 다른 RIB에서의 핸들링 수고가 줄어든다.)

Static Dependencies, 정적 종속성
– RIB의 init 때 주입되는 값. (= 기본 값이 대입된다)

장황한 글보다 정리된 느낌이라 제가 생각하기엔 이해하기 비교적 수ㅣ운거가타용
혹시라도 더 이해하기 쉬운 글이 있다면 댓글로 알려주세요 🙏



2. OffGame RIB 로 plyaerName을
RIB tree로 전달하기.


1) LoggedIn 에서 OffGame RIB를 연결시킬 때, 플레이어 이름을 넣어주기.

OffGame RIB에서 플레이어 이름이 필요한 곳은 OffGameViewController 뿐이에요.
필요한 class에 property부터 뚝딱 추가해줍시다.

– 유저가 입력하지 않았을 때는 기본값을 넣어줬으니 무조건 존재하는 값이죠 ! 그래서 당당하게 !를 붙여줬습니다.


– 부모인 LoggedIn RIB로부터 받아오는 값이기 때문에 꼭꼭 Dependency 에 추가를 해야해요 !

– OffGameViewController를 초기화하는 build 메소드에서 component의 값을 넣어주세용
– 저는 storyboard로 구현을해서 대입했지만 storyboard를 사용하지않으신 분이라면 VC의 init에서 구현하는게 더 적절하다고 생각해요.


마지막으로,
– OffGameViewController에 UILabel을 하나 추가해주시고, player1Name, player2Name 을 표시해주세요
🔗 commit



3. ReactiveX Stream 를 활용해서 점수를 기록하기.

플레이어들이 TicTacToc 게임을 하면 점수를 어디선가 보관을 해야하죠.

각각의 RIB에서 갖고있는 것도 좋지않고,
부모가 갖고 있는다고 해도 자식들이 매번 갱신하고 다른 자식이 새로운 값을 받아오는……….. ☹️

점수 관리를 위해 Rx를 활용해봅시다 💪

1) 점수 관련 model, 계산 로직, Player 구분 추가.
– Score model, 계산하는 class, Player Type enum을 뚝딱 만들어주세용
🔗 링크


2) LoggedIn RIB에 Stream 추가.

– LoggedIn RIB 의 자식 RIB에서만 필요하기 때문에 Dependency 가 아닌 Component에만 구현해주었어요.

– Interactor의 property로 추가해주시고, build메소드에서 component의 값으로 대입해주세용

🔗 commit



4. 읽기전용 ScoreStream을
OffGame 으로 전달하기.

지금까지의 코드에서 !
점수에 관한 프로퍼티는 LoggedInComponentmutableScoreStream 만이 존재합니다.

OffGame RIB에서 이 정보는 부모로부터 받아와야하는 필수 property이기 때문에
Dependency, Component로 추가해서 받아와야하죠 !

1) OffGameDependency, OffGameComponent에 점수 property 추가.

– OffGame에서는 본인도 필요하고 그걸 부모 RIB에게 가져오기 때문에 Dependency와 Component 모두에게 property의 추가가 필요해요.

– OffGameDependency에 대해서 부모인 LoggedInComponent에서 구현을 해줍니다.


– ViewController의 표시에도 LoggedIn에 알리기 위해서도 필요하기 때문에 Interactor에도 property로 추가해주세용

🔗 여기까지의 commit



2) scoreStream을 표시하기위해 OffGameInteractor, OffGameViewController에 추가.
– scoreStream의 score를 별도의 코드 수정없이 OffGameVC에 표시하기 위해서는 subscribe를 해주어야해요.

– private method로 따로 빼지는 않아도 되지만 저는 빼는게 읽기쉽고 깔끔하다고 생각해서 별도의 메소드로 지정했어요.

– 새로운 값이 들어오면 presenter를 통해 VC에 새로운 score가 적용되도록 코드를 추가했어요.

🔗 commit




3) OffGameViewControllerscore 표시.
– OffGameVC에서 현재 점수를 표시할 수 있도록 UI와 코드를 수정해주세요. 🔗 commit



4) (리팩토링)
– 저는 VC의 UILabgel의 설정을 별도의 private method로 코드를 빼주었어요.
🔗 commit



5. ScoreStream 의 subscribe 로
점수를 화면에 표시하기.


6. 게임이 끝나면
ScoreStream을 업데이트시키기.

끝까지 TicTacToe게임 자체는 구현하지 않고, Finish Game 버튼을 활용합니다 😵

1) 게임이 끝났을 때 Interactor에게 알리기.
– RIBs에서 VC는 판단이나 데이터의 변형은 일절하지않고, 화면의 표시만 하기때문에 게임이 끝났다는 것을 Interactor에게 알려야해요.
TicTacToePresentableListener 를 통해 알려주세요

– 함수명만 보면 게임을 실행한 것 같지만 저는 꿋꿋하게 구현하지 않고 임의의 값을 넣을게요.

– setWinner는 제가 게임을 구현안해서,,, 임의로 랜덤으로 승자를 만들어주는 private 메소드예요. 🔗



2) Interactor가 ViewController에 Alert를 띄우도록 실행.

– 게임이 끝났다는걸 Interactor가 알게되면 다시 ViewController에게 이긴 플레이어가 누구인지 알려줍니다.

– VC에서는 UIAlertController를 이용해서 화면에 이긴 플레이어를 표시합니다.
– UIAlerController의 확인버튼을 누른 타이밍에 LoggedIn 의 점수에 알릴 수 있도록 completionHandelr를 활용해주세요. 🔗 commit

🔗 여기까지의 commit




3) TicTacTocInteractor가 LoggedInInteractor에게 승자에 대해 알리기.

– 이긴사람의 점수를 추가시키도록 LoggedInInteractor의 코드를 수정합니다.
🔗 commit




7. (보너스) 비겼을 때의 상황 추가하기.

– PlayerType enum의 case에 draw를 추가를 시켰어요.
– PlayerType enum을 배열로도 활용할 수 있도록 CaseIterable 을 활용해서 enum의 3가지 타입중 랜덤으로 승자가 결정되게 설정했답니다. (TicTacToe 을 구현하지 않아서 활용해보았어요 ,,,,, 😖)

🔗 commit




8. (보너스) TicTacToe 에서 PlayerName을 표시하기

1) Player 모델을 새로 추가하기.
– player는 본인이 player 1인지 2인지도 알아야할 필요가 있기때문에 Player라는 이름의 별도의 모델을 만들었어요.
🔗 commit

2) LoggedIn Tree부터의 playerName은 Player 모델로 변경해주세요.
🔗 commit(다음의 3), 4) 수정까지 포함되어 있어요.🙏)

3) draw의 계산 방식은 Optional 활용으로 변경해요.
🔗 code line

4) UIAlert에 뜨는 팀을 Red/Bule가 아닌 Player 모델의 name으로 표시하기.
🔗 code line

5) UIAlert에 선택한 팀의 이름과 함께 색상이 표시되도록 구현하기.
(튜토리얼엔 없지만 해보고싶어서 한 수정이에요😝)
🔗 commit




직접 캡쳐한 펭수 짤8 - 인스티즈(instiz) 인티포털


7번의 보너스부터는 제 스타일의 코드로 작성했기 때문에
RIBs의 공식 튜토리얼과 최종적인 코드는 다를거예요.. !
감안하고 봐주셨으면 좋겠어요 🙏


저와함께 길었던 RIBs 을 같이해주셔서 감사해요.

처음엔 Interactor는 또 뭐고 protocol 은 왜이렇게 많은지 싶었지만
코드를 쓰면 쓸수록 필요한 친구들이고 다 연결되어 있더라구요.

많은 고민과 여러 토론의 산물이 RIBs라는 프레임워크라고 생각해요.
우버의 여러분 존경합니다,,,, 🤭


혹시라도 내용 중에 잘못된 부분이있거나 부족하다고 생각하시는 내용이 있다면
이메일이나 댓글으로 언제나 피드백 환영합니다 !!!!! 🐣💜


MVVM을 거쳐 RIBs도 봤으니 당분간은 아키텍쳐 위주로 글을 써볼 예정이에요.
아마ㅊ도 Flux일 것 같아용

펭 ! 빠 – !

펭-하!! 자이언트 펭TV 펭수 짤 모음 - 2020 | 재미있는 이모티콘 ...

RIBs까지 해낸 우리니까 우리 오래오래 iOS 해먹어요,,,, ! 꼭 !!!!!! 🥺💜


답글 남기기

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

WordPress.com 로고

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

Google photo

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

Twitter 사진

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

Facebook 사진

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

%s에 연결하는 중