철철박사의 독학 코딩

UI 계층 테스트하기아키텍처가 잘 설계되었는지를 판단하는 한 가지 방법은 테스트하기가 얼마나 쉬운지를 보는 것이다. 뷰모델과 뷰는 입력값이 명확하게 정의되어 있기 때문에 그 의존성을 쉽게 모킹(mock)하거나 페이킹(fake)할 수 있으며, 유닛 테스트도 쉽게 작성할 수 있다. ViewModel 유닛 테스트뷰모델의 유일한 의존성은 리포지토리(또는 유즈케이스)이며, 리포지토리를 모킹하거나 페이킹하는 것이 유일한 사전 작업이다. 다음 테스트 예제에서는 FakeBookingRepository라는 페이크 객체를 사용한다.// home_screen_test.dartvoid main() { group('HomeViewModel tests', () { test('Load bookings', () { ..

앱 아키텍처에서 각 구성 요소는 명확한 통신 규칙을 따라야 한다.구성 요소가 다른 구성 요소와 통신할 수 있는가?구성 요소는 서로에게 무엇을 출력으로 노출하는가?특정 계층은 다른 계층과 어떻게 연결되어 있는가? 구성 요소 간의 의존성을 깔끔하게 유지하기 위해 아래 규칙이 적용된다:View - 오직 하나의 ViewModel만 알고 있음. 다른 레이어는 모름.ViewModel - 자신과 연결된 View는 알 필요 없음. 하지만 여러 Repository를 알고 있음.Repository - 여러 Service를 사용할 수 있음. 하지만 ViewModel에 대해서는 모름.Service - 여러 Repository에서 사용 가능, 하지만 Repository를 알지 못함.즉, 의존성은 아래 방향으로만 흐르고, 각 계..

데이터 계층데이터 계층은 앱의 ‘진실의 원천(source of truth)’ 역할을 함.모든 데이터는 이곳에서만 수정해야 함.외부 API와 통신하고, UI에 데이터를 제공하며, UI 이벤트에 따라 데이터를 수정하고 다시 API에 반영함. 구성 요소 2가지Repository (레포지토리)데이터의 진실된 상태를 유지사용자 이벤트에 따른 데이터 업데이트오프라인 기능을 지원할 경우 데이터 동기화, 재시도 로직 관리, 데이터 캐싱 등을 책임짐 Service (서비스)API(HTTP 서버 등)나 플러그인과 직접 통신하는 무상태 클래스부작용 없음, 순수하게 외부 데이터만 가져옴모든 외부 데이터는 반드시 서비스 클래스 내에서 가져와야 함 서비스 정의하기서비스는 무상태이며, 부작용이 없다. 오직 외부 API를 감싸는 역..

기본 개념각 기능의 UI계층은 View + ViewModel로 구성됨ViewModel: UI 상태 관리, 로직 처리View: UI 상태를 표시, ViewModel과 1:1 관계예: LogOutView, LogOutViewModel ViewModel 역할ViewModel은 UI 로직을 처리하는 역할 클래스도메인 모델 데이터를 입력받아 View가 사용할 수 있도록 UI 상태로 변환버튼 클릭 등의 이벤트 처리 로직 포함이벤트를 데이터 계층으로 전달하여 변화 유도 다음 코드는 HomeViewModel이다. 이 뷰모델은 데이터를 제공받기 위해 BookingRepository와 UserRepository에 의존한다.// home_viewmodel.dartclass HomeViewModel { HomeViewMod..

이제부터 플로터에 아키텍처를 적용해서 만든 예제 코드를 작성해 보자. Compass 앱이란?여행 일정을 만들고 예약할 수 있는 샘플 앱HTTP 서버 통신, 개발/운영 환경, 브랜드 스타일, 높은 테스트 커버리지 등 실제 앱처럼 구성됨MVVM 패턴 적용 이 사례에서 배우는 것들:MVVM 구조에서 repository와 service 사용법Command 패턴으로 안전하게 UI 업데이트하기ChangeNotifier / Listenable을 통한 상태 관리provider 패키지로 의존성 주입(DI) 구현테스트를 설정하는 방법대규모 플러터 앱에 적합한 효과적인 패키지 구조 패키지 구조구조 목적여러 개발자가 함께 작업할 때 충돌 최소화, 이해도 향상잘 정의된 아키텍처와 맞물려 코드 품질 향상 코드 구성 방식기능별 구..

목적이 가이드는 확장성, 유지보수성, 테스트 용이성을 높이기 위한 Flutter 앱 아키텍처의 모범 사례를 소개함.규칙이 아닌 가이드라인이므로, 필요에 따라 유연하게 적용해야 함. 기본 구조Flutter 앱은 크게 두 개의 계층으로 나뉨:UI 계층 (화면 구성, 사용자 입력 처리)데이터 계층 (데이터 처리 및 저장) 각 계층은 다음과 같은 구성 요소로 나뉘어 관리됨:View: UI 화면ViewModel: UI 로직 담당Repository: 데이터의 단일 진실 원천 (SSOT)Service: 외부 API나 플랫폼과의 연동 MVVM 패턴 적용MVVM은 애플리케이션 기능을 세 부분으로 분리하는 아키텍처 패턴이다.ModleViewModleViewView + ViewModel → UI 계층Repository + ..

플러터 앱 아키텍처 가이드아키텍처란?앱을 구조화하고, 조직화하며, 설계하는 방법팀과 프로젝트가 커져도 확장 가능하도록 만드는 것이 목적 왜 중요한가?유지보수 용이확장성 향상테스트 쉬움새 개발자도 빠르게 적응 가능사용자에게 더 나은 경험 제공 가이드에서 다루는 주요 내용의도적인 아키텍처의 이점공통 아키텍처 원칙플러터 팁의 권장 구조MVVM, 상태 관리, 의존성 주입안정적인 앱을 위한 디자인 패턴 관심사의 분리앱 기능을 모듈화하여 관리성과 유지보수성을 높이는 원칙UI 로직과 비즈니스 로직을 분리하는 것을 의미함이를 계층 형 아키텍처라고 함플러터에서는 위젯을 UI 계층으로 적용함재사용 가능하고, 최소한의 로직만을 포함한 간결한 위젯으로 작성해야 함 계층형 아키텍처(Layered architecture)앱을 역..

단위 테스트에서 웹 서비스나 데이터베이스에서 데이터를 가져오는 클래스에 의존할 때가 있습니다. 이는 다음과 같은 이유로 불편할 수 있습니다:실제 서비스나 데이터베이스를 호출하면 테스트 실행 속도가 느려집니다.테스트가 통과하더라도, 웹 서비스나 데이터베이스가 예상치 못한 결과를 반환하면 테스트가 실패할 수 있습니다. 이를 '불안정한 테스트(flaky test)'라고 합니다.실제 서비스나 데이터베이스를 사용하면 모든 성공 및 실패 시나리오를 테스트하기 어렵습니다.따라서 실제 웹 서비스나 데이터베이스에 의존하는 대신, 이러한 의존성을 "모킹(mock)"할 수 있습니다. 모킹은 실제 웹 서비스나 데이터베이스를 흉내 내어 상황에 따라 특정 결과를 반환할 수 있게 합니다. 일반적으로 클래스를 대체할 다른 클래스를 ..