앱이 동작하면서 많은 데이터들을 서버와 주고 받는다.
데이터들을 쉽게 전달하기 위하여, 서로 연관된 데이터들을 구조화 하여 하나의 객체로 형태로 주고 받게 된다.
예를 들어, 한 고객의 {이름, 성별, 생년월일}을 하나의 객체로 표현하며, 한 고객의 관련 데이터들은 곧 하나의 객체로 표현하면 된다.
JSON은 대표적인 구조화된 데이터 표현 방식이다.
앱에서 네트워크로 서버와 데이터들을 주고 받기 위해 JSON을 사용하며,
앱에서 서버와 JSON 데이터를 주고 받으려면 인코딩과 디코딩 작업이 필요하다.
String jsonStr = '{'id':1,'name':'test','age':10}';
Map<String, dynamic> map = jsonDecode(jsonStr);
jsonEncode(map);
문자열로 데이터를 주고 받기 보다는 객체에 대입해서 사용하면 정확한 타입과 변수명이 지정 됨으로 오타나 실수를 예방할 수 있다.
정교한 프로그래밍을 위해 모델 클래스를 만들어보자.
class User {
int id;
String name;
User({
required this.id,
required this.name,
});
}
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() 함수는 jsonEncode() 함수 내부에서 자동으로 호출한다.
Map<String, dynamic> toJson() => {
'id' : id,
'name' : name
};
앞으로 많은 양의 모델 클래스를 만들게 될텐데 상당히 귀찮은 작업이다.
JSON 매핑 코드를 자동으로 만들어주는 패키지가 있으니 참고.
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 패키지
파일 전송, 동시 요청, 타임 아웃, 요청 및 응답 가로채기 등
다양한 함수를 지원하는 패키지이다.
많이 사용한다는데 시간이 될 때, 추가 포스팅하면서 익혀야겠다.
DELETE 메서드
특정 URL이 있을 때, 아무 메서드나 마음대로 지정해서 요청을 보낼 수 있는 건 아닙니다. 서버에 설계된 메서드만 사용할 수 있습니다.
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.get(),
http.post(),
http.put(),
http.delete()
다음 글에서는 FutureBuilder를 사용하여 화면에 나타내는 걸 작성해보도록 하겠습니다.