[flutter] 네트워크 통신 REST API

flutter 개발자·2022년 5월 18일

flutter

목록 보기
1/3
post-thumbnail

들어가며

앱이 동작하면서 많은 데이터들을 서버와 주고 받는다.
데이터들을 쉽게 전달하기 위하여, 서로 연관된 데이터들을 구조화 하여 하나의 객체로 형태로 주고 받게 된다.

예를 들어, 한 고객의 {이름, 성별, 생년월일}을 하나의 객체로 표현하며, 한 고객의 관련 데이터들은 곧 하나의 객체로 표현하면 된다.

JSON

JSON은 대표적인 구조화된 데이터 표현 방식이다.
앱에서 네트워크로 서버와 데이터들을 주고 받기 위해 JSON을 사용하며,
앱에서 서버와 JSON 데이터를 주고 받으려면 인코딩과 디코딩 작업이 필요하다.

JSON Encode

  • Map 형식의 데이터를 문자열로 변환하는 작업
  • 데이터를 서버에 전송할 때 필요

jsonEncode() 함수 사용

String jsonStr = '{'id':1,'name':'test','age':10}';
Map<String, dynamic> map = jsonDecode(jsonStr);

JSON Decode

  • Json 문자열을 Map 타입으로 변환하는 작업
  • 서버에서 전송된 문자열을 앱에서 사용할 때 필요

jsonDecode() 함수 사용

jsonEncode(map);

모델 클래스 만들기

문자열로 데이터를 주고 받기 보다는 객체에 대입해서 사용하면 정확한 타입과 변수명이 지정 됨으로 오타나 실수를 예방할 수 있다.
정교한 프로그래밍을 위해 모델 클래스를 만들어보자.

class User {
  int id;
  String name;

  User({
    required this.id,
    required this.name,
  });
}

fromJson

  User.fromJson(Map<String, dynamic> json)
      : id = json['id'],
        name = json['name'];
factory User.fromJson(dynamic json) {
  return User(
    id: json['idx'] as int,
    name: json['type'] as String,
  );
}

toJson

toJson() 함수는 jsonEncode() 함수 내부에서 자동으로 호출한다.

  Map<String, dynamic> toJson() => {
    'id' : id,
    'name' : name
  };

꿀팁 json_serializable (자동 매핑 패키지)

앞으로 많은 양의 모델 클래스를 만들게 될텐데 상당히 귀찮은 작업이다.
JSON 매핑 코드를 자동으로 만들어주는 패키지가 있으니 참고.

http 패키지로 응답 구현

post 통신하는 예제를 구현해보았다.
http.post 함수를 통해 post 통신을 할 수 있고, statusCode가 200일 때, 성공적으로 응답받음을 확인할 수 있다.

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

Future<User> fetchUser(String text) async {
  String url = URL을 입력하세요';

  final Map<String, dynamic> params = {
    'id': id,
    'name': name,
  };

  final Map<String, String> headers = {
    'Content-Type': 'application/json; charset=UTF-8',
    'Authorization': 'Bearer $ApiKey',
  };

  http.Response response = await http.post(Uri.parse(url),
      body: params, headers: headers);

  // success
  if (response.statusCode == 200) {
    var json = jsonDecode(response.body);
    User user = User.fromJson(json);
    return user;
  }

  // fail
  else {
    throw Exception('Failed to load data $runtimeType');
  }
}

dio 패키지
파일 전송, 동시 요청, 타임 아웃, 요청 및 응답 가로채기 등
다양한 함수를 지원하는 패키지이다.
많이 사용한다는데 시간이 될 때, 추가 포스팅하면서 익혀야겠다.

REST API란?

HTTP 요청에서 제공하는 메서드 종류

GET 메서드

  • 서버로부터 데이터를 가져옴
  • 쿼리 매개변수를 사용

POST 메서드

  • 데이터를 서버에 저장
  • body

PUT 메서드

  • 데이터를 업데이트
  • 매개변수, body

DELETE 메서드

  • 데이터를 삭제
  • 매개변수, body

특정 URL이 있을 때, 아무 메서드나 마음대로 지정해서 요청을 보낼 수 있는 건 아닙니다. 서버에 설계된 메서드만 사용할 수 있습니다.

REST API & RESTful API

HTTP의 GET, POST, PUT, DELETE 등의 메서드를 사용해서 통신하는 가장 대중적인 API 입니다.
HTTP를 이용해서 자원을 명시하고 해당 자원에 대한 CRUD(Create, Read, Update, Delete) 연산을 실시합니다.
균일한 인터페이스, 무상태, 계층화, 캐시 등의 규칙을 맞춘 웹 API 입니다.

기타 자세한 정보는 아래의 블로그에 설명이 잘되어있어서 첨부
https://velog.io/@somfist/REST%EB%9E%80-REST-API-RESTful-API%EC%B0%A8%EC%9D%B4%EC%A0%90

http 패키지 적용 방법

위의 소스를 활용하여 http 함수를 아래와 같이 변경하여 호출할 수 있습니다.
http.get(),
http.post(),
http.put(),
http.delete()

다음 글에서는 FutureBuilder를 사용하여 화면에 나타내는 걸 작성해보도록 하겠습니다.

profile
매일, 꾸준히

0개의 댓글