본문 바로가기

전체 글72

[Flutter] Bloc 상태관리: 이벤트 기반 구조로 상태 다루기 Flutter 상태관리에서 Bloc은 이벤트를 통해서만 상태를 변경하는 방식 입니다. 이번에는 코드를 통해 Bloc의 이벤트 기반 구조와 작동 방식을 공부해 보겠습니다.Bloc의 이벤트 중심 구조Bloc에서는 상태를 직접 변경하지 않고 "이벤트"를 통해서만 변경합니다.사용자 액션 → 이벤트 발송 → Bloc 처리 → 새로운 상태 → UI 업데이트1. 이벤트 정의: 무엇이 일어날 수 있는가sealed class CounterEvent {}final class CounterUpEvent extends CounterEvent {}final class CounterDownEvent extends CounterEvent {}sealed class의 특징CounterEvent 추상 클래스:sealed: 이 파일에서.. 2025. 6. 27.
[Flutter] Riverpod 상태관리:: 구조화된 접근법과 타입 안전성 Flutter 상태관리에서 Riverpod을 실제 코드를 통해 Riverpod을 공부해보겠습니다.Riverpod의 구조적 접근Riverpod은 상태 관리를 여러 레이어로 명확히 분리합니다. 각 요소가 어떤 역할을 하는지 살펴보겠습니다.1. 상태 클래스: 데이터 구조 정의class CounterState { int count = 0; CounterState({required this.count});}이 접근법의 장점은 상태의 구조가 명확해진다는 점입니다. CounterState만 보면 이 기능이 어떤 데이터를 관리하는지 즉시 알 수 있어요.2. Notifier: 로직과 상태 변경class RiverpodCounterNotifier extends Notifier { // 로직 void countUp(.. 2025. 6. 27.
[Flutter] GetX 상태관리: 반응형 프로그래밍 지금까지 StatefulWidget → MVVM ChangeNotifier → Provider 순으로 상태관리를 공부해봤는데이번에는 GetX 라이브러리를 통해 반응형 프로그래밍을 경험해보고, 상태관리가 얼마나 간단해질 수 있는지 알아보겠습니다!이전 방식들의 공통된 아쉬움Provider까지의 패턴들// ChangeNotifier 기반 (MVVM, Provider 공통)class CounterViewModel extends ChangeNotifier { int count = 0; void countUp() { count = count + 1; notifyListeners(); // 🤔 이걸 매번 호출해야 함 } void countDown() { count = count - 1.. 2025. 6. 27.
[Flutter] Provider 상태관리:: ChangeNotifier를 더 체계적으로 이전 포스트에서는 MVVM ChangeNotifier 패턴으로 화면과 로직을 분리하는 방법을 배웠습니다. 하지만 코드를 작성하면서 "ViewModel을 직접 생성해야 하고, ListenableBuilder가 조금 번거롭다"는 점이 약간의 아쉬움이 있었습니다. 오늘은 Provider 라이브러리를 도입해서 공부하고, ChangeNotifier를 더 깔끔하게 관리해보겠습니다!MVVM ChangeNotifier의 아쉬움들class MvvmChangeNotifierHomePage extends StatelessWidget { MvvmChangeNotifierHomePage({super.key}); final viewModel = CounterViewModel(); // 매번 직접 생성해야 함 @ove.. 2025. 6. 27.
[Flutter] MVVM ChangeNotifier:: (화면) / (데이터, 로직) 따로 이번 포스트에서는 MVVM 패턴과 ChangeNotifier를 활용해서 책임을 깔끔하게 분리하는 방법을 알아보겠습니다. 코드가 얼마나 깔끔해지는지 직접 확인해보세요!StatefulWidget의 문제점 되짚어보기// 이전 방식: 모든 것이 한 곳에class _StateCounterHomePageState extends State { int count = 0; // 데이터 Widget build(BuildContext context) { ... } // 화면 onPressed: () { // 로직 setState(() { count++; }); }}문제점: 화면 + 데이터 + 로직이 모두 섞여있어서 유지보수가 어려움MVV.. 2025. 6. 27.
[Flutter] StatefulWidget:: 화면, 데이터, 로직을 한 번에 Flutter 개발을 시작하면서 가장 먼저 만나게 되는 것 중 하나가 바로 StatefulWidget입니다. 간단한 카운터 앱을 만들면서 "왜 이렇게 복잡하게 두 개의 클래스로 나뉘어져 있을까?" 궁금해하신 적 있으신가요? StatefulWidget이란 무엇인가?StatefulWidget은 변경 가능한 상태를 가지는 위젯입니다. 하지만 여기서 중요한 포인트가 있습니다.// StatefulWidget 클래스 자체는 불변(immutable)!class StateCounterHomePage extends StatefulWidget { const StateCounterHomePage({super.key}); @override State createState() => _StateCounterHomePageS.. 2025. 6. 27.
Dart 언어 기본기 배우기 https://www.inflearn.com/course/dart-%EC%96%B8%EC%96%B4-%EC%9E%85%EB%AC%B8 [지금 무료][코드팩토리] [입문] Dart 언어 4시간만에 완전정복 강의 | 코드팩토리 - 인프런코드팩토리 | , 개발에 대해 아무 것도 몰라도 괜찮아요 💁‍♀️내 손으로 앱 만들기 첫걸음! Dart 언어, 제대로 배워보자! 😎 [사진] iOS와 Android에서 앱을 개발할 수 있는 Flutter 프레임워크www.inflearn.com 인프런에서 flutter의 기본 dart언어 강의를 들었다. 강의를 들으면서 알게 된 내용 위주로 정리하려고 한다. 변수 ? 와 ! (nullable, non-nullable) Final과 Const공통점차이점final:- 할당.. 2025. 4. 28.
mixin, sealed, base 클래스 void main() {}// Mixin Class// 1) mixin은 extended나 with을 사용할 수 없다. 그렇기 때문에 mixin class도// 마찬가지로 사용 불가능하다// 2) 클래스는 on 키워드를 사용할 수 없다. 그렇기 때문에 mixin class도 on 키워드를 사용할 수 없다.mixin class AnimalMixin { String bar() { return '멍멍'; }}class Dog with AnimalMixin{}// sealed 클래스는 abstract이면서 final이다// 그리고 패턴매칭을 사용 할 수 있도록 해준다sealed class Person3 {}class Idol extends Person3 {}class Engineer extends.. 2025. 4. 25.
Record(튜플), Destructuring void main() { final result = nameAndAge({'name': '민지', 'age': 20}); print(result); print(result.$1); print(result.$2); print('---------------'); final result3 = getNewJeansWithType(); for (final item in result3) { print(item.$1); print(item.$2); } print(result3); print('---------------'); final result4 = getNewJeansWithType2(); for (final item in result4) { print(item.name);.. 2025. 4. 25.
Future, async, await, stream, listen, sink, yield void main() async { // Future - 미래 // 미래에 받아올 값? Future name = Future.value('브래드'); Future number = Future.value(1); Future isTrue = Future.value(true); final result1 = await addNumbers(1, 1); final result2 = await addNumbers(2, 2); print('result1: $result1'); print('result2: $result2'); print('result1 + result2 : ${result1 + result2}');}Future addNumbers(int number1, int number2) asyn.. 2025. 4. 25.