Dart_12일차 : HTTP 요청 및 API 연동

 

 오늘은 Dart에서 HTTP 요청을 보내고 데이터를 처리하는 방법을 진행해보자.

• Dart에서 HTTP 요청 보내기 ( http 패키지 사용)
• GET & POST 요청 처리
• JSON 데이터 변환 ( jsonDecode )
• 비동기 네트워크 요청 ( Future , async-await )

---

1. http 패키지 설치 ( Dart 프로젝트 )

 Dart에서 HTTP 요청을 보내려면 http 패키지를 추가해야 한다.

 ✔️  pubspec.yaml 에 http 패키지 추가

dependencies:
  http: ^0.13.6  # 또는 최신 버전 사용

 ✔️ 패키지 설치

//intellij의 하단에 terminal 선택 후
dart pub get
//또는 Flutter 프로젝트 에서는 flutter pub get 진행

• 패키지가 정상적으로 설치되면 이제 HTTP 요청을 보낼 준비 완료!

---

2. GET 요청 보내기 ( http.get )

• REST API에서 데이터를 가져오는 GET 요청을 사용해 보자.
• JSON 데이터를 받아서 Dart의 Map<String, dynamic>으로 변환해야 한다.

import 'dart:convert';
import 'package:http/http.dart' as http; //alias http

void main() async {
  String url = "https://jsonplaceholder.typicode.com/posts/1"; // 샘플 API

  try {
    var response = await http.get(Uri.parse(url));

    if (response.statusCode == 200) {
      var data = jsonDecode(response.body); // JSON을 Map으로 변환
      print("📄 제목: ${data['title']}");
      print("📝 내용: ${data['body']}");
    } else {
      print("⚠️ 요청 실패 (HTTP 상태 코드: ${response.statusCode})");
    }
  } catch (e) {
    print("❌ 오류 발생: $e");
  }
}

• GET 요청 성공 시 → JSON을 Map<String, dynamic>으로 변환 후 출력
• 오류 발생 시 → catch 블록에서 예외 처리
• 샘플 API 페이지인 https://jsonplaceholder.typicode.com/posts/1 사용
• response.statusCode == 200 → 클라이언트의 요청을 서버가 정상적으로 응답 ( OK )

---

3. POST 요청 보내기 ( http.post )

• POST 요청은 서버에 데이터를 전송할 때 사용
• headers를 설정하고 body에 JSON 데이터를 포함해야 함

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

void main() async {
  String url = "https://jsonplaceholder.typicode.com/posts";

  Map<String, dynamic> postData = {
    "title": "Dart HTTP 테스트",
    "body": "Dart에서 HTTP POST 요청을 테스트합니다.",
    "userId": 1
  };

  try {
    var response = await http.post(
      Uri.parse(url),
      headers: {"Content-Type": "application/json"},
      body: jsonEncode(postData), // Map을 JSON 문자열로 변환
    );

    if (response.statusCode == 201) {
      var data = jsonDecode(response.body);
      print("✅ POST 요청 성공: ID ${data['id']}");
    } else {
      print("⚠️ 요청 실패 (HTTP 상태 코드: ${response.statusCode})");
    }
  } catch (e) {
    print("❌ 오류 발생: $e");
  }
}

• POST 요청 성공 시 → 서버에서 반환한 ID 출력
• 요청 실패 시 → 상태 코드 출력
• response.statusCode == 201 → 클라이언트의 요청을 서버가 정상적으로 처리했고 새로운 리소스가 생겼다. ( Created)

---

4. API 응답을 클래스로 변환 (JSON → 객체)

 데이터를 쉽게 다루려면 JSON을 Dart 클래스로 변환하는 것이 좋음

 ✔️  Post 클래스를 생성

class Post {
  final int id;
  final String title;
  final String body;

  Post({required this.id, required this.title, required this.body});

  // JSON → 객체 변환
  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }
}

• factory Post.fromJson() → JSON 데이터를 객체로 변환하는 생성자
• 좌측 트리에서 bin 폴더 아래에 Post.dart 파일을 생성하고, 프로젝트이름.dart 파일을 실행 ( 나는 test.dart )

 

 ✔️ GET 요청 후, Post 객체로 변환

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

void main() async {
  String url = "https://jsonplaceholder.typicode.com/posts/1";

  try {
    var response = await http.get(Uri.parse(url));

    if (response.statusCode == 200) {
      var jsonData = jsonDecode(response.body);
      Post post = Post.fromJson(jsonData); // JSON → 객체 변환

      print("📄 제목: ${post.title}");
      print("📝 내용: ${post.body}");
    } else {
      print("⚠️ 요청 실패 (HTTP 상태 코드: ${response.statusCode})");
    }
  } catch (e) {
    print("❌ 오류 발생: $e");
  }
}

• JSON을 Post 클래스로 변환하여 관리 가능
• 객체 단위로 데이터를 다루면 코드가 더 깔끔하고 유지보수 쉬움

반응형

---

✔️ 테스트 예제 코드 1

 위에서 진행했던 내용을 토대로 충분한 실습을 진행한 후, 테스트 예제를 진행해보도록 하자.

 1. POST 요청을 사용하여 데이터를 서버로 전송하고, 응답 결과 확인

 2. HTTP POST 요청을 사용하여 서버로 데이터 전송

 3. JSON 형식으로 데이터를 보내고, 응답 결과 확인

 4. 응답 데이터를 Map<String, dynamic>으로 변환하여 특정 값 출력

 5. 사용자로부터 제목(title)과 내용(body)을 입력받아 POST 요청을 보냄

import 'dart:convert';
import 'dart:io';
import 'package:http/http.dart' as http;

void main() async {
  String url = "https://jsonplaceholder.typicode.com/posts"; // 샘플 API 엔드포인트

  // ✅ 사용자 입력 받기
  stdout.write("📌 제목을 입력하세요: ");
  String? title = stdin.readLineSync()?.trim();
  stdout.write("📌 내용을 입력하세요: ");
  String? body = stdin.readLineSync()?.trim();

  // ✅ 입력값이 비어 있으면 다시 요청
  if (title == null || title.isEmpty || body == null || body.isEmpty) {
    print("⚠️ 제목과 내용을 모두 입력해야 합니다!");
    return;
  }

  // ✅ 전송할 데이터
  Map<String, dynamic> postData = {
    "title": title,
    "body": body,
    "userId": 1
  };

  try {
    // ✅ POST 요청 보내기
    var response = await http.post(
      Uri.parse(url),
      headers: {"Content-Type": "application/json"},
      body: jsonEncode(postData), // ✅ Map을 JSON 문자열로 변환하여 전송
    );

    if (response.statusCode == 201) {
      var data = jsonDecode(response.body) as Map<String, dynamic>; // ✅ JSON을 Map으로 변환
      print("\n✅ POST 요청 성공!");
      print("📄 제목: ${data['title']}");
      print("📝 내용: ${data['body']}");
      print("🆔 생성된 ID: ${data['id']}");
    } else {
      print("⚠️ 요청 실패 (HTTP 상태 코드: ${response.statusCode})");
    }
  } catch (e) {
    print("❌ 오류 발생: $e");
  }
}

 1️⃣ http.post(Uri.parse(url), headers, body) → POST 요청을 보내 서버에 데이터 전송
 2️⃣ jsonEncode(postData) → Map을 JSON 문자열로 변환하여 요청 본문(body)에 포함
 3️⃣ response.statusCode == 201 → 서버에서 데이터가 성공적으로 생성되었는지 확인
 4️⃣ jsonDecode(response.body) → 응답 데이터를 Map<String, dynamic>으로 변환하여 특정 값 출력

 

✔️ 테스트 예제 코드 2

 1. API 응답을 클래스로 변환하여 객체 형태로 관리 ( fromJson 활용 )

 2. HTTP GET 요청을 보내서 JSON 데이터를 가져오기
 3. JSON을 Dart 클래스 ( Post )로 변환
 4. 객체 형태로 데이터 관리 및 출력

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

// ✅ Post 클래스 정의
class Post {
  final int id;
  final String title;
  final String body;

  Post({required this.id, required this.title, required this.body});

  // ✅ JSON → 객체 변환 (생성자)
  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }

  // ✅ 객체 → JSON 변환
  Map<String, dynamic> toJson() {
    return {
      "id": id,
      "title": title,
      "body": body,
    };
  }
}

void main() async {
  String url = "https://jsonplaceholder.typicode.com/posts/1"; // 샘플 API

  try {
    var response = await http.get(Uri.parse(url)); // ✅ GET 요청

    if (response.statusCode == 200) {
      var jsonData = jsonDecode(response.body); // ✅ JSON을 Map으로 변환
      Post post = Post.fromJson(jsonData); // ✅ JSON → 객체 변환

      print("✅ Post 객체 변환 성공!");
      print("🆔 ID: ${post.id}");
      print("📄 제목: ${post.title}");
      print("📝 내용: ${post.body}");
    } else {
      print("⚠️ 요청 실패 (HTTP 상태 코드: ${response.statusCode})");
    }
  } catch (e) {
    print("❌ 오류 발생: $e");
  }
}

1️⃣ Post 클래스를 정의

• factory Post.fromJson(Map<String, dynamic> json) → JSON 데이터를 객체로 변환
• toJson() → 객체 데이터를 JSON으로 변환 가능
  2️⃣ HTTP GET 요청으로 데이터 가져오기 (http.get)
  3️⃣ JSON 데이터를 Post 객체로 변환 (Post.fromJson())
  4️⃣ 객체를 활용하여 데이터 출력

 

---

 이렇게 HTTP 요청 및 API 연동에 대해서 알아보았다. 추가 적인 내용이 필요한 경우에는 댓글을 요청드리고, 틀린 부분이 있다면 이것 또한 댓글로 알려주시면 수정하도록 하겠습니다!

---