workspace_junsoo

게시글 생성 화면의 뷰 모델(PosCreateViewModel) 만들어 보자

기본 생성 화면import 'package:flutter/material.dart';class PostCreatePage extends StatefulWidget { const PostCreatePage({super.key}); @override State createState() => _PostCreatePageState();}class _PostCreatePageState extends State { @override Widget build(BuildContext context) { return const Placeholder(); }}ConsumerStatefulWidget 활용import 'package:flutter/material.dart';import 'package:flut..

PostDetailView 화면 완성 하기 - 11

PostListPage 에서 PostDetailPage 위젯 생성 : ListView.separated( itemBuilder: (context, index) { Post post = postList[index]; return ListTile( onTap: () { Navigator.push(context, MaterialPageRoute(builder: (context) { return PostDetailPage(postId: post.id); ..

PostDetailViewModel을 Provider 통해서 관리 해보자. - 10

lib/providers/state_noti_provider/post_detail_view_model_provider.dart​// 새로운 개념 추가import 'package:class_riverpod_mvvm/providers/provider/post_respisitory_provider.dart';import 'package:flutter_riverpod/flutter_riverpod.dart';import '../../models/post.dart';import '../../view_models/post_detail_view_model.dart';final postDetailViewModelProvider = StateNotifierProvider.family, int>((ref, postId)..

PostDetailViewModel 만들기(상세보기 화면 데이터 관리) - 9

PostListPage - onTab() 추가 onTap: () { Navigator.push(context, MaterialPageRoute(builder: (context) { return PostDetailPage(); })); }​​ PostDetailPage 기본 화면 설정import 'package:flutter/material.dart';class PostDetailPage extends StatelessWidget { const PostDetailPage({super.key}); @override Widget build(BuildContext context) { print("여기는 상세보기 화면 입니다..

PostListPage 화면을 만들어 보자 그런데 뷰 모델은 어떻게 가지고 올까? - 8

main.dartimport 'package:class_riverpod_mvvm/view/post/post_list_page.dart';import 'package:flutter/material.dart';import 'package:flutter_riverpod/flutter_riverpod.dart';// 우리 앱에서 사용하는 모든 Provider 를 하나의 컨테이너(ProviderContainer) 로 묶어 관리 합니다.void main() { runApp( const ProviderScope( child: MaterialApp( home: NovaBlog(), ), ), );}class NovaBlog extends StatelessWidget { c..

viewModel 을 관리하는 Provider 계열을 만들어 보자 - 7

import 'package:class_riverpod_mvvm/providers/provider/post_respisitory_provider.dart';import 'package:class_riverpod_mvvm/view_models/post_list_view_model.dart';import 'package:flutter_riverpod/flutter_riverpod.dart';import '../../models/post.dart';/// PostListViewModel 을 관리하는 프로바이더 생성 입니다.final postListViewModelProvider = StateNotifierProvider> ((ref) { final _postRepositoryImpl = ref.read(po..

화면의 데이터(상태)를 관리하는 PostListViewModel 을 먼저 만들어 보자. - 6

// 리버팟 중에 notifier 계열이 상태 관리를 담당해주는 클래스이다.import 'package:class_riverpod_mvvm/models/post.dart';import 'package:class_riverpod_mvvm/repository/post_repository.dart';import 'package:flutter_riverpod/flutter_riverpod.dart';// StateNotifier// 1. 멤버 변수로 T state 변수를 가지고 있다.// 2. 캡슐화에 핵심이다.class PostListViewModel extends StateNotifier> { // 통신 요청을 통해서 데이터를 가져오는 비즈니스 로직을 담당 시킬꺼다. final PostRepository..

PostRespository를 중앙에서(컨테이너) 관리하는 Provider 계열을 만들어 보자. - 5

ref는 다른 Provider에 쉽게 접근할 수 있는 역할을 합니다. ref는 Provider의 라이프사이클을 관리합니다.  ref.read(): 다른 Provider의 값을 읽을 때 사용. ref.watch(): 다른 Provider의 상태를 구독하고, 상태가 변경되면 자동으로 반응. ref.listen(): 상태가 변경될 때 특정 로직을 실행할 때 사용. // PostRepositoryImpl 인스턴스를 제공하는 Riverpod Provider 계열 입니다.// 컨테이너에 넣는 코드import 'package:class_riverpod_mvvm/providers/provider/dio_provider.dart';import 'package:class_riverpod_mvvm/repository/pos..

데이터 접근 계층인 PostRepository 만들어 봅시다. - 4

Repository라는 이름을 붙이는 이유는 데이터 접근 계층을 나타내기 위해서입니다. 주요 목적은? Repository는 API, 데이터베이스, 로컬 파일, 캐시(데이터 소스) 등에서 데이터를 동일한 인터페이스를 통해 접근할 수 있도록 해줍니다. 즉, 특정 데이터 소스에 종속되지 않고 일관된 방식으로 데이터를 사용할 수 있게 설계할 수 있습니다. 의존성 역전 원칙(Dependency Inversion Principle)을 실현 - DIP 상위 레벨의 비즈니스 로직(서비스 계층)이 하위 레벨의 데이터 접근 세부사항(API, 데이터베이스 등)에 직접적으로 의존하지 않고 Repository 인터페이스에 의존하게 됩니다.단일 책임 원칙(SRP) Repository는 데이터를 가져오거나 저장하는 하나의 책임만..

API에서 사용할 데이터 구조를 정의하기 위해 Post 클래스를 만들어 봅시다.(모델링 작업) - 3

API에서 받아올 데이터의 구조를 정의하고, 이를 Dart 객체로 변환하는 작업을 수행하자.Post 클래스를 정의하고, 이 클래스에서 JSON 데이터를 객체로 변환하는 메서드(fromJson)와 객체를 JSON으로 변환하는 메서드(toJson)를 구현을 해보자. ****import 'package:equatable/equatable.dart';/// Post 데이터를 표현하는 모델 클래스입니다./// 서버로부터 받은 JSON 데이터를 Dart 객체로 변환하거나,/// Dart 객체를 JSON으로 변환할 때 사용됩니다./// Equatable을 사용하여 값 기반 비교를 지원합니다.class Post extends Equatable { final int? userId; final int? id; fin..