📌 이번 글에서는 PostListPage를 구성하고, AutoDisposeNotifier를 사용하여 게시글 목록을 효율적으로 관리하는 방법을 다룹니다.게시글을 불러오고, 리스트를 렌더링하며, 사용자 경험을 개선하기 위해 PostListItem을 활용합니다.또한, 뷰모델을 AutoDisposeNotifier로 구현하여 불필요한 상태 유지 및 메모리 누수를 방지하는 방법을 살펴봅니다.1️⃣ 게시글 모델링 (User, Post, PostList)📌 User 모델게시글의 작성자를 나타내는 모델입니다.// 게시글 주인이 누구인가? --> User 모델 정의// 인증 여부는 SessionUser 로 진행할 예정class User { int? id; String? username; String? imgUrl..

📌 pull_to_refresh 라이브러리 적용 (새로고침 & 무한 스크롤)이번 글에서는 pull_to_refresh 라이브러리를 활용하여 게시글 목록에서 새로고침(Pull-to-Refresh)과 무한 스크롤(Pagination) 기능을 적용합니다.사용자가 화면을 아래로 당기면 새로고침되어 최신 데이터를 가져오고,스크롤을 끝까지 내리면 추가 데이터를 자동으로 로드하는 기능을 구현합니다.또한 메모리 누수(Memory Leak) 방지를 위해 dispose()를 활용하는 방법도 설명합니다.1️⃣ pull_to_refresh 라이브러리 설치 및 설정Flutter에서 pull_to_refresh 라이브러리를 사용하면 ListView에서 쉽게 새로고침 기능을 추가할 수 있습니다.아래로 스와이프 시 새로고침 (Pu..

📌 이번 글에서는 게시글 작성 기능을 구현합니다.커스텀 위젯(CustomTextFormField, CustomTextArea)을 활용하여 게시글 입력 UI를 만듭니다.PostWriteViewModel을 사용하여 게시글 등록 기능을 구현하고 상태를 관리합니다.게시글 작성 완료 후 자동으로 입력 필드 초기화 및 피드백 메시지 표시 기능을 추가합니다.디자인 시안 1️⃣ 게시글 목록 인증 없이 확인게시글 목록을 인증 없이 확인할 수 있는 API 엔드포인트입니다.📌 URI: http://localhost:8080/init/post이 API를 사용하여 기본적인 게시글 목록을 가져올 수 있습니다.2️⃣ Custom 위젯 만들기 (입력 필드, 텍스트 영역)게시글 작성 화면에서 사용할 입력 필드(CustomTextF..

이번 글에서는 게시글 관리 기능과 로그아웃 처리를 다룹니다.PostRepository를 생성하여 게시글 조회, 등록, 수정, 삭제 기능을 구현합니다.CustomDrawer를 활용하여 로그아웃 기능을 추가합니다.SessionGVM에서 로그아웃 로직을 구현하여 JWT 토큰을 삭제하고 로그인 페이지로 이동합니다.🛠 Flutter 가상 디바이스 메모리 최적화 Gradle 빌드 시 메모리 사용량을 줄여 성능을 최적화하고 OOM(Out Of Memory) 오류를 방지합니다. 📌 변경 전 (메모리 사용량 높음)android/gradle.properties기존 설정: (메모리 사용량 높음)org.gradle.jvmargs=-Xmx4G -XX:MaxMetaspaceSize=2G -XX:+HeapDumpOnOutOfM..

이번 글에서는 Flutter 블로그 프로젝트의 자동 로그인 기능을 구현합니다.앱을 실행할 때 저장된 JWT 토큰을 이용하여 자동 로그인을 시도하고, 로그인 상태에 따라 적절한 화면으로 이동하는 흐름을 구축합니다.1. 자동 로그인 개념 및 흐름일반적으로 사용자는 앱을 실행할 때마다 로그인하기를 원하지 않습니다.따라서, JWT 토큰을 저장하고 이를 이용하여 자동 로그인하는 기능을 구현합니다. 📌 자동 로그인 과정앱 실행 시 저장된 JWT 토큰을 가져옴토큰이 존재하면 서버로 인증 요청을 보냄인증이 성공하면 자동 로그인 처리 및 홈 화면 이동인증이 실패하면 로그인 페이지로 이동토큰이 없다면 로그인 페이지로 이동2. UserRepository에서 자동 로그인 요청 처리자동 로그인을 위해 JWT 토큰을 서버로 전..

이번 글에서는 Flutter 블로그 회원가입 기능을 구현합니다.서버 요청, 상태 관리(Riverpod), 예외 처리를 적용하여 안정적인 회원가입 흐름을 만듭니다.1. 회원가입 기능 설계회원가입 요청을 보낼 때 어떤 변수가 필요할까요?뷰모델(SessionGVM)에서 회원가입을 처리하며, 다음과 같은 기능을 수행합니다.📌 뷰모델의 역할회원 정보 관리회원가입 시 입력된 username, email, **password**를 관리합니다.회원가입 요청 처리서버에 회원가입 요청을 보내고, 성공하면 로그인 페이지로 이동합니다.예외 처리네트워크 오류, 서버 에러 등을 처리하여 사용자에게 알림을 제공합니다.2. UserRepository에서 회원가입 요청 처리UserRepository는 서버 API와 통신하는 역할을 ..

이번 글에서는 Flutter에서 로그인 기능 구현을 다룹니다.특히, **상태 관리(Riverpod)**를 활용하여 로그인 상태를 유지하고, **예외 처리(ExceptionHandler)**를 적용하여 보다 안전한 로그인 프로세스를 구축합니다.1. 로그인 기능 설계로그인 요청을 보낼 때 어떤 변수가 필요할까?뷰모델(SessionGVM)에서 세션 유저(SessionUser)를 관리하며, 다음과 같은 기능을 수행합니다. 📌 뷰모델의 역할세션관리 : 현재 로그인된 사용자 정보(ID, username, accessToken, 로그인 여부)를 저장로그인 처리: 서버에 로그인 요청을 보내고, 성공 시 JWT 토큰을 저장하고 상태를 유지예외 처리: 네트워크 오류, 서버 에러 등을 처리하여 사용자에게 알림.2. 상태 ..

이번 글에서는 Flutter 블로그 프로젝트에서 Dio를 활용한 서버 통신 구현을 다룹니다.서버와 데이터를 주고받기 위한 Dio 설정, UserRepository 설계, 테스트 코드 작성까지 모든 과정을 설명과 함께 정리합니다.1. 사전 지식: JSON과 Flutter의 데이터 처리서버와 통신할 때 주로 사용하는 데이터 형식인 JSON을 Flutter에서 처리하는 방법을 먼저 이해해 봅시다.  JSON 데이터의 두 가지 타입  JSON Object{ "status": "success", "users": [ { "username": "ssar", "password": 1234 }, { "username": "cos", "password": 5678 } ]}JSON Object는 Map 구조..