📚 Today I Learned 21회차 - 데이터 통신 기초와 JSON 💡

안녕하세요! 오늘은 데이터 통신의 기초와 JSON 형식에 대해 학습했습니다. 서로 다른 언어나 시스템 간에 데이터를 주고받기 위한 표준 형식인 JSON의 개념과 Dart에서의 활용 방법을 배웠어요!

🎯 학습 목표

• JSON 형식의 개념과 구조 이해하기
• 직렬화와 역직렬화의 개념 익히기
• Dart에서 jsonEncode와 jsonDecode 활용하기
• 객체와 JSON 문자열 간 변환 구현하기
• 복잡한 중첩 구조의 JSON 다루기

📚 주요 내용

⭐ JSON이란?

JSON (JavaScript Object Notation) 은 서로 다른 언어나 시스템 간 데이터를 주고받기 위한 경량 데이터 교환 형식입니다.

💡 왜 JSON을 사용하나요?: Dart 객체를 다른 언어 서버(예: Java, Python)로 전달하려면 표준화된 형식이 필요합니다. JSON은 언어에 독립적이고 사람이 읽기 쉬운 텍스트 형식이기 때문에 널리 사용됩니다!

📋 JSON 기본 규칙

구성 요소	규칙	예시
Key	반드시 문자열 (큰따옴표)	"name", "age"
Value	6가지 타입 가능	아래 참조
구조	중괄호 {} 로 감싸기	{"key": "value"}

🎨 JSON Value 타입

• String (문자열): "오상구"
• Number (숫자): 7, 3.14
• Boolean (불린): true, false
• Array (배열): ["삼겹살", "연어", "고구마"]
• Object (객체): {"mobile": "010-0000-0000"}
• null: null

💻 JSON 예시

{
  "name": "오상구",
  "age": 7,
  "isMale": true,
  "favorite_foods": ["삼겹살", "연어", "고구마"],
  "dislike_foods": [],
  "contact": {
    "mobile": "010-0000-0000",
    "email": null
  }
}

⚡ Dart에서의 JSON 활용

🔄 직렬화와 역직렬화

데이터를 주고받을 때는 JSON 형식의 String으로 변환하여 전송합니다.

┌─────────────────────────────────────┐
│         직렬화 (Serialization)        │
│   Dart 객체 → Map → JSON String      │
│         jsonEncode() 사용             │
└─────────────────────────────────────┘
                ⬇️  네트워크 전송
┌─────────────────────────────────────┐
│       역직렬화 (Deserialization)      │
│   JSON String → Map → Dart 객체      │
│         jsonDecode() 사용             │
└─────────────────────────────────────┘

💡 왜 Map을 거치나요?: 객체를 바로 문자열로 변환하면 복잡하고 오류가 발생하기 쉽습니다. Map은 JSON의 구조와 일치하기 때문에 중간 단계로 사용하면 안전하게 변환할 수 있어요!

📌 필수 메서드

메서드	용도	변환
toJson()	객체 → Map	직렬화 시 사용
fromJson()	Map → 객체	역직렬화 시 사용
jsonEncode()	Map → String	dart:convert 제공
jsonDecode()	String → Map	dart:convert 제공

💻 실습 및 예제

🔰 기본 예제: 간단한 Human 클래스

import 'dart:convert';

// 🎯 직렬화: 객체를 JSON 형태의 문자열로 변환
//    - 과정: 객체 → Map (toJson) → String (jsonEncode)
// 🎯 역직렬화: JSON 형태의 문자열을 객체로 변환
//    - 과정: String → Map (jsonDecode) → 객체 (fromJson)

void main() {
  // ✅ Step 1: JSON 문자열 준비
  String easyJson = """
{
  "name": "오상구",
  "age": 7,
  "isMale": true
}
""";

  // ✅ Step 2: 역직렬화 (String → Map)
  var decodedData = jsonDecode(easyJson);

  // ✅ Step 3: Map을 객체로 변환
  Human human = Human.fromJson(decodedData);

  // ✅ Step 4: 객체를 다시 Map으로 변환하여 출력
  print(human.toJson());
  // 출력: {name: 오상구, age: 7, isMale: true}
}

// 📦 Human 클래스 정의
class Human {
  String name;
  int age;
  bool isMale;

  // 일반 생성자
  Human({
    required this.name,
    required this.age,
    required this.isMale,
  });

  // 🔧 fromJson: Map → 객체 변환용 named 생성자
  Human.fromJson(Map<String, dynamic> map)
      : this(
          name: map['name'],
          age: map['age'],
          isMale: map['isMale'],
        );

  // 🔧 toJson: 객체 → Map 변환용 메서드
  Map<String, dynamic> toJson() {
    return {
      "name": name,
      "age": age,
      "isMale": isMale,
    };
  }
}

🚀 고급 예제: 중첩 구조 다루기

복잡한 JSON 구조(배열, 중첩 객체)를 다루는 방법입니다.

void main() {
  // 🔥 복잡한 JSON: 배열과 중첩 객체 포함
  String hardJson = """
{
  "name": "오상구",
  "age": 7,
  "isMale": true,
  "favorite_foods": ["삼겹살", "연어", "고구마"],
  "contact": {
    "mobile": "010-0000-0000",
    "email": null
  }
}
""";

  // ✅ 역직렬화: String → Map → 객체
  var decodedData2 = jsonDecode(hardJson);
  HumanAdvanced humanAdvanced = HumanAdvanced.fromJson(decodedData2);

  // ✅ 출력 확인
  print(humanAdvanced.toJson());
  print(humanAdvanced.contact.toJson());
}

// 📦 HumanAdvanced 클래스: 복잡한 구조
class HumanAdvanced {
  String name;
  int age;
  bool isMale;
  List<String> favoriteFoods;  // 📋 배열 타입
  Contact contact;              // 📦 중첩된 객체 타입

  HumanAdvanced({
    required this.name,
    required this.age,
    required this.isMale,
    required this.favoriteFoods,
    required this.contact,
  });

  // 🔧 객체 → Map 변환
  Map<String, dynamic> toJson() {
    return {
      "name": name,
      "age": age,
      "isMale": isMale,
      "favorite_foods": favoriteFoods,
      "contact": contact.toJson(),  // ⚠️ 중첩 객체는 toJson() 호출!
    };
  }

  // 🔧 Map → 객체 변환
  HumanAdvanced.fromJson(Map<String, dynamic> map)
      : this(
          name: map['name'],
          age: map['age'],
          isMale: map['isMale'],
          // ⚡ 배열 변환: List<dynamic>을 List<String>으로
          favoriteFoods: List<String>.from(map['favorite_foods']),
          // ⚡ 중첩 객체 변환: Contact.fromJson() 사용
          contact: Contact.fromJson(map['contact']),
        );
}

// 📦 Contact 클래스: 연락처 정보
class Contact {
  String mobile;
  String? email;  // nullable 타입

  Contact({
    required this.mobile,
    this.email,
  });

  // 🔧 객체 → Map 변환
  Map<String, dynamic> toJson() {
    return {
      "mobile": mobile,
      "email": email,  // ✅ 수정됨: "age" → "email"
    };
  }

  // 🔧 Map → 객체 변환
  Contact.fromJson(Map<String, dynamic> map)
      : this(
          mobile: map["mobile"],
          email: map["email"],  // ✅ 수정됨: "age" → "email"
        );
}

🚨 주의: 원본 코드에서 Contact 클래스의 toJson()과 fromJson()에서 "age"로 잘못 작성된 부분을 "email"로 수정했습니다!

🔍 핵심 포인트

배열 변환 시 주의사항

// ❌ 잘못된 방법: 타입 불일치 오류 발생 가능
favoriteFoods: map['favorite_foods']

// ✅ 올바른 방법: 명시적 타입 변환
favoriteFoods: List<String>.from(map['favorite_foods'])

중첩 객체 변환 시 주의사항

// ❌ 잘못된 방법: Map을 객체로 변환하지 않음
contact: map['contact']

// ✅ 올바른 방법: fromJson() 생성자 사용
contact: Contact.fromJson(map['contact'])

🔍 심화 학습

🤔 추가 탐구 주제

• JSON 패키지: json_serializable을 사용한 자동 코드 생성
• Null Safety: nullable 필드 처리 방법
• 에러 핸들링: JSON 파싱 시 예외 처리
• 네트워크 통신: HTTP 요청과 JSON 연동
• 복잡한 구조: 다중 중첩 객체와 배열 다루기

📝 마무리

✅ 오늘 배운 것

• JSON 개념: 언어 독립적인 데이터 교환 형식으로, key-value 구조를 가짐
• 직렬화: Dart 객체를 toJson() → jsonEncode()로 JSON 문자열로 변환
• 역직렬화: JSON 문자열을 jsonDecode() → fromJson()으로 Dart 객체로 변환
• 배열 변환: List<T>.from() 메서드로 명시적 타입 변환
• 중첩 객체: 각 클래스에 toJson()/fromJson() 구현 필요
• 실습 결과: 기본 구조와 복잡한 중첩 구조 모두 성공적으로 변환

🚀 다음 계획

1. JSON 자동 생성: json_serializable 패키지를 활용한 보일러플레이트 코드 자동화
2. HTTP 통신: http 패키지를 사용한 실제 API 통신 구현
3. 에러 처리: try-catch를 활용한 안전한 JSON 파싱
4. 상태 관리: Provider와 JSON 데이터 연동