중급

Networking과 HTTP

인터넷에서 데이터를 가져오고 인증 요청, 생성, 수정, 삭제 요청을 처리합니다.

핵심 개념

Networking과 HTTP 주요 항목

요청 흐름

Flutter 앱은 http 같은 패키지로 서버 API와 통신합니다.

언제 쓰나: GET은 데이터를 가져오고, POST는 새 데이터를 보내며, PUT/PATCH는 수정, DELETE는 삭제에 사용됩니다.

Flutter에서: 응답 코드를 확인해 성공, 인증 실패, 서버 오류를 구분해야 합니다.

Future<List<String>> loadLessons() async {
  final response = await http.get(Uri.parse('/lessons'));
  if (response.statusCode != 200) {
    throw Exception('요청 실패');
  }
  return ['Widget', 'Layout', 'State'];
}

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Wrap(
      spacing: 8,
      runSpacing: 8,
      children: [
        Chip(label: Text('Widget')),
        Chip(label: Text('Layout')),
        Chip(label: Text('State'))
      ],
    )
    ],
  ),
)

UI 상태

네트워크 작업은 로딩, 성공, 실패 상태를 반드시 화면에 표현해야 합니다.

언제 쓰나: 실패 시 재시도 버튼이나 사용자에게 이해 가능한 메시지를 제공합니다.

Flutter에서: 토큰 인증이 필요한 요청은 토큰 저장과 갱신 흐름도 함께 설계해야 합니다.

int count = 0;

void increase() {
  setState(() {
    count += 1;
  });
}

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        '카운터',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    ),
      Wrap(
      spacing: 8,
      runSpacing: 8,
      children: [
        Chip(label: Text('현재 값 1')),
        Chip(label: Text('상태 갱신'))
      ],
    ),
      ElevatedButton(
      onPressed: () {},
      child: const Text('+1'),
    )
    ],
  ),
)

확장 개념

Cross-platform HTTP

http 패키지는 Android, iOS, macOS, Windows, Linux, Web에서 공통으로 사용할 수 있는 간단한 HTTP 요청 방법을 제공합니다.
GET은 조회, POST는 생성, PUT/PATCH는 수정, DELETE는 삭제 흐름에 대응합니다.
요청 결과는 상태 코드와 본문을 함께 확인하고, 성공과 실패를 명확히 나누어 처리합니다.

확장 개념

플랫폼 권한

Android에서는 인터넷 사용 권한을 AndroidManifest.xml에 선언해야 합니다.
macOS에서는 네트워크 클라이언트 권한을 entitlements 파일에서 허용해야 합니다.
플랫폼별 권한 누락은 코드가 맞아도 요청이 실패하는 원인이 됩니다.

확장 개념

실전 샘플 흐름

데이터 가져오기, 인증 요청, 데이터 생성/수정/삭제, WebSocket 통신은 서로 다른 예외 처리가 필요합니다.
JSON 파싱은 네트워크 코드와 분리해 모델 변환 함수나 factory 생성자로 옮기는 편이 유지보수에 좋습니다.
큰 JSON은 isolate를 이용한 백그라운드 파싱도 검토할 수 있습니다.

코드

예제

final response = await http.get(Uri.parse('https://example.com/lessons'));
if (response.statusCode == 200) {
  // JSON 파싱
} else {
  throw Exception('요청 실패');
}

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        '강의 목록',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    ),
      Wrap(
      spacing: 8,
      runSpacing: 8,
      children: [
        Chip(label: Text('로딩 완료')),
        Chip(label: Text('Widget')),
        Chip(label: Text('Layout')),
        Chip(label: Text('State'))
      ],
    ),
      Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('3개의 강의를 불러왔습니다.')
      ],
    )
    ],
  ),
)

다음 단계

실습 체크리스트

GET 요청 작성응답 코드 처리로딩/오류 UI 분리

출처세부 기준과 최신 변경 사항을 확인할 수 있습니다.
Flutter API Reference클래스, 메서드, 생성자 세부 정의를 확인합니다.
Data & backend네트워크, 저장소, 직렬화, Firebase 문서를 함께 봅니다.