<\/p>\n
\ubcf8 \uac15\uc88c\uc5d0\uc11c\ub294 \ud50c\ub7ec\ud130\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub0a0\uc528 \uc571\uc744 \uc644\uc131\ud558\ub294 \ub9c8\uc9c0\ub9c9 \ub2e8\uacc4\ub97c \uc9c4\ud589\ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc774\ubc88 \uc139\uc158\uc5d0\uc11c\ub294 \uc571\uc758 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4(UI) \ucd5c\uc801\ud654, \ub370\uc774\ud130 \ucc98\ub9ac \ubc0f API \uc5f0\ub3d9 \ub4f1 \uc5ec\ub7ec \uac00\uc9c0 \uc911\uc694\ud55c \uc694\uc18c\ub97c \ub2e4\ub8f0 \uac83\uc785\ub2c8\ub2e4. \uc774 \ubaa8\ub4e0 \uacfc\uc815\uc740 \uc0ac\uc6a9\uc790\uc5d0\uac8c \ubcf4\ub2e4 \ub098\uc740 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud558\uae30 \uc704\ud55c \uac83\uc785\ub2c8\ub2e4.<\/p>\n
\uba3c\uc800, \ud504\ub85c\uc81d\ud2b8\uac00 \uc62c\ubc14\ub974\uac8c \uc124\uc815\ub418\uc5b4 \uc788\ub294\uc9c0 \ud655\uc778\ud569\ub2c8\ub2e4. \ud50c\ub7ec\ud130 SDK\uc640 \ud568\uaed8 Android Studio \ub610\ub294 Visual Studio Code\ub97c \uc124\uce58\ud588\ub294\uc9c0 \ud655\uc778\ud558\uc138\uc694. \ub610\ud55c, Flutter \ud658\uacbd\uc774 \uc62c\ubc14\ub974\uac8c \uad6c\uc131\ub418\uc5b4 \uc788\ub294\uc9c0 \ud655\uc778\ud558\ub824\uba74 \ud130\ubbf8\ub110\uc5d0\uc11c \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uc138\uc694:<\/p>\n
flutter doctor<\/code><\/pre>\n\uc774 \uba85\ub839\uc5b4\ub294 \uc124\uc815\ub41c \ubaa8\ub4e0 \ud658\uacbd\uc744 \uac80\uc0ac\ud558\uace0, \ud544\uc694\ud55c \ucd94\uac00 \uc124\uc815\uc774 \uc788\ub294\uc9c0 \uc54c\ub824\uc90d\ub2c8\ub2e4.<\/p>\n
API \uc5f0\ub3d9\ud558\uae30<\/h2>\n
\ub0a0\uc528 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ud575\uc2ec\uc740 \ub370\uc774\ud130 \uc18c\uc2a4\uc785\ub2c8\ub2e4. OpenWeatherMap API\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc2e4\uc2dc\uac04 \ub0a0\uc528 \ub370\uc774\ud130\ub97c \uac00\uc838\uc62c \uac83\uc785\ub2c8\ub2e4. API \ud0a4\ub97c \uc5bb\uae30 \uc704\ud574 OpenWeatherMap \uc6f9\uc0ac\uc774\ud2b8\uc5d0 \uac00\uc785\ud558\uace0, \ud0a4\ub97c \ubc1c\uae09\ubc1b\uc73c\uc138\uc694.<\/p>\n
API\ub97c \ud638\ucd9c\ud558\uae30 \uc704\ud574 http \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud560 \uac83\uc785\ub2c8\ub2e4. \ub2e4\uc74c \uba85\ub839\uc5b4\ub85c http \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ucd94\uac00\ud558\uc138\uc694:<\/p>\n
flutter pub add http<\/code><\/pre>\n\uadf8 \ub2e4\uc74c, HTTP \uc694\uccad\uc744 \ubcf4\ub0b4\ub294 \ud568\uc218\ub97c \uad6c\ud604\ud569\ub2c8\ub2e4:<\/p>\n
import 'package:http\/http.dart' as http;\n\nFuture fetchWeatherData(String city) async {\n final apiKey = 'YOUR_API_KEY';\n final url = 'https:\/\/api.openweathermap.org\/data\/2.5\/weather?q=$city&appid=$apiKey&units=metric';\n final response = await http.get(Uri.parse(url));\n\n if (response.statusCode == 200) {\n \/\/ \ub370\uc774\ud130 \ucc98\ub9ac \ub85c\uc9c1\n } else {\n throw Exception('Failed to load weather data');\n }\n}<\/void><\/code><\/pre>\n\ub370\uc774\ud130 \ubaa8\ub378\ub9c1<\/h2>\n
\ub0a0\uc528 \ub370\uc774\ud130\ub97c \ubaa8\ub378\ub9c1\ud558\uae30 \uc704\ud574, JSON \ub370\uc774\ud130\ub97c \ud574\ub2f9 \ud074\ub798\uc2a4\uc5d0 \ub9e4\ud551\ud560 \uc218 \uc788\ub3c4\ub85d \ubaa8\ub378 \ud074\ub798\uc2a4\ub97c \ub9cc\ub4e4\uc5b4\uc57c \ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4:<\/p>\n
class Weather {\n final String cityName;\n final double temperature;\n final String description;\n\n Weather({required this.cityName, required this.temperature, required this.description});\n\n factory Weather.fromJson(Map json) {\n return Weather(\n cityName: json['name'],\n temperature: json['main']['temp'],\n description: json['weather'][0]['description'],\n );\n }\n}<\/string,><\/code><\/pre>\n\uc0c1\ud0dc \uad00\ub9ac<\/h2>\n
\ud50c\ub7ec\ud130\uc5d0\uc11c\ub294 \ub2e4\uc591\ud55c \uc0c1\ud0dc \uad00\ub9ac \ubc29\ubc95\uc774 \uc874\uc7ac\ud569\ub2c8\ub2e4. \uc774 \uc608\uc81c\uc5d0\uc11c\ub294 Provider \ud328\ud134\uc744 \uc0ac\uc6a9\ud560 \uac83\uc785\ub2c8\ub2e4. Provider \ud328\ud0a4\uc9c0\ub97c \ucd94\uac00\ud558\uace0, WeatherProvider \ud074\ub798\uc2a4\ub97c \uad6c\ud604\ud558\uaca0\uc2b5\ub2c8\ub2e4:<\/p>\n
import 'package:flutter\/material.dart';\n\nclass WeatherProvider with ChangeNotifier {\n Weather? _weather;\n\n Weather? get weather => _weather;\n\n Future getWeather(String city) async {\n \/\/ API \ud638\ucd9c \ubc0f \ub370\uc774\ud130 \uac00\uc838\uc624\uae30\n final data = await fetchWeatherData(city);\n _weather = Weather.fromJson(data);\n notifyListeners();\n }\n}<\/void><\/code><\/pre>\nUI \uad6c\ucd95<\/h2>\n
\uc774\uc81c \uac00\uc7a5 \uc911\uc694\ud558\uace0\ub3c4 \ud765\ubbf8\ub85c\uc6b4 \ubd80\ubd84\uc778 UI\ub97c \uad6c\ud604\ud558\uaca0\uc2b5\ub2c8\ub2e4. Flutter\uc758 \uc704\uc82f\uc744 \uc0ac\uc6a9\ud558\uc5ec \uac04\ub2e8\ud558\uba74\uc11c\ub3c4 \uc9c1\uad00\uc801\uc778 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uae30\ubcf8 \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n
Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: Text('\ub0a0\uc528 \uc571'),\n ),\n body: Center(\n child: Column(\n mainAxisAlignment: MainAxisAlignment.center,\n children: [\n Text('\ub3c4\uc2dc\uba85: ${weatherProvider.weather?.cityName}'),\n Text('\uc628\ub3c4: ${weatherProvider.weather?.temperature}\u00b0C'),\n Text('\uc0c1\ud0dc: ${weatherProvider.weather?.description}'),\n ],\n ),\n ),\n );\n}<\/code><\/pre>\n\uc0c1\ud0dc \uc5c5\ub370\uc774\ud2b8<\/h2>\n
UI\ub294 \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \uc5c5\ub370\uc774\ud2b8 \ub418\uc5b4\uc57c \ud569\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574 Provider\uc758 Consumer \uc704\uc82f\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc0c1\ud0dc \ubcc0\uacbd\uc744 \uac10\uc9c0\ud558\uace0 UI\ub97c \ub2e4\uc2dc \ube4c\ub4dc\ud569\ub2c8\ub2e4:<\/p>\n
Consumer(\n builder: (context, weatherProvider, child) {\n if (weatherProvider.weather != null) {\n return WeatherDisplay(weather: weatherProvider.weather!);\n } else {\n return CircularProgressIndicator(); \/\/ \ub370\uc774\ud130 \ub85c\ub529 \uc911\n }\n },\n)<\/weatherprovider><\/code><\/pre>\n\ub9c8\ubb34\ub9ac \ubc0f \ube4c\ub4dc<\/h2>\n
\ubaa8\ub4e0 \ucf54\ub4dc\uac00 \uc791\uc131\ub418\uc5c8\ub2e4\uba74 \uc774\uc81c \uc571\uc744 \uc2e4\ud589\ud558\uace0 \uacb0\uacfc\ub97c \ud655\uc778\ud560 \ucc28\ub840\uc785\ub2c8\ub2e4. \ud130\ubbf8\ub110\uc5d0\uc11c \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud558\uc5ec \uc571\uc744 \uc2e4\ud589\ud558\uc138\uc694:<\/p>\n
flutter run<\/code><\/pre>\n\uc774\ub85c\uc368 \ud50c\ub7ec\ud130\ub97c \uc774\uc6a9\ud55c \uac04\ub2e8\ud55c \ub0a0\uc528 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \uc644\uc131\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ucd94\uac00\uc801\uc73c\ub85c, \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uac1c\uc120\ud558\uae30 \uc704\ud574 \ub2e4\uc591\ud55c \uae30\ub2a5\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uac80\uc0c9 \uae30\ub2a5, \uc704\uce58 \uae30\ubc18 \uc11c\ube44\uc2a4 \ub4f1\uc744 \ucd94\uac00\ud558\uc5ec \uc0ac\uc6a9\uc790\uac00 \ub354 \ud3b8\ub9ac\ud558\uac8c \ub0a0\uc528 \uc815\ubcf4\ub97c \ud655\uc778\ud560 \uc218 \uc788\ub3c4\ub85d \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uacb0\ub860<\/h2>\n
\ubcf8 \uac15\uc88c\ub97c \ud1b5\ud574 \ud50c\ub7ec\ud130\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub0a0\uc528 \uc571\uc744 \ub9cc\ub4dc\ub294 \uae30\ubcf8\uc801\uc778 \uacfc\uc815\uacfc \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4, API \uc0ac\uc6a9\ubc95, \uc0c1\ud0dc \uad00\ub9ac \ub4f1\uc744 \ubc30\uc6b8 \uc218 \uc788\uc5c8\uc2b5\ub2c8\ub2e4. \ub2e4\uc591\ud55c \uae30\ub2a5 \ucd94\uac00 \ubc0f \uac1c\uc120 \uc791\uc5c5\uc744 \ud1b5\ud574 \uc9c0\uc18d\uc801\uc73c\ub85c \ubc1c\uc804\ud558\ub294 \uc571\uc744 \ub9cc\ub4e4\uc5b4\ubcf4\uc138\uc694. \uac10\uc0ac\ud569\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"