전체 글 (30) 썸네일형 리스트형 [Flutter_개발] 책 검색앱 개념복습 이번 학습에서는 Flutter로 책검색 앱(Book Search App) 을 구현하며앱 구조 설계, 상태관리, 데이터 흐름, API 연동의 핵심 개념을 중심으로 학습했다.1. MVVM 아키텍처의 이해프로젝트를 MVVM(Model–View–ViewModel) 구조로 구성했다.Model : 데이터 구조 정의 및 JSON 변환 (Book 클래스)Repository : 외부 API 통신과 데이터 가공 담당 (BookRepository)ViewModel : 비즈니스 로직과 상태 관리 (HomeViewModel)View(UI) : 사용자 인터페이스 및 데이터 표시 (HomePage, DetailPage)이 구조를 통해 UI와 데이터 로직을 분리하여 유지보수성과 확장성을 높였다.2. Riverpod 기반 상태관리Ri.. [Flutter_개발] Flutter 상태 관리 방식 비교 (Riverpod 중심) 이번 학습에서는 Flutter에서 사용되는 다양한 상태 관리(State Management) 방식들을 비교하며, 특히 Riverpod의 개념과 특징을 중심으로 정리했다. 각 방식의 구조적 차이와 장단점을 이해함으로써, 프로젝트의 규모와 목적에 따라 적절한 방법을 선택할 수 있도록 하는 것이 목표였다.1. Riverpod의 개념Riverpod은 Flutter의 대표적인 상태 관리 라이브러리 중 하나로, 기존 Provider의 단점을 개선한 진화된 형태이다. BuildContext에 의존하지 않으며, 전역적으로 상태를 읽고 관리할 수 있다. 컴파일 타임에 오류를 잡아주기 때문에 타입 안정성이 높고, 테스트와 유지보수가 용이하다.주요 특징BuildContext 의존 없음컴파일 타임 안정성Hot Reload 안.. [Flutter_개발] 책 검색 앱 만들기 이번 학습에서는 Flutter를 활용한 책검색 앱(Book Search App) 개발을 통해UI 구성부터 Open API 연동, ViewModel 설계, 데이터 바인딩까지 전 과정을 익혔다.1. 프로젝트 구조 세팅 및 Riverpod 적용flutter_book_search_app 프로젝트를 생성하고, MVVM 구조로 폴더를 나누었다.data/ : 모델(model/)과 레포지토리(repository/)ui/ : 페이지(pages/)와 공용 위젯(widgets/)main.dart에서는 ProviderScope로 앱 전체를 감싸 Riverpod 상태관리를 적용했다.void main() { runApp(const ProviderScope(child: MyApp()));}class MyApp extends St.. [Flutter_개발] Flutter 숙련 이론 강의 정리 1. 데이터 통신의 기초와 JSON서버와 앱 간의 데이터 교환은 직렬화(Serialization) 과정을 통해 이루어진다.직렬화(Serialization): Dart 객체 → Map → JSON 문자열로 변환역직렬화(Deserialization): JSON 문자열 → Map → Dart 객체로 변환이 과정을 통해 서로 다른 언어로 작성된 시스템(예: Java 서버와 Flutter 클라이언트) 간에도 데이터를 주고받을 수 있다챕터1-1 데이터 통신 기초와 JSON.JSON의 기본 구조는 {key: value} 쌍이며, value에는 다음 타입이 올 수 있다.String, Number, Boolean, Array, Object, nullDart에서는 dart:convert 패키지의 jsonEncode, js.. [Flutter_개발]Flutter Form의 validator 이해 및 활용 팀 프로젝트의 입력 검증 로직을 중심으로, Flutter Form에서 사용하는 validator의 동작 구조, 실행 순서, 활용 패턴을 자세히 학습했다. 단순히 문법을 아는 것을 넘어, 실제 폼 흐름 속에서 언제 실행되고 어떤 역할을 하는지 체계적으로 정리했다.1. validator의 역할입력값 검증 로직을 정의하는 함수.반환값이 null이면 “유효”, 문자열이면 “에러 메시지”.FormState.validate()가 호출될 때 모든 필드의 validator가 실행된다.autovalidateMode를 통해 입력 중 자동 검증(onUserInteraction 등)도 가능하다. validator: (v) { if (v == null || v.trim().isEmpty) return '값을 입력해 주세요.'.. [Flutter_개발] 상품 등록 페이지 최종 핵심 코드/개념 정리1) Form과 검증GlobalKey로 폼 전체를 제어하고, TextFormField/FormField의 validator로 필드별 검증을 수행.제출 전 FocusScope.of(context).unfocus()로 키보드 내리고, formKey.currentState?.validate()로 일괄 검사.final _formKey = GlobalKey();// ...final valid = _formKey.currentState?.validate() ?? false;if (!valid) return;2) 커스텀 FormField로 이미지 필수 처리이미지 선택은 일반 위젯이기 때문에, **별도의 FormField**로 감싸 validator를 붙임.GlobalKey>를 사용해 다이얼로그에서.. [Flutter_개발] 상품 등록 페이지 수정 사항 1) 이미지 선택을 FormField로 편입하여 검증 일원화변경 전: _submit() 내부에서 이미지 미선택 시 SnackBar로 경고 후 return.변경 후: 이미지 섹션을 FormField로 감싸고 validator에 편입.장점: 다른 TextFormField들과 동일한 방식으로 검증됨. 에러가 버튼/미리보기 바로 아래 빨간 텍스트로 표시되어 시인성 증가.이미지 선택 시 didChange 호출로 에러 즉시 해제.FormField( key: _imageFieldKey, validator: (_) => _imageSelection == null ? '이미지를 등록해 주세요.' : null, builder: (field) { /* ... FilledButton, 미리보기, 에러텍스트 ... */ .. [Flutter_개발] 상품등록 페이지 구현 오늘은 Flutter에서 상품 등록 페이지를 구현하며 입력 검증, 상태 관리, Navigator를 통한 화면 전환, 그리고 데이터 전달 흐름을 학습했다.1. 핵심 구현 기능상단바(AppBar)에 뒤로가기 버튼과 제목(‘상품 등록’)을 추가했다.이미지 선택 버튼을 누르면 AlertDialog 팝업이 나타나고, ‘텍스트로 표시’ 또는 ‘샘플 이미지 사용(picsum)’을 선택할 수 있다.이미지 선택 결과는 _imageSelection 변수('text', 'network', null)로 관리된다.ImagePreview 위젯에서 선택된 상태에 따라 표시 내용이 달라진다.'text': “이미지 선택됨” 텍스트 표시'network': Image.network로 샘플 이미지 표시null: “이미지가 선택되지 않았습니.. 이전 1 2 3 4 다음