{"id":25564,"date":"2024-10-26T13:50:56","date_gmt":"2024-10-26T13:50:56","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=25564"},"modified":"2024-11-26T08:01:21","modified_gmt":"2024-11-26T08:01:21","slug":"%ed%94%8c%eb%9f%ac%ed%84%b0-%ea%b0%95%ec%a2%8c-15-2-openweathermap-%ec%82%ac%ec%9a%a9%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/25564\/","title":{"rendered":"\ud50c\ub7ec\ud130 \uac15\uc88c, 15.2 OpenWeatherMap \uc0ac\uc6a9\ud558\uae30"},"content":{"rendered":"

\uc774\ubc88 \uc139\uc158\uc5d0\uc11c\ub294 OpenWeatherMap API<\/strong>\ub97c Flutter \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \ud1b5\ud569\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. OpenWeatherMap\uc740 \uc2e4\uc2dc\uac04 \ub0a0\uc528 \ub370\uc774\ud130, \uae30\uc628, \uc2b5\ub3c4, \ubc14\ub78c \uc18d\ub3c4 \ub4f1 \uc5ec\ub7ec \uac00\uc9c0 \uc720\uc6a9\ud55c \ub0a0\uc528 \uc815\ubcf4\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774 API\ub294 \ubb34\ub8cc \ubc0f \uc720\ub8cc \ud50c\ub79c\uc744 \uc81c\uacf5\ud558\uba70, \uc624\ub298\uc740 \ubb34\ub8cc \ud50c\ub79c\uc744 \uae30\uc900\uc73c\ub85c \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

1. OpenWeatherMap API \uac00\uc785 \ubc0f API \ud0a4 \uc5bb\uae30<\/h2>\n

\uccab \ubc88\uc9f8 \ub2e8\uacc4\ub294 OpenWeatherMap \uc6f9\uc0ac\uc774\ud2b8\uc5d0 \uac00\uc785\ud558\uc5ec API \ud0a4\ub97c \uc5bb\ub294 \uac83\uc785\ub2c8\ub2e4. \uc544\ub798\uc758 \ub2e8\uacc4\ub97c \ub530\ub77c\uc8fc\uc138\uc694:<\/p>\n

    \n
  1. OpenWeatherMap \uc6f9\uc0ac\uc774\ud2b8<\/a>\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.<\/li>\n
  2. \uc0c1\ub2e8 \uba54\ub274\uc758 “Sign Up”\uc744 \ud074\ub9ad\ud558\uc5ec \uacc4\uc815\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/li>\n
  3. \uc774\uba54\uc77c \uc8fc\uc18c\uc640 \ube44\ubc00\ubc88\ud638\ub97c \uc785\ub825\ud55c \ud6c4 \uac00\uc785 \uc808\ucc28\ub97c \uc644\ub8cc\ud569\ub2c8\ub2e4.<\/li>\n
  4. \ub85c\uadf8\uc778 \ud6c4 “API keys” \uba54\ub274\ub85c \uc774\ub3d9\ud558\uc5ec \uc790\ub3d9 \uc0dd\uc131\ub41c \uae30\ubcf8 API \ud0a4\ub97c \ud655\uc778\ud569\ub2c8\ub2e4.<\/li>\n
  5. \ud544\uc694\uc5d0 \ub530\ub77c \uc0c8 API \ud0a4\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ol>\n

    2. Flutter \ud504\ub85c\uc81d\ud2b8 \uc124\uc815<\/h2>\n

    \uc774\uc81c Flutter \ud504\ub85c\uc81d\ud2b8\ub97c \uc124\uc815\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc0c8\ub85c\uc6b4 Flutter \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud558\uac70\ub098 \uae30\uc874 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

    flutter create weather_app<\/code><\/pre>\n
    \ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud130\ub9ac\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4:<\/p>\n
    cd weather_app<\/code><\/pre>\n
    \ub2e4\uc74c\uc73c\ub85c, HTTP \uc694\uccad\uc744 \ubcf4\ub0b4\uae30 \uc704\ud574 \ud544\uc694\ud55c \ud328\ud0a4\uc9c0\ub97c pubspec.yaml \ud30c\uc77c\uc5d0 \ucd94\uac00\ud569\ub2c8\ub2e4:<\/p>\n
    dependencies:\n  flutter:\n    sdk: flutter\n  http: ^0.13.3\n<\/code><\/pre>\n
    \ubaa8\ub4e0 \uc758\uc874\uc131\uc744 \uc124\uce58\ud558\uae30 \uc704\ud574 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4:<\/p>\n
    flutter pub get<\/code><\/pre>\n
    3. \ub0a0\uc528 \ub370\uc774\ud130 \ubaa8\ub378 \uc0dd\uc131<\/h2>\n
    OpenWeatherMap API\uc5d0\uc11c \uc218\uc2e0\ubc1b\uc740 JSON \ub370\uc774\ud130\ub97c \ud559\uc2b5\ud558\uae30 \uc704\ud574 Dart \ubaa8\ub378 \ud074\ub798\uc2a4\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ub0a0\uc528 \ub370\uc774\ud130\ub97c \uc704\ud55c \ud074\ub798\uc2a4\ub97c \uc0dd\uc131\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
    class Weather {\n  final String city;\n  final double temperature;\n  final String description;\n\n  Weather({required this.city, required this.temperature, required this.description});\n\n  factory Weather.fromJson(Map json) {\n    return Weather(\n      city: json['name'],\n      temperature: json['main']['temp'] - 273.15, \/\/ \ucf08\ube48\uc744 \uc12d\uc528\ub85c \ubcc0\ud658\n      description: json['weather'][0]['description'],\n    );\n  }\n}\n<\/string,><\/code><\/pre>\n
    4. HTTP \uc694\uccad\uc73c\ub85c \ub0a0\uc528 \ub370\uc774\ud130 \uac00\uc838\uc624\uae30<\/h2>\n
    \uc774\uc81c \ub0a0\uc528 \uc815\ubcf4\ub97c \uac00\uc838\uc624\uae30 \uc704\ud574 HTTP \uc694\uccad\uc744 \uc791\uc131\ud560 \ucc28\ub840\uc785\ub2c8\ub2e4. http<\/strong> \ud328\ud0a4\uc9c0\ub97c \uc0ac\uc6a9\ud558\uc5ec OpenWeatherMap API\uc5d0 GET \uc694\uccad\uc744 \ubcf4\ub0c5\ub2c8\ub2e4.<\/p>\n
    \ub2e4\uc74c\uc740 \ub0a0\uc528 \uc815\ubcf4\ub97c \uac00\uc838\uc624\ub294 \ud568\uc218\ub97c \uc791\uc131\ud558\ub294 \uc608\uc81c\uc785\ub2c8\ub2e4:<\/p>\n
    import 'dart:convert';\nimport 'package:http\/http.dart' as http;\n\nFuture fetchWeather(String city) async {\n  final apiKey = 'YOUR_API_KEY_HERE'; \/\/ \uc5ec\uae30\uc5d0 \uadc0\ud558\uc758 API \ud0a4\ub97c \uc785\ub825\ud558\uc138\uc694\n  final response = await http.get(Uri.parse('https:\/\/api.openweathermap.org\/data\/2.5\/weather?q=$city&appid=$apiKey'));\n\n  if (response.statusCode == 200) {\n    return Weather.fromJson(json.decode(response.body));\n  } else {\n    throw Exception('Failed to load weather data');\n  }\n}\n<\/weather><\/code><\/pre>\n
    5. \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4 \uc791\uc131<\/h2>\n
    \uc774\uc81c \ub0a0\uc528 \uc815\ubcf4\ub97c \ud45c\uc2dc\ud558\uae30 \uc704\ud55c \uac04\ub2e8\ud55c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uc791\uc131\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. Flutter\uc758 \uad6c\uc131 \uc694\uc18c\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790\uac00 \uc785\ub825\ud55c \ub3c4\uc2dc \uc774\ub984\uc5d0 \ub530\ub77c \ub0a0\uc528 \uc815\ubcf4\ub97c \ud45c\uc2dc\ud569\ub2c8\ub2e4.<\/p>\n
    \ub2e4\uc74c\uc740 \uae30\ubcf8 UI \ucf54\ub4dc \uc608\uc81c\uc785\ub2c8\ub2e4:<\/p>\n
    import 'package:flutter\/material.dart';\n\nclass WeatherApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Weather App',\n      home: Scaffold(\n        appBar: AppBar(\n          title: Text('\ub0a0\uc528 \uc815\ubcf4'),\n        ),\n        body: WeatherInfo(),\n      ),\n    );\n  }\n}\n\nclass WeatherInfo extends StatefulWidget {\n  @override\n  _WeatherInfoState createState() => _WeatherInfoState();\n}\n\nclass _WeatherInfoState extends State {\n  String city = '';\n  Weather? weather;\n\n  final TextEditingController controller = TextEditingController();\n\n  @override\n  Widget build(BuildContext context) {\n    return Column(\n      children: [\n        Padding(\n          padding: const EdgeInsets.all(16.0),\n          child: TextField(\n            controller: controller,\n            decoration: InputDecoration(labelText: '\ub3c4\uc2dc \uc774\ub984 \uc785\ub825'),\n          ),\n        ),\n        ElevatedButton(\n          onPressed: () {\n            setState(() {\n              city = controller.text.trim();\n            });\n            fetchWeather(city).then((value) {\n              setState(() {\n                weather = value;\n              });\n            }).catchError((error) {\n              showDialog(\n                context: context,\n                builder: (_) => AlertDialog(\n                  title: Text('\uc624\ub958'),\n                  content: Text(error.toString()),\n                  actions: [\n                    TextButton(\n                      onPressed: () {\n                        Navigator.of(context).pop();\n                      },\n                      child: Text('\ud655\uc778'),\n                    ),\n                  ],\n                ),\n              );\n            });\n          },\n          child: Text('\ub0a0\uc528 \uc870\ud68c'),\n        ),\n        if (weather != null)\n          Padding(\n            padding: const EdgeInsets.all(16.0),\n            child: Text(\n              '\ub3c4\uc2dc: ${weather!.city}\\n\uc628\ub3c4: ${weather!.temperature.toStringAsFixed(1)}\u00b0C\\n\uc0c1\ud0dc: ${weather!.description}',\n              style: TextStyle(fontSize: 20),\n            ),\n          ),\n      ],\n    );\n  }\n}\n\nvoid main() {\n  runApp(WeatherApp());\n}\n<\/weatherinfo><\/code><\/pre>\n
    6. \uc571 \uc2e4\ud589 \ubc0f \uacb0\uacfc \ud655\uc778<\/h2>\n
    \uc704\uc5d0\uc11c \uc791\uc131\ud55c \ucf54\ub4dc\ub97c \ub514\ubc14\uc774\uc2a4 \ub610\ub294 \uc5d0\ubbac\ub808\uc774\ud130\uc5d0\uc11c \uc2e4\ud589\ud558\uc5ec \uacb0\uacfc\ub97c \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uc81c \uc785\ub825\ub780\uc5d0 \ub3c4\uc2dc \uc774\ub984\uc744 \uc785\ub825\ud558\uace0 “\ub0a0\uc528 \uc870\ud68c” \ubc84\ud2bc\uc744 \ub204\ub974\uba74 API \uc694\uccad\uc744 \ud1b5\ud574 \uac00\uc838\uc628 \ub0a0\uc528 \uc815\ubcf4\ub97c \ud654\uba74\uc5d0 \ud45c\uc2dc\ud569\ub2c8\ub2e4.<\/p>\n
    7. \uc5d0\ub7ec \ucc98\ub9ac \ubc0f \uac1c\uc120 \uc0ac\ud56d<\/h2>\n
    \ud604\uc7ac \uad6c\ud604\ub41c \uc608\uc2dc\ub294 \uae30\ubcf8\uc801\uc778 \uae30\ub2a5\ub9cc \uc81c\uacf5\ud558\ubbc0\ub85c, \uc5ec\ub7ec \uac00\uc9c0 \uac1c\uc120 \uc0ac\ud56d\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4:<\/p>\n