전체 글 (28) 썸네일형 리스트형 Flutter MVVM Architecture 기능 개발을 우선으로 생각하고 개발한 결과, 가장 어려웠던 부분은 기능의 확장과 유지보수였다. 최근에는 이를 고려하여 MVVM 아키텍쳐를 적용하여 개발하기 위해 노력하고 있다. MVVM 이란? Model-View-ViewModel의 약자로 UI와 로직을 분리하여 프로그래밍하는 기법이다. MVVM을 사용하는 이유 - 각 영역마다 관심사를 분리하여 설계함으로써 코드의 복잡성이 감소하고, 유지보수성과 확장성이 증가한다. - View는 단순히 UI만 구성하는 코드를 작성할 수 있게되어 UI 변경 시 ViewModel에 영향이 가지 않는다. 이처럼 View와 ViewModel이 분리되기 때문에 ViewModel의 테스트가 용이해진다. View - 사용자에게 보여지는 UI 부분, 사용자의 동작이나 각종 처리를 Vi.. Flutter Mockito를 이용한 API 통신 Unit Test API 통신 기능을 unit test 할 때 실제 API를 호출하여 진행하면 몇 가지 문제가 있다. 실제 API를 요청하게 되면 test 성능이 저하될 수 있다. 서버의 이상 유무에 따라 응답 값이 달라질 수 있고, 이 경우 테스트가 실패하게 된다. 모든 성공, 실패를 테스트하기는 무리가 있다. 위와 같은 이유로 Flutter에서는 Mock 객체를 생성하여 다양한 케이스를 테스트할 수 있고, 이는 annotation과 code generation을 제공하는 mockito 패키지를 이용하여 진행하면 된다. Example Mockito Package https://pub.dev/packages/mockito mockito | Dart Package A mock framework inspired by Mock.. Flutter InheritedWidget https://api.flutter.dev/flutter/widgets/InheritedWidget-class.html InheritedWidget class - widgets library - Dart API Base class for widgets that efficiently propagate information down the tree. To obtain the nearest instance of a particular type of inherited widget from a build context, use BuildContext.dependOnInheritedWidgetOfExactType. Inherited widgets, when referenc api.flutter.dev 복잡한 구조의.. 뒤늦게 정리하는 Flutter riverpod 개념 공부를 하면서 새로 알게된 상태관리 플러그인 riverpod provider들의 개념 정리 riverpod Provider 종류 Provider 가장 베이스가 되는 Provider 아무 타입이나 반환 가능 반환 값을 캐싱할 때 많이 사용 여러 Provider를 묶어서 한번에 반환 값을 만들어낼 수 있다. StateProvider ui에서 직접적으로 데이터를 변경하고 싶을 때 사용 단순한 형태의 데이터 관리에 사용 StateNotifierProvider StateProvider와 마찬가지로 데이터를 직접적으로 변경하고 싶을 때 사용 복잡한 형태의 데이터를 관리할 수 있다. StateNotifier를 상속한 값을 반환한다. FutureProvider Future 타입만 반환 가능 복잡한 기능 또는 사용자의 .. Debounce와 Throttle 개발을 마치고 테스트를 하다보면 특정 함수가 중복으로 여러번 실행되는 경우가 있다. 지금까지는 함수 실행 사이에 일정 시간 간격을 두고 제한을 하는 등의 방법으로 해결했는데 더 좋은 방법을 알게 되었는데 바로 Debounce와 Throttle이다. 모두 특정 함수의 실행을 제한하는 기능을 제공한다. Debounce Debounce는 특정 기간 안의 함수 실행을 모두 제한하고 마지막에만 실행한다. https://rxmarbles.com/#debounce RxMarbles: Interactive diagrams of Rx Observables rxmarbles.com 위 이미지에서 첫번째 라인은 함수 실행 명령이고, 두번째 라인은 실제 실행 결과이다. duration 1초의 설정 값을 가진 함수는 1초 안에.. Flutter GoRouter로 페이지 관리하기 go_router 패키지는 구글 플러터 공식 패키지로 라우팅 관련한 기능들을 사용하기 쉽게 도와주는 패키지이다. https://docs.page/csells/go_router go_router docs.page Setting pubspec.yaml go_router: ^6.3.0 main.dart void main() { runApp(const _App()); } class _App extends StatelessWidget { const _App({Key? key}) : super(key: key); final GoRouter _router = GoRouter( initialLocation: "/", routes: [ GoRoute( path: "/", builder: (_, state) => Home.. Flutter [.mapIndexed()] method Flutter를 사용해서 개발을 하다보면 Iterable 클래스의 .map() 메서드를 리스트의 항목을 매핑하는데 유용하게 사용한다. 그런데 .map() 메서드는 대상 리스트의 항목만 파라미터로 받아오는데, 가끔 파라미터에 index도 있으면 편할 것 같은 상황이 있다. 예를 들면 특정 인덱스에 해당하는 항목에만 속성을 부여하고 싶을 때이다. 그럴 땐 collection.dart 파일을 import 하면 .mapIndexed() 메서드를 사용할 수 있다. import 'package:collection/collection.dart'; images.mapIndexed((index, element) => Padding( padding: EdgeInsets.only( right: index == images... Flutter Naver Login Android 이슈 flutter_naver_login을 이용하여 네이버 아이디로 로그인 기능을 구현했다. iOS에서는 문제없이 잘 동작했지만 안드로이드에서 lateinit property launcher has not been initialized ~ 라는 에러메시지를 출력하고 기능이 동작하지 않았다. 해결법은 public class MainActivity extends FlutterActivity 에서 public class MainActivity extends FlutterFragmentActivity 로 변경해주면 된다. 위에서 출력된 이슈는 해결되었지만 java.lang.IllegalStateException: You need to use a Theme.AppCompat theme ~ 라는 새로운 에러메시지가 출력.. 이전 1 2 3 4 다음
