코딩강의/shopping_list(플러터-유데미) (14) 썸네일형 리스트형 231. Using the FutureBuilder Widget *230강의는 요약부분이라 생략했음 1. FutureBuilder 위젯을 통해 미래 값을 가져오는 로직을 더 간략하게 작성할 수 있음 (해당 퓨처빌더는 노마드코더 웹툰만들기에도 쓰였으니 참고) 해당 강의에서는 FutureBuilder를 적용하면 여러 문제가 생긴다. 하지만 단순히 미래데이터를 가지고오는 오고 어떠한 변형이 없는 로직이면 적용하면 된다. (향 후 강의에 더 다룸) -grocery_list.dart https://github.com/academind/flutter-complete-guide-course-resources/blob/main/Code%20Snapshots/12%20Backend%20%26%20Http/10%20Alternative%20-%20FutureBuilder/lib/wid.. 229. Better Error Handling 1. 기존 에러 처리는 그 외의의 오만가지 에러들을 잡아낼 수가 없다. 그래서 try catch를 사용한다. - grocery_list.dart https://github.com/academind/flutter-complete-guide-course-resources/blob/main/Code%20Snapshots/12%20Backend%20%26%20Http/09%20Better%20Error%20Handling/lib/widgets/grocery_list.dart 1) try { final response = await http.get(url); if (response.statusCode >= 400) { setState(() { _error = 'Failed to fetch data. Please .. 228. Handling the "No Data" Case 1. 앱 재시작 후 첫 item 로딩할 때 null을 받으면(값이 없으면) 무한로딩에 걸린다. 이를 해결해보자. - grocery_list.dart https://github.com/academind/flutter-complete-guide-course-resources/blob/main/Code%20Snapshots/12%20Backend%20%26%20Http/08%20Handling%20the%20No%20Data%20Case/lib/widgets/grocery_list.dart 1) @override void initState() { super.initState(); _loadItems(); } void _loadItems() async { final url = Uri.https( 'flutter.. 227. Sending DELETE Requests 1. item을 삭제하는 기능을 활성해보자. - grocery_list.dart https://github.com/academind/flutter-complete-guide-course-resources/blob/main/Code%20Snapshots/12%20Backend%20%26%20Http/07%20Sending%20Delete%20Requests/lib/widgets/grocery_list.dart 1) void _removeItem(GroceryItem item) async { final index = _groceryItems.indexOf(item); setState(() { _groceryItems.remove(item); }); final url = Uri.https('fltter-pre.. 226. Error Response Handling 1. 백엔드 서버 데이터 주고 받을 시 에러 핸들링 하는 방법을 알아보자. - grocery_list.dart https://github.com/academind/flutter-complete-guide-course-resources/blob/main/Code%20Snapshots/12%20Backend%20%26%20Http/06%20Error%20Response%20Handling/lib/widgets/grocery_list.dart 1) String? _error; final response = await http.get(url); if (response.statusCode >= 400) { setState(() { _error = 'Failed to fetch data. Please try aga.. 225. Managing the Loading State 1. 로딩 부분을 추가해주자. 앱 재시작 후, 값을 불러올때 필요한 로딩 화면, 그리고 newItem 화면에서 값을 파베로 보낼 때 필요한 로딩 화면을 꾸며주자. - grocery_list.dart import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; import 'package:shopping_list/data/categories.dart'; import 'package:shopping_list/models/grocery_item.dart'; import 'package:shopping_list/widgets/new_item.dart'; class GroceryList e.. 224. Avoiding Unnecessary Requests 1. 기존에 중복 요청한게 있었다. new_item 화면에서 post로 값을 받은거를 response로 저장해둔거 1회, grocery_list화면에서 get으로 받은거 2회 중복 이를 new_item에서 받은 body값을 pop을 통해 grocery_list로 전달해줌으로써 중복을 제거하자. - new_item.dart import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; import 'package:shopping_list/data/categories.dart'; import 'package:shopping_list/models/category.dart'; import .. ~223. Fetching & Transforming Data 1. 값을 파이어베이스로(백엔드)로 보내고, 다시 받아오는 과정을 알아보자. - new_item.dart import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; import 'package:shopping_list/data/categories.dart'; import 'package:shopping_list/models/category.dart'; class NewItem extends StatefulWidget { const NewItem({super.key}); @override State createState() { return _NewItemState(); } } cl.. ~221. Sending a POST Request to the Backend 1. firebase의 db를 사용해보자. 파이어베이스 회원가입을 하고, 빌드 -> 리얼타임데이터베이스에서 생성하면 되고 처음에는 테스트모드로 만들어보자. 먼저 파이어베이스와 송신하기 위해 아래 http 패키지를 다운받자. https://pub.dev/packages/http/install - new_item.dart import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; import 'package:shopping_list/data/categories.dart'; import 'package:shopping_list/models/category.dart'; class New.. ~214. Final Challenge Solution 1. 값을 저장하고, 다른 화면에 그 값을 넘겨주는 것을 배워보자. 2. 손으로 휘리릭해서 항목 지워보는 것을 배워보자. - new_item.dart import 'package:flutter/material.dart'; import 'package:shopping_list/data/categories.dart'; import 'package:shopping_list/models/category.dart'; import 'package:shopping_list/models/grocery_item.dart'; class NewItem extends StatefulWidget { const NewItem({super.key}); @override State createState() { return _NewI.. 이전 1 2 다음
