UI 계층 테스트하기아키텍처가 잘 설계되었는지를 판단하는 한 가지 방법은 테스트하기가 얼마나 쉬운지를 보는 것이다. 뷰모델과 뷰는 입력값이 명확하게 정의되어 있기 때문에 그 의존성을 쉽게 모킹(mock)하거나 페이킹(fake)할 수 있으며, 유닛 테스트도 쉽게 작성할 수 있다. ViewModel 유닛 테스트뷰모델의 유일한 의존성은 리포지토리(또는 유즈케이스)이며, 리포지토리를 모킹하거나 페이킹하는 것이 유일한 사전 작업이다. 다음 테스트 예제에서는 FakeBookingRepository라는 페이크 객체를 사용한다.// home_screen_test.dartvoid main() { group('HomeViewModel tests', () { test('Load bookings', () { ..
플러터 앱 아키텍처 _ 6. 아키텍처 예제 _ 계층간 통신(의존성 주입)
앱 아키텍처에서 각 구성 요소는 명확한 통신 규칙을 따라야 한다.구성 요소가 다른 구성 요소와 통신할 수 있는가?구성 요소는 서로에게 무엇을 출력으로 노출하는가?특정 계층은 다른 계층과 어떻게 연결되어 있는가? 구성 요소 간의 의존성을 깔끔하게 유지하기 위해 아래 규칙이 적용된다:View - 오직 하나의 ViewModel만 알고 있음. 다른 레이어는 모름.ViewModel - 자신과 연결된 View는 알 필요 없음. 하지만 여러 Repository를 알고 있음.Repository - 여러 Service를 사용할 수 있음. 하지만 ViewModel에 대해서는 모름.Service - 여러 Repository에서 사용 가능, 하지만 Repository를 알지 못함.즉, 의존성은 아래 방향으로만 흐르고, 각 계..
플러터 앱 아키텍처 _ 5. 아키텍처 예제 _ 데이터 계층
데이터 계층데이터 계층은 앱의 ‘진실의 원천(source of truth)’ 역할을 함.모든 데이터는 이곳에서만 수정해야 함.외부 API와 통신하고, UI에 데이터를 제공하며, UI 이벤트에 따라 데이터를 수정하고 다시 API에 반영함. 구성 요소 2가지Repository (레포지토리)데이터의 진실된 상태를 유지사용자 이벤트에 따른 데이터 업데이트오프라인 기능을 지원할 경우 데이터 동기화, 재시도 로직 관리, 데이터 캐싱 등을 책임짐 Service (서비스)API(HTTP 서버 등)나 플러그인과 직접 통신하는 무상태 클래스부작용 없음, 순수하게 외부 데이터만 가져옴모든 외부 데이터는 반드시 서비스 클래스 내에서 가져와야 함 서비스 정의하기서비스는 무상태이며, 부작용이 없다. 오직 외부 API를 감싸는 역..
플러터 앱 아키텍처 _ 4. 아키텍처 예제 _ UI 계층
기본 개념각 기능의 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..
플러터 앱 아키텍처 _ 3. 아키텍처 예제 _ 개요
이제부터 플로터에 아키텍처를 적용해서 만든 예제 코드를 작성해 보자. Compass 앱이란?여행 일정을 만들고 예약할 수 있는 샘플 앱HTTP 서버 통신, 개발/운영 환경, 브랜드 스타일, 높은 테스트 커버리지 등 실제 앱처럼 구성됨MVVM 패턴 적용 이 사례에서 배우는 것들:MVVM 구조에서 repository와 service 사용법Command 패턴으로 안전하게 UI 업데이트하기ChangeNotifier / Listenable을 통한 상태 관리provider 패키지로 의존성 주입(DI) 구현테스트를 설정하는 방법대규모 플러터 앱에 적합한 효과적인 패키지 구조 패키지 구조구조 목적여러 개발자가 함께 작업할 때 충돌 최소화, 이해도 향상잘 정의된 아키텍처와 맞물려 코드 품질 향상 코드 구성 방식기능별 구..
플러터 앱 아키텍처 _ 2. 앱 아키텍처 가이드
목적이 가이드는 확장성, 유지보수성, 테스트 용이성을 높이기 위한 Flutter 앱 아키텍처의 모범 사례를 소개함.규칙이 아닌 가이드라인이므로, 필요에 따라 유연하게 적용해야 함. 프로젝트 구조 개요Flutter 앱은 크게 두 개의 계층으로 구성된다:UI 계층: 화면 구성 및 사용자 입력 처리데이터 계층: 데이터 처리 및 저장( 로직 계층은 선택사항으로 복잡한 앱에서 추가할 수 있음. 뒤에서 자세히 설명되어 있음 ) 계층 구성 요소각 계층은 다음과 같은 구성 요소로 나뉘어 관리된다:View: 실제 UI 화면ViewModel: UI 로직 담당Repository: 데이터의 단일 진실 공급원 (SSOT)Service: 외부 API나 플랫폼과의 연동 담당 MVVM 패턴 적용MVVM은 앱 기능을 세 부분으로 분..
플러터 앱 아키텍처 _ 1. 아키텍처 개념
플러터 앱 아키텍처 가이드아키텍처란?소프트웨어 시스템의 구조와 설계 원칙을 의미함소프트웨어를 어떻게 구성하고, 각 구성 요소가 어떻게 상호작용할지에 대한 큰 그림 아키텍처의 구성 요소계층 구조컴포넌트 간의 책임 분리 (예: 컨트롤러는 요청 처리, 모델은 데이터 처리)데이트 흐름 (어디서 데이터가 생성되고, 어떻게 전달되는지)모듈 간의 관계 및 의존성설계 원칙 (예: SOLID 원칙, 의존성 역전 등)왜 사용하는가?유지보수 용이성 : 기능 추가 / 변경 / 수정이 수워짐재사용성 증가 : 잘 나눈 모듈은 다른 프로젝트에서도 재사용할 수 있음협업 효율 증가 : 역할이 명확해서 여러 명이 동시에 작업해도 충돌이 적음테스트 용이성 : 각 구성 요소를 개별적으로 테스트하기 쉬움확장성 확보 : 서비스 규모가 커져도 ..