기타/패스트캠퍼스 Ribs (12) 썸네일형 리스트형 패캠 Ribs 정리 12. 리펙토링 지금 앱은 모노리틱 구조이므로 사실상 모든 객체에 접근이 가능하다. 모듈 구조로 바꿔보자 topup 리블렛이나 addPaymentMethod는 재사용하기위해서 만들었지만 CardOnFile, EnterAmount 리블렛 처럼 한군대서만 쓰이는 객체도 다른 개발자들이 무분별하게 접근이 가능하다. 이를 방치하면 점점 스파게티코드가 된다. 그리고 서로 강결합이 발생해서 원하는 코드만 빌드하고 돌려보는것이 불가능하다. 모듈화와 느슨한결합을 이용해 이를 해결할것이다. 먼저 모듈화 작업을 한다. 코드를 라이브러리로 분리하고 public과 internal로 무분별한 접근을 구분해서 차단한다. 그 후 모듈을 느슨하게 결합시켜 소스코드 의존성을 역전시키고 컴파일하고싶지 않은 코드를 분리하고 내가 빌드해보고 싶은 코드만 .. 패캠 Ribs 정리 11. 의존성 주입 패턴 의존성 역전을 통해 프로토콜에 의존하게 바꿧다면 코드 어디선가는 실제 구현체를 주입해줘야 한다. 의존성 주입은 의존성 역전을 완성하기위한 작업이다. 의존성 역전된 코드는 객체를 생성해서 주입해주는 지점이 필수로 존재하고 이 지점을 Composition Root라고 부른다. 의존성을 주입하는 방법은 크게 3가지가 있다. 생성자 주입 메서드 주입 프로퍼티 주입 앞서 실습에서 우리는 컴포지션 루트에 3가지 방법을 모두 사용해서 의존성을 주입 해 보았다. Ribs의 Builder가 각 리블렛의 컴포지션 루트에 해당한다. Builder의 Build 메서드를 보면 RepositoryImp, ViewController, Stream, Router, Interactor등을 생성하는데 ViewController Rout.. 패캠 Ribs 정리 10. 느슨한 결합 코드를 물리적으로만 나누는 모듈화는 반쪽짜리 모듈화이다. 모듈끼리 느슨하게 결합시켜야 진정한 모듈화가 완성된다. 앱이 점점 커져도 생산성 저하를 최대한 막는 앱 아키텍처와 개발자환경을 구축하는방법을 알아보자 계층 구조 그림을 보면 상위 모듈에서 하위모듈로 화살표가 가리키고있다. 상위 모듈에서 하위모듈을 참조(사용)한다는 표현으로 의존성이 있다라고 표현하기도 한다. 이 의존성은 사실 두가지로 다시 나뉜다. - 런타임 의존성, 코드 호출 의존성 ( 프로퍼티나 함수를 호출할때 발생) - 컴파일타임 의존성, 소스코드 의존성 (코드상으로 언급되거나 import 시 발생) 객체지향언어가 나오기 전에는 두 의존성은 무조건 같은 방향이었다. 소스코드 의존성은 누가 언제 컴파일되는지 빌드의 순서를 결정짓는것으로 확장과 .. 패캠 Ribs 정리 09. 모듈화 모듈레벨에서 개념을 정리 모놀리틱 구조에서 모듈화로 바꿧을때 장점은? 모노리틱 구조 특징 단일 타겟(모듈) 객체 간 무분별한 참조 더보기 - 서로 참조하는 순환 참조가 자주 발생하게됨 -> 단독으로 사용 불가능 하면 결국 여러 객체가 거대한 하나의 객체처럼 동작 - public과 internal 접근 제어를 구분할 수 없는게 가장 크다 > 복잡한 기능은 여러 객체로 이루어진 경우가 많지만 사용자에게는 하나의 객체만 노출하고 싶음 > 모든 연관 객체를 한 파일에 넣고 숨길 객체만 private class로 하지 않는이상 객체를 숨길 수 없음 코드 변경의 영향 범위 파악이 힘듦 더보기 - 작은 코드의 수정이 어디까지 영향을 미칠지 알 수 없음 - 작은 리펙토링, 기능 추가, 수정 등에서 컴파일 애러가 끝없이.. 패캠 Ribs 정리 08. 복잡한 플로우 만들기 - 3 커밋하던 주소가 바뀌었다 https://github.com/csh8130/-ribs-practice 충전 버튼을 눌렀을때 동작이 필요하다, 백엔드는 실제로 없으며 있다고 가정하고 개발한다. 카드 목록, 추가를 담당하는 리포지토리처가 있는것처럼, 잔액과 충전을 담당하는 리포지토리를 따로 만들고 여기서 처리한다. (3d7a7ed378e523820dd86bca71c770d30ec15890) 지난시간에 만들었던 카드가 하나도 없으면 바로 카드 추가 화면에서 카드 추가가 완료되면 바로 충전 화면이 나오도록한다. push처럼 이동은 하고 대신 뒤로 돌아갈수는 없도록 할것이다(카드를 생성했는데 다시 돌아간다는게 이상하므로). navigation stack을 조절해서 뒤로 못 돌아가도록 한다. (6436e3bf69d2.. 패캠 Ribs 정리 07. 복잡한 플로우 만들기 - 2 카드 충전화면이 준비되어서 충전 자체의 flow를 만들 차례이다. 카드 갯수에 따라서 충전 화면을 보여줄지 카드 추가화면을 부여줄지 파이낸스 홈 화면에서 리포지토리를 가지고 이 분기를 한다면 나중에 이 플로우를 재사용하는게 거의 불가능해진다. ribs의 최대 장점중 하나는 뷰컨트롤러가 로직을 담당하는게 아닌 인터렉터가 로직을 담당한다는것으로 화면에 얽매이지않고 로직을 만들 수 있으며 이를 뷰 리스 리블렛이라고 한다. 충전 플로우를 담당할 뷰 리스 리블렛을 하나 만든다. (Topup 리블렛) TopupDependency는 이 리블렛이 필요한것을 모아둔건데 부모 리블렛이 뷰 컨트롤러를 하나 지정해 줘야 한다. 라우터에서도 이 뷰컨트롤러를 사용한다. 뭔가 새 화면을 띄우거나 할때 부모의 뷰컨트롤러를 사용하기.. 패캠 Ribs 정리 06. 복잡한 플로우 만들기 - 1 이번 장은 여러 화면으로 구성된 잔액 충전 플로우를 구현하게된다. ribs의 큰 장점은 뷰없이 로직을 만들수 있다는것이다. 이를 viewless 리블렛이라고 할것인데 어떻게 이를 활용할지 알아본다. 카드가 하나도 없으면 충전하기를 눌렀을때 카드 추가 화면이 뜨고 하나라도 있으면 잔액 충전 화면이 뜬다거나 어느 플로우에서는 모달로 뜨고 어느 플로우에서는 푸시로 뜨는 등의 화면을 구성할 것이다. 이런 분기를 누가 어디서 처리할것인가? 추후 이 부분을 고민하며 화면을 만들어보자. 우선 카드 추가 화면을 먼저 만든다. (AddPaymentMethod 리블렛) 카드 목록의 + 버튼을 눌렀을때 새로 만든 뷰를 띄워야 한다. 뷰에서 유저 액션이 발생하면 직접 처리하는것이 아닌 Presentable Listener로 .. 패캠 Ribs 정리 05. 복잡한 뷰 만들기 이제 카드 선택 영역을 생성할 차례이다. CardOnFileDashboard 리블렛을 생성한다. 잔액 영역처럼 리블렛을 연결한다. https://github.com/csh8130/MiniSuperApp-fastcampus/commit/7cb136d1348868f476cc889402f9181c3fce831f 뷰를 구성할 때 헤더 영역은 잔액 영역과 동일하므로 복사해서 재활용하도록 한다. https://github.com/csh8130/MiniSuperApp-fastcampus/commit/d9a5aad50f1c911d489d1983569ece12de4a5c51 카드 목록 마지막에 항상 나타나는 + 버튼을 추가한다. https://github.com/csh8130/MiniSuperApp-fastcampus/.. 패캠 Ribs 정리 04. 복잡한 뷰 만들기 리블렛을 붙였으니 잔고 영역의 뷰를 먼저 생성한다. https://github.com/csh8130/MiniSuperApp-fastcampus/commit/edd0c8c977330efddcf97c285c80e587d5e5e633 https://github.com/csh8130/MiniSuperApp-fastcampus/commit/68616f670b7bf85a9cb0f185482b64696dcb1ebc https://github.com/csh8130/MiniSuperApp-fastcampus/commit/43aaa224578c22303c00ecad985f5152cf75c9d7 임의로 금액은 10000원을 넣었다. 이제 실제 잔액을 어디선가 받아와서 채워넣는 비즈니스 로직을 구현할 차례이다. 우선 잔액은 .. 패캠 Ribs 정리 03. 복잡한 뷰 만들기 FinanceHome 화면에서 잔고, 카드 및 계좌 영역은 각각을 리블렛으로 분리해서 만들 예정이다. FinanceHome 화면의 기능들을 하나의 리블렛으로 구성할 수도 있지만, massive ribs 로 가지 않는법을 배우기 위해 작게 쪼개서 구성하게 된다. - 잔고(SuperPayDashboard) 화면 생성 FinanceHome아래에 SuperPayDashboard 그룹을 만들고 리블렛 템플릿을 생성한다. 리플렛을 작업하는 순서는 정해져있지않지만 UI를 먼저 붙여서 자리잡는 것 부터 진행하자. 1) 부모가 될 FinanceHome의 ViewController에 stackView를 먼저 추가한다. https://github.com/csh8130/MiniSuperApp-fastcampus/commit/.. 이전 1 2 다음
