Flutter에서 HTTP로 서버 데이터 불러오기 — 작은 연결이 만들어내는 큰 변화

Flutter를 공부하면서 처음 서버와 연결해 데이터를 주고받는 순간, 나는 진짜 앱을 만드는 느낌을 받았다.
이 작은 연결 하나가 사용자와 데이터를 이어주고, 앱의 생명을 불어넣는다는 걸 느꼈달까.

---

🌐 HTTP 통신이란?

HTTP는 HyperText Transfer Protocol의 약자로, 웹에서 정보를 주고받기 위한 약속이다.
Flutter에서는 http 패키지를 사용해서 이 통신을 쉽게 처리할 수 있다.

🔧 http 패키지 설치

dependencies:
  http: ^0.13.6

설치 후엔 꼭 flutter pub get을 실행하자!

🚀 GET 요청 보내기

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String data = "데이터를 불러오는 중...";

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  Future<void> fetchData() async {
    final url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1');
    final response = await http.get(url);

    if (response.statusCode == 200) {
      final json = jsonDecode(response.body);
      setState(() {
        data = json['title'];
      });
    } else {
      setState(() {
        data = "데이터 불러오기 실패";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("서버 데이터 연결")),
      body: Center(child: Text(data)),
    );
  }
}

📮 POST 요청 보내기

Future<void> sendData() async {
  final url = Uri.parse('https://jsonplaceholder.typicode.com/posts');
  final response = await http.post(
    url,
    headers: {'Content-Type': 'application/json; charset=UTF-8'},
    body: jsonEncode({
      'title': 'Flutter와 서버',
      'body': '이건 테스트 POST 요청입니다.',
      'userId': 1,
    }),
  );

  if (response.statusCode == 201) {
    print('전송 성공!');
  } else {
    print('전송 실패');
  }
}

🧠 jsonDecode / jsonEncode의 역할은?

• jsonDecode() → 서버에서 받은 문자열을 Dart 객체(Map)로 바꿔준다
• jsonEncode() → Dart 객체를 JSON 문자열로 바꿔준다

💡 Tip: 예외 처리도 중요해요!

try {
  final response = await http.get(url);
  if (response.statusCode == 200) {
    // 성공 처리
  } else {
    throw Exception('서버 에러: ${response.statusCode}');
  }
} catch (e) {
  print("예외 발생: $e");
}

📌 마치며

Flutter로 서버와 데이터를 주고받는 방법은 생각보다 간단하지만,
이 간단한 연결이 사용자 경험을 결정짓는 중요한 기술이라는 걸 잊지 말자.

조금씩, 천천히. 우리는 연결의 기술을 배워가고 있다. 🌱

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 여정입니다.